s6中class的一些基础知识和es5语法的对比

在es6中，出现了类(class)的概念，这极大的优化了我们的开发效率，今天我们就来说说js中的class。

首先es6的class，只是在es5的构造函数的基础上优化的语法糖，基本上class的所有的功能，在es5中都可以实现，只是es6使用起来比较便捷，清晰。

语法部分：

class vertical{
    //静态属性
    static company="Tencent";
 
    //属性定义(实例，与constructor中的属性同属一个this)
    varsion="1.0.0";
    constructor(name,gender){
        //实例属性
        this.name=name;
        this.gender=gender;
    }
 
    //方法定义(在prototype上)
    fn1(){
        console.log('fn1')
    }
     
    //静态方法
    static fn2(){
        console.log('fn2');
    }
}
 
//设置静态属性company不可修改
Object.defineProperty(vertical,"company",{
    writable:false
})

上述我们一个名为vertical的类，定义了一个静态属性company，所谓静态属性就是不用实例化(new)类就可以直接访问，静态方法也是同理。

在class中定义方法不需要使用function关键字，只需要直接写上函数名加上括号然后跟上函数体即可，比如我们定义了constructor和fn1两个方法。

这里需要注意的是，construator方法是构造方法，即在实例化类的时候，就会自动调用，即使我们不定义constructor方法，js引擎在实例化类的时候，也会自动加上，这个一个默认方法。

调用部分：

var obj = new vertical("jack","male");//实例化类
console.log(vertical.company)//输出Tencent
console.log(obj.name)//输出jack
console.log(obj.varsion)//输出1.0.0
obj.fn1();//调用原型函数
vertical.fn2();//调用静态方法

使用es5来实现上述代码中的类

function Vertical(name,gender){
 this.verson="1.0.0";
 this.name=name;
 this.gender=gender;
}
vertical.company="Tencent";//静态属性
vertical.fn2=function(){ //静态方法
 console.log('fn2');
}
//方法定义(prototype)
vertical.prototype.fn1=function(){
 console.log('fn1');
}

这就是es5的语法，也就是使用构造函数，同样可以实现class的功能，只是没有class的语法那么清晰。

调用部分代码不变，可直接使用。

好了，今天关于es6的class的基础用法就到这，下一期我们来了解class的其他一些功能，以及如何继承。