es6 super關(guān)鍵字的理解與應(yīng)用實(shí)例分析
本文實(shí)例講述了es6 super關(guān)鍵字的理解與應(yīng)用。分享給大家供大家參考,具體如下:
前面介紹了static關(guān)鍵字,class類還有另外一個(gè)關(guān)鍵字super
super不僅僅是一個(gè)關(guān)鍵字,還可以作為函數(shù)和對(duì)象。
函數(shù):在子類繼承父類中,super作為函數(shù)調(diào)用,只能寫在子類的構(gòu)造函數(shù)(constructor)里面,super代表的是父類的構(gòu)造函數(shù),
難點(diǎn)理解
但是執(zhí)行過(guò)時(shí)supre()代表的是子類,super()里面的this指向子類的實(shí)例對(duì)象this。
class A { constructor() { console.log(new.target.name); } } class B extends A { constructor() { super();//這里的super相當(dāng)于A類的constructor構(gòu)造函數(shù),會(huì)執(zhí)行A的constructor,但是此時(shí)的this指 //向的是B,所以打印出B //換一種方法理解是:在執(zhí)行super時(shí),A把constructor方法給了B,此時(shí)B有了A的功能,但是執(zhí) //行的是B的內(nèi)容,也就是es5的A.prototype.constructor.call(this)。 } } new A() // A new B() // B
對(duì)象:
這里重點(diǎn)理解下對(duì)象,概念相對(duì)抽象
super作為對(duì)象使用時(shí),分為在普通方法中使用和在靜態(tài)方法中使用
在普通方法找中使用:super指向父類的原型,即A.prototype,可以訪問(wèn)到原型上的方法和屬性
邏輯抽象一:
ES6 規(guī)定,在子類普通方法中通過(guò)super調(diào)用父類的方法時(shí),方法內(nèi)部的this指向當(dāng)前的子類實(shí)例。
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() // 2
super.print()雖然調(diào)用的是A.prototype.print(),但是A.prototype.print()內(nèi)部的this指向子類B的實(shí)例
super作為對(duì)象,用在靜態(tài)方法之中,這時(shí)super將指向父類,而不是父類的原型對(duì)象。
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 1 var child = new Child(); child.myMethod(2); // instance 2
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- 深入淺析ES6 Class 中的 super 關(guān)鍵字
- es6中class類靜態(tài)方法,靜態(tài)屬性,實(shí)例屬性,實(shí)例方法的理解與應(yīng)用分析
- ES6 Class中實(shí)現(xiàn)私有屬性的一些方法總結(jié)
- es6新特性之 class 基本用法解析
- 解讀ES6中class關(guān)鍵字
- ES6 javascript中Class類繼承用法實(shí)例詳解
- ES6 javascript中class類的get與set用法實(shí)例分析
- ES6 javascript中class靜態(tài)方法、屬性與實(shí)例屬性用法示例
- ES6入門教程之Class和Module詳解
- JavaScript ES6中CLASS的使用詳解
相關(guān)文章
js ondocumentready onmouseover onclick onmouseout 樣式
下面都是一些上面的事件觸發(fā)的事先定義的代碼。2010-07-07JavaScript基于inquirer封裝一個(gè)控制臺(tái)文件選擇器
這篇文章主要介紹了JavaScript基于inquirer封裝一個(gè)控制臺(tái)文件選擇器,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-08-08JS 獲取瀏覽器和屏幕寬高等信息的實(shí)現(xiàn)思路及代碼
本節(jié)代碼主要使用了Document對(duì)象關(guān)于窗口的一些屬性,附實(shí)現(xiàn)代碼及源程序解決,有需求的朋友可以參考下2013-07-07用js讀、寫、刪除Cookie代碼分享及詳細(xì)注釋說(shuō)明
JavaScript是運(yùn)行在客戶端的腳本,因此一般是不能夠設(shè)置Session的,因?yàn)镾ession是運(yùn)行在服務(wù)器端的。而cookie是運(yùn)行在客戶端的,所以可以用JS來(lái)設(shè)置cookie. 下面我們來(lái)分析下案例2014-06-06設(shè)置點(diǎn)擊文本框或圖片彈出日歷控件的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇設(shè)置點(diǎn)擊文本框或圖片彈出日歷控件的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧2016-05-05