JavaScript中原型鏈存在的問題解析
我們知道使用原型鏈實(shí)現(xiàn)繼承是一個(gè)goodway:)看個(gè)原型鏈繼承的例子。
function A () { this.abc = 44; } A.prototype.getAbc = function (){ return this.abc; }; function B() { } B.prototype = new A(); // B通過A的實(shí)例完成了繼承,形成了原型鏈(B的原型就是A的實(shí)例) var b = new B(); b.getAbc();
關(guān)系如下:b(實(shí)例) ->B.prototype = new A() -> A.prototype ->Object.prototype
可是在這種看似“漂亮”的繼承方法中確存在問題。
1. 最主要的問題來自包含引用類型值的原型,我們知道共享原型是存在問題的,拋出一個(gè)例子
function Person () { } Person.prototype = { friends = ["a","b"]; } var person1 = new Person(); var person2 = new Person(); person1.friends.push("c"); console.log(person1.friends); // "a","b","c" console.log(person2.friends); //"a","b","c"
通過引用實(shí)例改變了原型中本來中的值,同時(shí)也影響了其他實(shí)例。(這就是為什么引用類型值要定義在構(gòu)造函數(shù)中而非原型中的原因)
在原型鏈中同樣也會(huì)有同樣的情況出現(xiàn):
function A () { this.numbers = [1,2,3]; } function B() { } B.prototype = new A(); var b = new B(); var a = new A(); b.numbers.push(4); b.numbers; //1234 var b2 = new B(); b2.numbers; //1234 a.numbers; //123
我們看到出現(xiàn)了和上面一樣的情況(在通過原型來繼承時(shí),原型實(shí)際上會(huì)變成另一個(gè)類型的實(shí)例。于是原先的實(shí)例屬性也就順理成章的變成了現(xiàn)在原型屬性了)。
可是我們看到A的實(shí)例a.numbers;依然是123,說明在B繼承A的實(shí)例時(shí)是復(fù)制了A實(shí)例中的所有屬性(包括prototype指針,形成原型鏈)并非引用(其實(shí)這里有疑問,是因?yàn)槔^承的是A()的實(shí)例所以才不會(huì)影響A()創(chuàng)建其他實(shí)例的表現(xiàn)嗎?)。
2.在創(chuàng)建子類實(shí)例時(shí),不可以在不影響所有對(duì)象實(shí)例的情況下給超類傳遞參數(shù)。
function A (light) { this.light1 = light; }; function B (light) { this.light = light; }; //給B賦值的同時(shí),想給A賦值,無法實(shí)現(xiàn) B.prototype = new A(); var C = new B(123); console.log(C.light); console.log(C.light1);
想實(shí)現(xiàn)這個(gè)需要手動(dòng)調(diào)用A的構(gòu)造函數(shù),會(huì)影響其他實(shí)例
function A (light) { this.light1 = light; }; function B (light) { this.light = light; A.call(this,light);//手動(dòng)調(diào)用A的構(gòu)造方法 }; //給B賦值的同時(shí),給A賦值 B.prototype = new A(); var C = new B(123); console.log(C.light); console.log(C.light1);
以上所述是小編給大家介紹的JavaScript中原型鏈存在的問題解析,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
基于JavaScript實(shí)現(xiàn)移動(dòng)端點(diǎn)擊圖片查看大圖點(diǎn)擊大圖隱藏
最近接了個(gè)項(xiàng)目,項(xiàng)目需求是這樣的,當(dāng)點(diǎn)擊圖片查看圖片,再次點(diǎn)擊大圖被隱藏,在移動(dòng)端用的比較多,因?yàn)橐苿?dòng)端屏幕小,需要查看大圖。具體代碼實(shí)現(xiàn)過程本文給大家介紹,需要的朋友可以參考下2015-11-11ES6 Object方法擴(kuò)展的應(yīng)用實(shí)例分析
這篇文章主要介紹了ES6 Object方法擴(kuò)展的應(yīng)用,結(jié)合實(shí)例形式總結(jié)分析了ES6針對(duì)對(duì)象方法的擴(kuò)展與優(yōu)化,需要的朋友可以參考下2019-06-06原生js實(shí)現(xiàn)ajax請(qǐng)求和JSONP跨域請(qǐng)求操作示例
這篇文章主要介紹了原生js實(shí)現(xiàn)ajax請(qǐng)求和JSONP跨域請(qǐng)求操作,結(jié)合實(shí)例形式分析了基于原生js實(shí)現(xiàn)的ajax請(qǐng)求和JSONP跨域請(qǐng)求相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-03-03jsp+javascript打造級(jí)連菜單的實(shí)例代碼
jsp+javascript打造級(jí)連菜單的實(shí)例代碼,需要的朋友可以參考一下2013-06-06JavaScript實(shí)現(xiàn)簡(jiǎn)單計(jì)算器小程序
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單計(jì)算器小程序,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01超全面的JavaScript開發(fā)規(guī)范(推薦)
作為一名開發(fā)人員(WEB前端JavaScript開發(fā)),不規(guī)范的開發(fā)不僅使日后代碼維護(hù)變的困難,同時(shí)也不利于團(tuán)隊(duì)的合作,通常還會(huì)帶來代碼安全以及執(zhí)行效率上的問題。本文就主要介紹了關(guān)于Javascript的命名規(guī)范、注釋規(guī)范以及框架開發(fā)的一些問題,需要的朋友可以參考學(xué)習(xí)。2017-01-01