ES6-物件的擴充套件-super關鍵字
this關鍵字總是指向函式躲在的當前物件,ES6 又新增了另一個類似的關鍵字 super,指向當前物件的原型物件。
const proto = {
foo: 'hello'
};
const obj = {
find() {
return super.foo;
}
};
Object.setPrototypeOf(obj, proto);
obj.find() // "hello"
上面程式碼中,物件 obj 的 find 方法之中,通 super.foo 引用了原型物件 proto 的 foo 屬性。
注意,super 關鍵字表示原型物件時,只能用在物件的方法之中,用在其他地方都會報錯。
// 報錯
const obj = {
foo: super.foo
}
// 報錯
const obj = {
foo: () => super.foo
}
// 報錯
const obj = {
foo: function () {
return super.foo
}
}
上面三種 super 的用法都會報錯,因為 對於 JavaScript 引擎來說,這裡的 super 都沒有用在物件的方法之中。第一種寫法是 super 用在屬性裡面,第二種和第三種寫法是 super 用在一個函式裡面,然後賦值給 foo 屬性。目前,只有物件方法的簡寫法可以讓 JavaScript 引擎確認,定義的是物件的方法。
JavaScript 引擎內部,super.foo 等同於 Object.getPrototypeOf(this).foo (屬性)或 Object.getPrototypeOf(this).foo.call(this) 方法
const proto = {
x: 'hello',
foo() {
console.log(this.x);
},
};
const obj = {
x: 'world',
foo() {
super.foo();
}
}
Object.setPrototypeOf(obj, proto);
obj.foo() // "world"
上面程式碼中,super.foo 指向原型物件 proto 的 foo 方法,但是繫結的 this 卻還是當前物件 obj,因此輸出的就是 world。