類繼承
看類繼承前,先回顧構(gòu)造函數(shù)怎么實(shí)現(xiàn)對(duì)象的繼承的
function F() { this.a = 1; } function Son() { F.call(this); } function inherit(S, F) { S.prototype = Object.create(F.prototype); S.prototype.constructor = S; } inherit(Son, F); let son = new Son();
它實(shí)現(xiàn)了哪幾個(gè)功能:
繼承F的this屬性也就是F實(shí)例對(duì)象的屬性
Son.prototype.__proto__ === F.prototype 實(shí)現(xiàn)了上下輩分的繼承
son.constructor讓son認(rèn)祖歸宗
同樣類繼承也是如此用來(lái)extends和super關(guān)鍵字,看一個(gè)簡(jiǎn)單的繼承
class A { constructor() { this.a = 1; } } class B extends A { constructor() { super(); this.b = 2; } m() { } } let b = new B();
同樣實(shí)現(xiàn)了那三點(diǎn)基本功能
B?{a: 1, b: 2} b.__proto__ == B.prototype b.__proto__.__proto__ === A.prototype b.constructor === B
我認(rèn)為:關(guān)鍵字extends實(shí)現(xiàn)了原型的繼承,以及constructor的修正;關(guān)鍵字super實(shí)現(xiàn)了父類this的繼承,這里的super相當(dāng)于A.prototype.constructor.call(this)
注意點(diǎn)
寫(xiě)了constructor,就必須在里面寫(xiě)super,不然new子類實(shí)例對(duì)象會(huì)報(bào)錯(cuò);要么都不寫(xiě);其次子類的中constructor中的this屬性必須寫(xiě)在super后面
1.ES5 的繼承,實(shí)質(zhì)是先創(chuàng)造子類的實(shí)例對(duì)象this,然后再將父類的方法添加到this上面(Parent.apply(this))。ES6 的繼承機(jī)制完全不同,實(shí)質(zhì)是先將父類實(shí)例對(duì)象的屬性和方法,加到this上面(所以必須先調(diào)用super方法),然后再用子類的構(gòu)造函數(shù)修改this
2.因?yàn)樽宇愖约旱膖his對(duì)象,必須先通過(guò)父類的構(gòu)造函數(shù)完成塑造,得到與父類同樣的實(shí)例屬性和方法,然后再對(duì)其進(jìn)行加工,加上子類自己的實(shí) 例屬性和方法。如果不調(diào)用super方法,子類就得不到this對(duì)象。
class B extends A { constructor() { //要么都不寫(xiě),new時(shí)默認(rèn)會(huì)自動(dòng)生成 super(); this.b = 2; //寫(xiě)在super后面 } m() { } }super的各種指向問(wèn)題
super作為函數(shù),只能放在子類的constructor中,指向A.prototype.constructor.call(this)
super作為對(duì)象,在子類普通方法中調(diào)用,super就是父類的原型也就是A.prototype;所以只能調(diào)用原型鏈上的方法,不能動(dòng)用父類實(shí)例的方法和屬性constructor{}中的不能調(diào)用
class A { constructor() { this.a = 1; } n() { return this; } } class B extends A { constructor() { super(); this.b = 2; } m() { return super.n(); } } let b = new B(); b === b.m();
并且規(guī)定
在子類普通方法中通過(guò)super調(diào)用父類的方法時(shí),方法內(nèi)部的this指向當(dāng)前的子類實(shí)例。
所以上面return this 就是返回子類實(shí)例對(duì)象
super作為對(duì)象對(duì)屬性賦值時(shí)
super相當(dāng)于this,賦值屬性也就成了子類實(shí)例的屬性
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 console.log(super.valueOf() instanceof B); //true } } let b = new B();
super作為對(duì)象,在靜態(tài)方法中指向的是父類能調(diào)用父類的靜態(tài)方法,如果方法內(nèi)部有this則指向當(dāng)前的子類
只有類才能調(diào)用類的靜態(tài)方法
class A { constructor() { this.a = 1; } static n() { return this; } } class B extends A { constructor() { super(); this.b = 2; } static m() { return super.n(); } } console.log(A.n() === A) // true console.log(B === B.m()); //true
由于對(duì)象總是繼承其他對(duì)象的,所以可以在任意一個(gè)對(duì)象中,使用super關(guān)鍵字。
var obj = { toString() { return "MyObject: " + super.toString(); } }; Object.getPrototypeOf(obj).toString = function () { return "這里super等于obj.__proto__"; } console.log(obj.toString()); //MyObject: 這里super等于obj.__proto__類的prototype與__proto__
(1)子類的__proto__屬性,表示構(gòu)造函數(shù)的繼承,總是指向父類。
(2)子類prototype屬性的__proto__屬性,表示方法的繼承,總是指向父類的prototype屬性。
類的繼承模式
class A { } class B { } // B 的實(shí)例繼承 A 的實(shí)例 Object.setPrototypeOf(B.prototype, A.prototype); // B 繼承 A 的靜態(tài)屬性 Object.setPrototypeOf(B, A); const b = new B();
也是因?yàn)檫@種實(shí)現(xiàn)所以類能調(diào)用自己的靜態(tài)方法
es6實(shí)現(xiàn)了原始構(gòu)造函數(shù)的繼承之前Array.apply(this)this并不會(huì)塑造Array里面的內(nèi)部結(jié)構(gòu),所以我們當(dāng)我們用類數(shù)組對(duì)象引用數(shù)組方法時(shí)用null代替了
而es6用類實(shí)現(xiàn)它的繼承,
代碼摘自es6入門(mén)
class MyArray extends Array { constructor(...args) { super(...args); } } var arr = new MyArray(); arr[0] = 12; arr.length // 1 arr.length = 0; arr[0] // undefined
需要注意的是
ES6 改變了Object構(gòu)造函數(shù)的行為,一旦發(fā)現(xiàn)Object方法不是通過(guò)new Object()這種形式調(diào)用,ES6 規(guī)定Object構(gòu)造函數(shù)會(huì)忽略參數(shù)。
class NewObj extends Object{ constructor(){ super(...arguments); } } var o = new NewObj({attr: true}); o.attr === true // false
傳入?yún)?shù)會(huì)無(wú)效的
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/98679.html
摘要:類基本概念,記錄以便自己后面加深理解了解類是什么是什么不妨寫(xiě)一個(gè)看看的原型可以看到這三個(gè)屬性都是不可遍歷的并且與類相比就多了一個(gè)原型鏈。和靜態(tài)方法中是一樣的得是哪個(gè)類就返回哪個(gè)類本類不能實(shí)例化報(bào)錯(cuò)正確 類class 基本概念,記錄以便自己后面加深理解 了解類是什么 class是什么?不妨寫(xiě)一個(gè)看看 class Demo { constructor() { thi...
摘要:變量的解構(gòu)賦值更加便利的從匿名對(duì)象或者數(shù)組中,對(duì)變量進(jìn)行賦值數(shù)組的解構(gòu)賦值基本樣式,右邊數(shù)據(jù)類型必須是可迭代的類型。 變量的解構(gòu)賦值 更加便利的從匿名對(duì)象或者數(shù)組中,對(duì)變量進(jìn)行賦值; 數(shù)組的解構(gòu)賦值 基本樣式,右邊數(shù)據(jù)類型必須是可迭代的類型。 let a = 1, b = 2, c = 3; //等價(jià)于 //let [a, b, c] = [1, 2, 3]; 對(duì)...
摘要:也就是說(shuō),遍歷器對(duì)象本質(zhì)上,就是一個(gè)指針對(duì)象。執(zhí)行這個(gè)函數(shù),就會(huì)返回一個(gè)遍歷器。一個(gè)對(duì)象如果要有可被循環(huán)調(diào)用的接口,就必須在的屬性上部署遍歷器生成方法原型鏈上的對(duì)象具有該方法也可。后面跟的是一個(gè)可遍歷的結(jié)構(gòu),它會(huì)調(diào)用該結(jié)構(gòu)的遍歷器接口。 ES6 Iterator筆記(摘抄至阮一峰的ECMAScript 6入門(mén)) Iterator的遍歷過(guò)程 創(chuàng)建一個(gè)指針對(duì)象,指向當(dāng)前數(shù)據(jù)結(jié)構(gòu)的起始位...
摘要:字符串?dāng)U展相關(guān)補(bǔ)充引入來(lái)表示碼點(diǎn),之前只能表示引入能正確讀取大于的編碼引入用于讀取大于的字符的編碼例如 字符串?dāng)U展 Unicode相關(guān)補(bǔ)充 引入u{xx}來(lái)表示碼點(diǎn),之前只能表示u0000-uffff引入String.fromCodePoint()能正確讀取大于uFFFF的unicode編碼引入s.codePiointAt()用于讀取大于0xFFFF的字符的unicode編碼例如let...
摘要:阮一峰老師開(kāi)源作品。書(shū)上的示例代碼可以通過(guò)在線網(wǎng)站代碼調(diào)試工具調(diào)試。 阮一峰老師開(kāi)源作品。 書(shū)上的示例代碼可以通過(guò) 在線網(wǎng)站代碼調(diào)試工具 JS Bin 調(diào)試。 作用域 作用域鏈 每個(gè)變量或函數(shù)通過(guò)執(zhí)行環(huán)境 (execution context) 定義了其有權(quán)訪問(wèn)的其他數(shù)據(jù),決定了他們各自的行為; 全局執(zhí)行環(huán)境是最頂層的執(zhí)行環(huán)境,根據(jù)宿主環(huán)境的不同,表示全局執(zhí)行環(huán)境的對(duì)象也不同:在瀏覽...
閱讀 2361·2023-04-25 19:27
閱讀 3491·2021-11-24 09:39
閱讀 3906·2021-10-08 10:17
閱讀 3397·2019-08-30 13:48
閱讀 1930·2019-08-29 12:26
閱讀 3121·2019-08-28 17:52
閱讀 3537·2019-08-26 14:01
閱讀 3534·2019-08-26 12:19