ES6之Class

最近在学习React，由于在组件定义这一块有用到ES6新增的class语法，所以，重新回过头来整理一下这里的知识点。下述知识点的均来自阮一峰老师的《ES6标准入门》一书。

什么是Class

ES6提供了更接近传统语言的写法，引入class(类)这个概念作为对象的模板，通过class关键字可以定义类。基本上，ES6中的class可以看作是一个语法糖。它的绝大部分功能，ES5都可以做到。新的class写法只是让对象原型的写法更加清晰，更像面向对象编程的语法而已。

Demo

class 类名{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    方法1(){}
    方法2(){}
}

上述代码定义了一个”类”。constructor方法就是构造方法，而this关键字则代表实例对象。

注意：

1. 定义“类”的方法时，前面不需要叫上function这个保留字。直接把函数定义放进去就可以了。

2. 方法之间不需要加逗号分隔，加了会报错。

3. 构造函数的prototype属性在ES6的”类”上继续存在。事实上，类的所有方法都定义在类的prototype属性上

4. 类的内部定义的所有方法都是不可枚举的

Constructor方法

constructor方法是类的默认方法。通过new命令生成对象实例时自动调用该方法。一个类必须要有constructor方法。如果没有显示定义，会默认添加一个空的constructor方法。

constructor方法默认返回实例对象(即this)。但是也可以指定返回另外一个对象。

类必须通过new来调用，否则会报错。这是他和普通构造函数的一个主要区别。

Class的静态方法

类相当于实例的原型，所有在类中定义的方法都会被实例继承。如果在一个方法前加上static关键字，就表示该方法不会被实例继承。而是通过类直接调用，称为静态方法。

class Foo {
    static classMethod(){
        return 'hello';
    }
}
Foo.classNethod()//hello;
let foo = new Foo();
foo.classMethod()//TypeError:foo.classMethod is not a function;

注意：

1. 父类的静态方法可以被字类继承。
2. 静态方法也可以从super对象上调用。

Class的静态属性和实例属性

静态属性始类Class本身的属性。而不是定义在实例对象上的属性。Class的静态属性只要在上面的实例属性上加上static关键字就可以了。

//旧写法
class Foo{}
Foo.prop = 1;

//新写法
class Foo{
    static prop = 1;
}

旧写法的静态属性定义在类的外部，整个类生成后再生成静态属性。这样很容易让人忽略这个静态属性。也不符合相关代码应该放在一起的代码组织原则。另外，新写法说显式声明，而不是赋值处理。语义更好。