摘要:優(yōu)點(diǎn)融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點(diǎn),是中最常用的繼承模式。缺點(diǎn)跟借用構(gòu)造函數(shù)模式一樣,每次創(chuàng)建對(duì)象都會(huì)創(chuàng)建一遍方法。寄生組合式繼承為了方便大家閱讀,在這里重復(fù)一下組合繼承的代碼組合繼承最大的缺點(diǎn)是會(huì)調(diào)用兩次父構(gòu)造函數(shù)。
1.原型鏈繼承
子類(lèi).prototype = 父類(lèi)的實(shí)例
function Parent () { this.name = "kevin"; } Parent.prototype.getName = f unction () { console.log(this.name); } function Child () { } Child.prototype = new Parent(); var child1 = new Child(); console.log(child1.getName()) // kevin
問(wèn)題:
1.父類(lèi)引用類(lèi)型的實(shí)例屬性被所有子類(lèi)實(shí)例共享
父類(lèi)的實(shí)例屬性,原型繼承后成了子類(lèi)的prototype的原型屬性
function Parent () { this.names = ["kevin", "daisy"]; } function Child () { } Child.prototype = new Parent(); var child1 = new Child(); child1.names.push("yayu"); console.log(child1.names); // ["kevin", "daisy", "yayu"] var child2 = new Child(); console.log(child2.names); // ["kevin", "daisy", "yayu"]
2.在創(chuàng)建 Child 的實(shí)例時(shí),不能向Parent傳參
2.借用構(gòu)造函數(shù)(經(jīng)典繼承)
function Parent () { this.names = ["kevin", "daisy"]; } function Child () { Parent.call(this); } var child1 = new Child(); child1.names.push("yayu"); console.log(child1.names); // ["kevin", "daisy", "yayu"] var child2 = new Child(); console.log(child2.names); // ["kevin", "daisy"]
優(yōu)點(diǎn):
1.避免了引用類(lèi)型的屬性被所有實(shí)例共享
2.可以在 Child 中向 Parent 傳參
舉個(gè)例子:
function Parent (name) { this.name = name; } function Child (name) { Parent.call(this, name); } var child1 = new Child("kevin"); console.log(child1.name); // kevin var child2 = new Child("daisy"); console.log(child2.name); // daisy
缺點(diǎn):
方法都在構(gòu)造函數(shù)中定義,每次創(chuàng)建實(shí)例都會(huì)創(chuàng)建一遍方法。同對(duì)象創(chuàng)建
3.組合繼承
原型鏈繼承和經(jīng)典繼承雙劍合璧。
function Parent (name) { this.name = name; this.colors = ["red", "blue", "green"]; } Parent.prototype.getName = function () { console.log(this.name) } function Child (name, age) { Parent.call(this, name); this.age = age; } Child.prototype = new Parent(); var child1 = new Child("kevin", "18"); child1.colors.push("black"); console.log(child1.name); // kevin console.log(child1.age); // 18 console.log(child1.colors); // ["red", "blue", "green", "black"] var child2 = new Child("daisy", "20"); console.log(child2.name); // daisy console.log(child2.age); // 20 console.log(child2.colors); // ["red", "blue", "green"]
優(yōu)點(diǎn):融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點(diǎn),是 JavaScript 中最常用的繼承模式。
相當(dāng)于合并了實(shí)例屬性,而不是把超類(lèi)型的實(shí)例屬性當(dāng)成了原型屬性
4.原型式繼承
function createObj(o) { function F(){} F.prototype = o; return new F(); }
就是 ES5 Object.create 的模擬實(shí)現(xiàn),將傳入的對(duì)象作為創(chuàng)建的對(duì)象的原型。
缺點(diǎn):
包含引用類(lèi)型的屬性值始終都會(huì)共享相應(yīng)的值,這點(diǎn)跟原型鏈繼承一樣。
var person = { name: "kevin", friends: ["daisy", "kelly"] } var person1 = createObj(person); var person2 = createObj(person); person1.name = "person1"; console.log(person2.name); // kevin person1.firends.push("taylor"); console.log(person2.friends); // ["daisy", "kelly", "taylor"]
注意:修改person1.name的值,person2.name的值并未發(fā)生改變,并不是因?yàn)閜erson1和person2有獨(dú)立的 name 值,而是因?yàn)閜erson1.name = "person1",給person1添加了 name 值,并非修改了原型上的 name 值。
5. 寄生式繼承
創(chuàng)建一個(gè)僅用于封裝繼承過(guò)程的函數(shù),該函數(shù)在內(nèi)部以某種形式來(lái)做增強(qiáng)對(duì)象,最后返回對(duì)象。
function createObj (o) { var clone = object.create(o); clone.sayName = function () { console.log("hi"); } return clone; }
缺點(diǎn):跟借用構(gòu)造函數(shù)模式一樣,每次創(chuàng)建對(duì)象都會(huì)創(chuàng)建一遍方法。
寄生組合式繼承
為了方便大家閱讀,在這里重復(fù)一下組合繼承的代碼:
function Parent (name) { this.name = name; this.colors = ["red", "blue", "green"]; } Parent.prototype.getName = function () { console.log(this.name) } function Child (name, age) { Parent.call(this, name); this.age = age; } Child.prototype = new Parent(); var child1 = new Child("kevin", "18"); console.log(child1)
組合繼承最大的缺點(diǎn)是會(huì)調(diào)用兩次父構(gòu)造函數(shù)。
一次是設(shè)置子類(lèi)型實(shí)例的原型的時(shí)候:
Child.prototype = new Parent();
一次在創(chuàng)建子類(lèi)型實(shí)例的時(shí)候:
var child1 = new Child("kevin", "18");
回想下 new 的模擬實(shí)現(xiàn),其實(shí)在這句中,我們會(huì)執(zhí)行:
Parent.call(this, name);
在這里,我們又會(huì)調(diào)用了一次 Parent 構(gòu)造函數(shù)。
所以,在這個(gè)例子中,如果我們打印 child1 對(duì)象,我們會(huì)發(fā)現(xiàn) Child.prototype 和 child1 都有一個(gè)屬性為colors,屬性值為["red", "blue", "green"]。
那么我們?cè)撊绾尉媲缶苊膺@一次重復(fù)調(diào)用呢?
如果我們不使用 Child.prototype = new Parent() ,而是間接的讓 Child.prototype 訪問(wèn)到 Parent.prototype 呢?
看看如何實(shí)現(xiàn):
function Parent (name) { this.name = name; this.colors = ["red", "blue", "green"]; } Parent.prototype.getName = function () { console.log(this.name) } function Child (name, age) { Parent.call(this, name); this.age = age; } // 關(guān)鍵的三步 var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); var child1 = new Child("kevin", "18"); 最后我們封裝一下這個(gè)繼承方法: function object(o) { function F() {} F.prototype = o; return new F(); } function prototype(child, parent) { var prototype = object(parent.prototype); prototype.constructor = child; child.prototype = prototype; } // 當(dāng)我們使用的時(shí)候: prototype(Child, Parent);
引用《JavaScript高級(jí)程序設(shè)計(jì)》中對(duì)寄生組合式繼承的夸贊就是:
這種方式的高效率體現(xiàn)它只調(diào)用了一次 Parent 構(gòu)造函數(shù),并且因此避免了在 Parent.prototype 上面創(chuàng)建不必要的、多余的屬性。與此同時(shí),原型鏈還能保持不變;因此,還能夠正常使用 instanceof 和 isPrototypeOf。開(kāi)發(fā)人員普遍認(rèn)為寄生組合式繼承是引用類(lèi)型最理想的繼承范式。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/98245.html
摘要:深入系列第十五篇,講解各種繼承方式和優(yōu)缺點(diǎn)。優(yōu)點(diǎn)融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點(diǎn),是中最常用的繼承模式。寄生組合式繼承為了方便大家閱讀,在這里重復(fù)一下組合繼承的代碼組合繼承最大的缺點(diǎn)是會(huì)調(diào)用兩次父構(gòu)造函數(shù)。 JavaScript深入系列第十五篇,講解JavaScript各種繼承方式和優(yōu)缺點(diǎn)。 寫(xiě)在前面 本文講解JavaScript各種繼承方式和優(yōu)缺點(diǎn)。 但是注意: 這篇文章更像是筆記,哎...
摘要:深入系列第十二篇,通過(guò)的模擬實(shí)現(xiàn),帶大家揭開(kāi)使用獲得構(gòu)造函數(shù)實(shí)例的真相一句話介紹運(yùn)算符創(chuàng)建一個(gè)用戶(hù)定義的對(duì)象類(lèi)型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對(duì)象類(lèi)型之一也許有點(diǎn)難懂,我們?cè)谀M之前,先看看實(shí)現(xiàn)了哪些功能。 JavaScript深入系列第十二篇,通過(guò)new的模擬實(shí)現(xiàn),帶大家揭開(kāi)使用new獲得構(gòu)造函數(shù)實(shí)例的真相 new 一句話介紹 new: new 運(yùn)算符創(chuàng)建一個(gè)用戶(hù)定義的對(duì)象類(lèi)型的實(shí)例或具...
摘要:繼承繼承子類(lèi)可以使用父類(lèi)的所有功能,并且對(duì)這些功能進(jìn)行擴(kuò)展。類(lèi)繼承父類(lèi)父類(lèi)添加共有方法子類(lèi)繼承父類(lèi)子類(lèi)添加共有方法其中最核心的一句代碼是將原型指向了父類(lèi)的原型對(duì)象。 繼承 繼承:子類(lèi)可以使用父類(lèi)的所有功能,并且對(duì)這些功能進(jìn)行擴(kuò)展。繼承的過(guò)程,就是從一般到特殊的過(guò)程。 類(lèi)繼承 // 父類(lèi) var supperClass = function() { var id = 1; thi...
摘要:深入系列的第一篇,從原型與原型鏈開(kāi)始講起,如果你想知道構(gòu)造函數(shù)的實(shí)例的原型,原型的原型,原型的原型的原型是什么,就來(lái)看看這篇文章吧。讓我們用一張圖表示構(gòu)造函數(shù)和實(shí)例原型之間的關(guān)系在這張圖中我們用表示實(shí)例原型。 JavaScript深入系列的第一篇,從原型與原型鏈開(kāi)始講起,如果你想知道構(gòu)造函數(shù)的實(shí)例的原型,原型的原型,原型的原型的原型是什么,就來(lái)看看這篇文章吧。 構(gòu)造函數(shù)創(chuàng)建對(duì)象 我們先...
摘要:前言本章我們要講解的是五大原則語(yǔ)言實(shí)現(xiàn)的第篇,里氏替換原則。因此,違反了里氏替換原則。與行為有關(guān),而不是繼承到現(xiàn)在,我們討論了和繼承上下文在內(nèi)的里氏替換原則,指示出的面向?qū)ο蟆? 前言 本章我們要講解的是S.O.L.I.D五大原則JavaScript語(yǔ)言實(shí)現(xiàn)的第3篇,里氏替換原則LSP(The Liskov Substitution Principle )。英文原文:http://fre...
摘要:寫(xiě)在前面深入系列共計(jì)篇已經(jīng)正式完結(jié),這是一個(gè)旨在幫助大家,其實(shí)也是幫助自己捋順底層知識(shí)的系列。深入系列自月日發(fā)布第一篇文章,到月日發(fā)布最后一篇,感謝各位朋友的收藏點(diǎn)贊,鼓勵(lì)指正。 寫(xiě)在前面 JavaScript 深入系列共計(jì) 15 篇已經(jīng)正式完結(jié),這是一個(gè)旨在幫助大家,其實(shí)也是幫助自己捋順 JavaScript 底層知識(shí)的系列。重點(diǎn)講解了如原型、作用域、執(zhí)行上下文、變量對(duì)象、this、...
閱讀 2750·2021-11-25 09:43
閱讀 2111·2021-11-18 13:25
閱讀 4574·2021-09-22 15:52
閱讀 1870·2021-09-22 15:49
閱讀 2216·2019-08-30 15:54
閱讀 3011·2019-08-29 17:13
閱讀 2318·2019-08-29 16:54
閱讀 2259·2019-08-29 12:58