您好,登錄后才能下訂單哦!
寫在前面
本文講解JavaScript各種繼承方式和優(yōu)缺點(diǎn)。
注意:
跟《JavaScript深入之創(chuàng)建對(duì)象》一樣,更像是筆記。
哎,再讓我感嘆一句:《JavaScript高級(jí)程序設(shè)計(jì)》寫得真是太好了!
1.原型鏈繼承
function Parent () { this.name = 'kevin'; } Parent.prototype.getName = function () { console.log(this.name); } function Child () { } Child.prototype = new Parent(); var child1 = new Child(); console.log(child1.getName()) // kevin
問題:
1.引用類型的屬性被所有實(shí)例共享,舉個(gè)例子:
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.避免了引用類型的屬性被所有實(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)建一遍方法。
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 中最常用的繼承模式。
4.原型式繼承
function createObj(o) { function F(){} F.prototype = o; return new F(); }
就是 ES5 Object.create 的模擬實(shí)現(xiàn),將傳入的對(duì)象作為創(chuàng)建的對(duì)象的原型。
缺點(diǎn):
包含引用類型的屬性值始終都會(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)?code>person1和person2
有獨(dú)立的 name 值,而是因?yàn)?code>person1.name = 'person1',給person1
添加了 name 值,并非修改了原型上的 name 值。
5. 寄生式繼承
創(chuàng)建一個(gè)僅用于封裝繼承過程的函數(shù),該函數(shù)在內(nè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)建一遍方法。
6. 寄生組合式繼承
為了方便大家閱讀,在這里重復(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è)置子類型實(shí)例的原型的時(shí)候:
Child.prototype = new Parent();
一次在創(chuàng)建子類型實(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']。
那么我們該如何精益求精,避免這一次重復(fù)調(diào)用呢?
如果我們不使用 Child.prototype = new Parent() ,而是間接的讓 Child.prototype 訪問到 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'); console.log(child1);
最后我們封裝一下這個(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。開發(fā)人員普遍認(rèn)為寄生組合式繼承是引用類型最理想的繼承范式。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。