ES6 Class 关键字

Class 关键字概述

javaScript语言的传统方法是通过构造函数，定义并生成新对象。

function Point(x, y) {
  this.x = x;
  this.y = y;
}
var p = new Point(1, 2);

上面这种写法跟传统的面向对象语言差异很大，很容易让新学习这门语言的程序员感到困惑。

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法。上面的代码用ES6的 class 改写，就是下面这样。

class Point{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}
let p1 = new Point(1,3);
console.log(p1.toString());

ES6 构造函数

上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。

Point类除了构造方法，还定义了一个toString方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。

实例化

生成类的实例对象的写法，与ES5完全一样，也是使用new命令。如果忘记加上new，像函数那样调用Class，将会报错。

// 报错
var point = Point(2, 3);
// 正确
var point = new Point(2, 3);

类的prototype属性和__proto__属性

大多数浏览器的ES5实现之中，每一个对象都有__proto__属性，指向对应的构造函数的prototype属性。Class作为构造函数的语法糖，同时有prototype属性和__proto__属性，因此同时存在两条继承链。

（1）子类的__proto__属性，表示构造函数的继承，总是指向父类。
（2）子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性。

class A {
}
class B extends A {
}
B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

上面代码中，子类B的__proto__属性指向父类A，子类B的prototype属性的__proto__属性指向父类A的prototype属性。

示例 :

class Point{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}
Point.prototype.age = 18;
let p1 = new Point(1,3);
console.log(p1.toString());
console.log(p1.age);