本文實例講述了es6 super關鍵字的理解與應用。分享給大家供大家參考,具體如下:
前面介紹了static關鍵字,class類還有另外一個關鍵字super
super不僅僅是一個關鍵字,還可以作為函數和對象。
函數:在子類繼承父類中,super作為函數調用,只能寫在子類的構造函數(constructor)里面,super代表的是父類的構造函數,
難點理解
但是執行過時supre()代表的是子類,super()里面的this指向子類的實例對象this。
class A { constructor() { console.log(new.target.name); }}class B extends A { constructor() { super();//這里的super相當于A類的constructor構造函數,會執行A的constructor,但是此時的this指 //向的是B,所以打印出B //換一種方法理解是:在執行super時,A把constructor方法給了B,此時B有了A的功能,但是執 //行的是B的內容,也就是es5的A.prototype.constructor.call(this)。 }}new A() // Anew B() // B對象:
這里重點理解下對象,概念相對抽象
super作為對象使用時,分為在普通方法中使用和在靜態方法中使用
在普通方法找中使用:super指向父類的原型,即A.prototype,可以訪問到原型上的方法和屬性
邏輯抽象一:
ES6 規定,在子類普通方法中通過super調用父類的方法時,方法內部的this指向當前的子類實例。
class A { constructor() { this.x = 1; } print() { console.log(this.x); }}class B extends A { constructor() { super(); this.x = 2; } m() { super.print(); }}let b = new B();b.m() // 2super.print()雖然調用的是A.prototype.print(),但是A.prototype.print()內部的this指向子類B的實例
super作為對象,用在靜態方法之中,這時super將指向父類,而不是父類的原型對象。
class Parent { static myMethod(msg) { console.log('static', msg); } myMethod(msg) { console.log('instance', msg); }}class Child extends Parent { static myMethod(msg) { super.myMethod(msg); } myMethod(msg) { super.myMethod(msg); }}Child.myMethod(1); // static 1var child = new Child();child.myMethod(2); // instance 2感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.Vevb.com/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容可查看本站專題:《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
圖片精選