constructor和super

大隻魚00發表於2018-12-06
Struct

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…

相關文章