JavaScript 类的三部曲（三）

继承

• 说起继承，我相信大家应该都不陌生吧。举个非常通俗的例子，把你父亲的所有资产都转到你名下，这叫继承。把你的所有资产全部转到你儿子的名下，这也叫继承。
• 那么JavaScript 类 class 中的继承到底是怎么一回事呢？让我们来探索一下吧。

	class Father {
	  // ...
	}
	class Son extends Father {
	  // ...
	}

上面的代码就是一个典型的继承，Son 继承 Father ，Father 为父类，Son 为子类，但是这段代码并没有什么特殊的地方，因为这两个类内部并没有定义任何东西，所以 Son 只是复刻了一个一模一样的 Father ，就像你和你爸走出去，别人都说你爷俩真是一个模子里刻出来的。

	class Father {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
      toStr() {
        return this.x + this.y
      }
    }
    class Son extends Father {
      constructor(x, y, color) {
        super(x, y);
        this.color = color;
      }
      toStr1() {
        return this.color + super.toStr()
      }
    }

上面这段代码中的 Son 才算是一个真正的继承类，不管是继承父类中的属性还是方法，都必须在前面加上 super 关键字，super 关键字在这里起到了一个什么作用呢？就是新建一个父类的 this 对象，然后通过这个 this 对象来调用和得到父类中的属性和方法。

注意点：

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

    class Son extends Father {
      constructor(x, y, color) {
        this.color = color; // ReferenceError
        super(x, y);
        this.color = color; // 正确
      }
    }
    let son = new Son()

子类只有在使用 super 之后才能使用 this 关键字，否则会向上面那样报错。
原因是因为子类的构建是基于父类的，所以只有 super 才能调用父类实例。

通过 instanceof 关键字可以判断该实例是否是通过该类创建的。

	console.log(son instanceof Father);  // true
    console.log(son instanceof Son);  // true

返回 true 表示 son 是 Father 和 Son 这两个类生成的实例。

	class Father {
      static to() {
        console.log('to');
      }
    }
    class Son extends Father {}
    Son.to()  // to

上面的代码表达了，父类的静态方法也会被子类所继承，to 是 Father 的静态方法，而 Son 继承了 Father ，所以 Son 也有 to 这个静态方法

Object.getPrototypeOf()

Object.getPrototypeOf() 方法可以从子类上获取父类

	console.log(Object.getPrototypeOf(Son) === Father)    // true

所以，可以用这个方法来判断一个类是否继承了另一个类

类的 prototype 和 __proto__ 属性

大家都知道，在 JavaScript 实现中，每个对象都有 __proto__，指向对应的构造函数的 prototype 属性。class 作为构造函数的语法糖，同时拥有 prototype 属性和 __proto__ 属性，因此同时存在两条继承链。
（1）子类的 __proto__ 属性，表示构造函数的继承，总是指向父类。
（2）子类 prototype 属性的 __proto__ 属性，表示方法的继承，总是指向父类的 prototype 属性。

	class F {}
	
    class S extends F {}
    
    console.log(S.__proto__ === F);  // true
    console.log(S.prototype.__proto__ === F.prototype);  // true

上面代码中，子类 S 的 __proto__ 属性指向父类 F ，子类的 S 的 prototype 属性的 __proto__ 属性指向父类 F 的 prototype 属性

实例的 __proto__ 属性

子类实例中有一个 __proto__ 属性，子类实例的 __proto__ 指向父类，那么子类实例的 __proto__ 的 __proto__ 指向的就是父类的原型。

	class F {}
    class S extends F {}
    let f = new F()
    let s = new S()
    console.log(s.__proto__.__proto__ === f.__proto__);   // true