1. 程式人生 > >ES6中的super關鍵字

ES6中的super關鍵字

在JavaScript中,this關鍵字總是指向函式所在的當前物件,ES6中增加了一個與this對應的super關鍵字,指向的是當前物件(this指向的物件)的原型物件。

const demo1 = {
   prop1  : '屬性1'
};

const demo2 = {
    find(){
       //返回demo2 的原型物件的foo屬性
       return super.foo
    }
};

Object.setPrototypeOf(demo2,demo1);
obj.find() //"hello"
     需要注意的是,當super關鍵字表示原型物件時,只能用在物件的方法中。而在這裡JavaScript引擎有一個bug。只有用物件方法的簡寫寫法時,引擎才能確認這個函式是物件的方法,其他寫法應用super的時候都會報錯。
const proto = {
   title :'原型物件'
   sayTitle(){
      console.log(this.title);
   }
};
const obj = {
   title : '物件',
   sayPrototypeTitle(){
      super.sayTitle();
   }
}
Object.setPrototypeOf(obj,proto);obj.sayPrototypeTitle();// 結果:// 原型物件
     下面是幾種會報錯的寫法:
//報錯,因為super不能應用在方法之外。
const obj = {
   protoTitle : super.foo
}
//因為此時JS引擎不能識別function是物件的方法,所以呼叫super會報錯。
const obj = {
   title : '物件',
   sayPrototypeTitle : function(){
      super.sayTitle();
   }
}
//因為此時JS引擎不能識別“箭頭函式”是物件的方法,所以呼叫super會報錯。
const obj = {
   title : '物件',
   sayPrototypeTitle => super.sayTitle();
}