今天就跟大家聊聊有關super 關鍵字在ES6中的作用是什么,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內容,希望大家根據這篇文章可以有所收獲。
成都創(chuàng)新互聯(lián)公司主營雨花臺網站建設的網絡公司,主營網站建設方案,app開發(fā)定制,雨花臺h5重慶小程序開發(fā)搭建,雨花臺網站營銷推廣歡迎雨花臺等地區(qū)企業(yè)咨詢
1、當作函數使用
class A {} class B extends A { constructor() { super(); //ES6 要求,子類的構造函數必須執(zhí)行一次super函數。 } }
注意,super雖然代表了父類A的構造函數,但是返回的是子類B的實例,即super內部的this指的是B,因此super()在這里相當于A.prototype.constructor.call(this)。
class A { constructor() { console.log(new.target.name); //new.target指向當前正在執(zhí)行的函數 } } class B extends A { constructor() { super(); } } new A() // A new B() // B
可以看到,在super()執(zhí)行時,它指向的是子類B的構造函數,而不是父類A的構造函數。也就是說,super()內部的this指向的是B。
2、當作對象使用
在普通方法中,指向父類的原型對象;在靜態(tài)方法中,指向父類。
class A { c() { return 2; } } class B extends A { constructor() { super(); console.log(super.c()); // 2 } } let b = new B();
上面代碼中,子類B當中的super.c(),就是將super當作一個對象使用。這時,super在普通方法之中,指向A.prototype,所以super.c()就相當于A.prototype.c()。
通過super調用父類的方法時,super會綁定子類的this。
class A { constructor() { this.x = 1; } s() { console.log(this.x); } } class B extends A { constructor() { super(); this.x = 2; } m() { super.s(); } } let b = new B(); b.m() // 2
上面代碼中,super.s()雖然調用的是A.prototype.s(),但是A.prototype.s()會綁定子類B的this,導致輸出的是2,而不是1。也就是說,實際上執(zhí)行的是super.s.call(this)。
由于綁定子類的this,所以如果通過super對某個屬性賦值,這時super就是this,賦值的屬性會變成子類實例的屬性。
class A { constructor() { this.x = 1; } } class B extends A { constructor() { super(); this.x = 2; super.x = 3; console.log(super.x); // undefined console.log(this.x); // 3 } } let b = new B();
上面代碼中,super.x賦值為3,這時等同于對this.x賦值為3。而當讀取super.x的時候,讀的是A.prototype.x,所以返回undefined。
注意,使用super的時候,必須顯式指定是作為函數、還是作為對象使用,否則會報錯。
class A {} class B extends A { constructor() { super(); console.log(super); // 報錯 } }
看完上述內容,你們對super 關鍵字在ES6中的作用是什么有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。