Class 的那些事儿

类

ES6 引入了Class（类）这个概念，作为对象的模板，通过class关键字，可以定义类。

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

• 类的数据类型就是函数，类本身就是指向构造函数。
• 使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。
• 在ES6中，类的所有方法都定义在类的prototype属性上面。

class Point {
  constructor () {
    // do sth
  }
  toValue () {
    // do sth  
  }
}
// 等同于
Point.prototype = {
  construcror () {},
  toValue () {}
}

• 在类的实例上面调用方法，其实就是调用原型上的方法。

class B ()
let b = new B();
b.constructor === B.prototype.constructor; // true

• prototype对象的constructor属性，直接指向“类”的本身。

class MyPoint{
    constructor(props){
        this.x = props.x;
        this.y = props.y;
    }
}
var myPoint = new MyPoint({x:1,y:2});
myPoint.constructor === MyPoint; // => true
MyPoint.prototype.constructor === MyPoint; // => true

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

  class MyPoint {
        constructor(props) {
            this.x = props.x;
            this.y = props.y;
        }
        sum() {
            console.log(this.x + this.y);
        }
    }
    var myPoint = new MyPoint({
        x: 1,
        y: 3
    });
    myPoint.sum(); // => 4
    var keys = Object.keys(MyPoint.prototype);
    console.log(keys); // => []

constructor 方法

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

  class MyPoint {
    
  }
  // 等同于
  class MyPoint {
     constructor(){}
  }

• js引擎会自动为它添加一个空的constructor方法。
• constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象

  class Foo{
        constructor(){
            var p = {x:'scp'};
            return Object.create(p);  // 返回一个全新的对象
        }
    }
    // 实例对象不是Foo类的实例
    console.log(new Foo instanceof Foo); // => false
    // 查询实例对象的原型对象是 上边定义的 p
    console.log(Object.getPrototypeOf(new Foo)); // => {x:"scp"}

类的实例

• 类必须使用new调用，否则会报错
• 实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即class上）

  class MyPoint {
        constructor(props) {
            this.x = props.x;
            this.y = props.y;
        }
        sum() {
            console.log(this.x + this.y);
        }
    }
    var myPoint = new MyPoint({
        x: 1,
        y: 3
    });
    console.log(myPoint.hasOwnProperty('x')); // => true
    console.log(myPoint.hasOwnProperty('sum'));// =>  false
    console.log(myPoint.__proto__.hasOwnProperty('sum')); // => true

如上，x是实例对象myPoint自身的属性，sum是定义在原型对象上的属性

---

继承

Class可以通过 extends关键字实现继承

• ChildrenPoint中的constructor方法中出现的super关键字表示父类的构造函数，用来新建父类的this对象。

• 子类必须在constructor中调用super方法，否则新建实例时会报错，这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法，如果不调用super方法，子类就得不到this对象。

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

• ES6 的继承机制，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

  class MyPoint {
        constructor(props) {
            this.x = props.x;
            this.y = props.y;
        }
        sum(...values) {
            console.log(values);
            let summation = values.reduce((prev,cur) => prev + cur,0);
            console.log(summation);
        }
  }
  // 继承
  class ChildrenPoint extends MyPoint{
        constructor(props,cProps){
            super(props);  // 调用父类的constructor(props)
            this.w = props.w
            this.z = cProps.z;
        }
   }
   var cPoint = new ChildrenPoint({x:1,y:2,w:3},{z:4});
   cPoint.sum(...Object.values(cPoint)); // => 10

Object.getPrototypeOf()

该方法可以用来从子类上获取父类，可以使用这个方法判定，一个类是否继承了另一个类

console.log(Object.getPrototypeOf(ChildrenPoint) === MyPoint); // => true

super 关键字

• super可以当做函数使用，只能在子类的构造函数中，使用，其它地方报错
• super可以当做对象使用
• super作为函数调用时，代表父类的构造函数，ES6要求，子类的构造函数必须执行一次super函数。
• 子类的构造函数中的super()，代表调用父类的构造函数，但是返回的是子类的实例，即super内部的this指的是子类的实例。

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

上面代码，super()在这里相当于A.prototype.constructor.call(this)

• super作为对象时，在普通方法中，指向父类的原型对象，在静态方法中，指向父类

  class MyPoint {
        constructor(props) {
            this.x = props.x;
        }
        sum(...values) {
            console.log(values);
            let summation = values.reduce((prev,cur) => prev + cur,0);
            console.log(summation);
        }
  }
  // 继承
  class ChildrenPoint extends MyPoint{
        constructor(props,cProps){
            super(props);  // 调用父类的constructor(props)
            this.y = cProps.y;
        }
        csum(...values){         
           super.sum(...values); //   super作为对象使用，相当于MyPoint.prototype
        }
   }
   var cPoint = new ChildrenPoint({x:1},{y:4});
   cPoint.sum(...Object.values(cPoint)); // => 10
   cPoint.csum(...Object.values(cPoint)); // => 10

上面代码中，子类ChildrenPoint当中的super.sum(...values)，就是将super当做一个对象使用，super在普通方法中，指向MyPoint.prototype，所以super.sum(...values)就相当于MyPoint.prototype.sum(...values)

因为super指向父类的原型对象，所以定义在父类实例上的方法或者属性，是无法通过super调用的，比如super.x就会输出undefined

类的 prototype 属性和__proto__属性

• 子类的__proto__属性，表示构造函数的继承，总是指向父类
• 子类的prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype

class A {
}

class B extends A {
}

B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true