constructor和super

constructor

constructor是類的構造函數，經過new命令建立對象實例時，自動會掉用該方法 沒有顯式定義的狀況下會被默認添加

通常constructor方法返回實例對象this,但也能夠指定返回對象

function A() {
    this.name = 'a';
    this.age = 12;
}

const a = new A();
console.log(a.name, a.age); // a 12

function B() {
    this.name = 'b';
    this.age = 14;
    
    return {
        name: 'c',
        age: 13
    }
}
const b = new B();
console.log(b.name, b.age); // c 13

複製代碼

super

super關鍵字既能夠當作函數來使用，也能夠看成對象來使用

// 看成函數使用
class Parent {}
class Child extends Parent {
    constructor() {
        super();
    }
}
複製代碼

注：在constructor中必須調用super方法由於子類沒有本身的this對象，而是繼承父類的this對象，super就表明了父類的構造函數。super雖然表明了父類Parent的構造函數，但返回的是子類Child的實例，即super內部的this是指向Child，至關於Parent.prototype.constructor.call(this.proto)

// 當作對象使用
class Parent {
  name() {
    return 'name';
  }
}

class Child extends Parent {
  constructor() {
    super();
    console.log(super.name());
  }
}

let i = new Child(); // output name
複製代碼

經過super調用父類的方法時，super會綁定子類的this

React中super的使用

調用super的緣由：在ES6中，在子類的constructor中必須先調用super才能引用this

super(props)的目的：在constructor中可使用this.props

React文檔建議，調用super時帶上props,而關於React中無論是否是調用了super(pros)在render方法中都可以使用this.props的緣由則是React在對Class進行支持的時候不單單是添加了對ES6的支持還考慮了其餘諸如ClojureScript、CoffeeScript的解決方案，詳見 overreacted.io/why-do-reac…