class
ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
    get prop() {
        return 'getter';
    }
    set prop(value) {
        console.log('setter: '+value);
    }
}
          
Object.keys(Point.prototype)
// []

  • 1、类的内部所有定义的方法，都是不可枚举的（non-enumerable）。

  • 2、constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
    constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象。

  • 3、类必须使用new调用，否则会报错。

  • 4、存值函数和取值函数是设置在属性的 Descriptor 对象上的。

    var descriptor = Object.getOwnPropertyDescriptor(
          Point.prototype, "html"
    );

    "get" in descriptor  // true
    "set" in descriptor  // true

  • 5、与函数一样，类也可以使用表达式的形式定义

    const MyClass = class Me {
        getClassName() {
            return Me.name;
      }
    };

    注意的是，这个类的名字是Me，但是Me只在 Class 的内部可用，指代当前类。在 Class 外部，这个类只能用MyClass引用。

注意点：

  • （ 1、类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式
  • （ 2、类不存在变量提升（hoist），这一点与 ES5 完全不同。
  • （ 3、name属性总是返回紧跟在class关键字后面的类名。
  • （ 4、如果某个方法之前加上星号（*），就表示该方法是一个 Generator 函数。
  • （ 5、类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。

静态方法

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

class Foo {
    static bar() {
        this.baz();
    }
    static baz() {
        console.log('hello');
    }
    baz() {
        console.log('world');
    }
}

Foo.bar() // hello

注意： 如果静态方法包含this关键字，这个this指的是类，而不是实例。

如果在实例上调用静态方法，会抛出一个错误，表示不存在该方法。

// 父类的静态方法，可以被子类继承。
class Foo {
    static classMethod() {
        return 'hello';
    }
}

class Bar extends Foo {
    
}

Bar.classMethod() // 'hello'

静态属性

静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。

class Foo {
    
}

Foo.prop = 1;
Foo.prop // 1

目前，只有这种写法可行，因为 ES6 明确规定，Class 内部只有静态方法，没有静态属性。现在有一个提案提供了类的静态属性，写法是在实例属性法的前面，加上static关键字。

Class 的继承

  • 1、Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。
    class ColorPoint extends Point {
          constructor(x, y, color) {
            super(x, y); // 调用父类的constructor(x, y)
        this.color = color;
      }

      toString() {
            return this.color + ' ' + super.toString(); // 调用父类的toString()
      }
    }
    子类必须在constructor方法中调用super方法，否则新建实例时会报错

子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例。

  • 2、判断，一个类是否继承了另一个类。

    Object.getPrototypeOf(ColorPoint) === Point
    // true

  • 3、super这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。

    • 第一种情况，super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次

      class A {}

      class B extends A {
          constructor() {
              super();
      }
      }

      注意，super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B的实例，因此super()在这里相当于A.prototype.constructor.call(this)。

      • 第二种情况，super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

ES6 规定，在子类普通方法中通过super调用父类的方法时，方法内部的this指向当前的子类实例。

类的 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

    这样的结果是因为，类的继承是按照下面的模式实现的。
    class A {
        
    }

    class B {
        
    }

    // B 的实例继承 A 的实例
    Object.setPrototypeOf(B.prototype, A.prototype);

    // B 继承 A 的静态属性
    Object.setPrototypeOf(B, A);

    const b = new B();

    实例的 __proto__属性

    子类实例的__proto__属性的__proto__属性，指向父类实例的__proto__属性。也就是说，子类的原型，是父类的原型。
var p1 = new Point(2, 3);
var p2 = new ColorPoint(2, 3, 'red');

p2.__proto__ === p1.__proto__ // false
p2.__proto__.__proto__ === p1.__proto__ // true