淺析JavaScript原型繼承的陷阱
更新時間：2013年12月03日 09:50:40 作者：
JavaScript和其它面向?qū)ο笳Z言一樣，對象類型采用引用方式。持有對象的變量只是一個地址，而基本類型數(shù)據(jù)是值。當(dāng)原型上存儲對象時，就可能有一些陷阱
JavaScript默認(rèn)采用原型繼承。雖然沒有類(class)的概念，它的函數(shù)(function)可以充當(dāng)構(gòu)造器(constructor)。構(gòu)造器結(jié)合this，new可以構(gòu)建出類似Java的類。因此，JavaScript通過擴(kuò)展自身能模擬類式(class-based)繼承。
JavaScript和其它面向?qū)ο笳Z言一樣，對象類型采用引用方式。持有對象的變量只是一個地址，而基本類型數(shù)據(jù)是值。當(dāng)原型上存儲對象時，就可能有一些陷阱。
先看第一個例子
復(fù)制代碼 代碼如下:
var create = function() {
function Fn() {}
return function(parent) {
Fn.prototype = parent
return new Fn
}
}()
var parent = {
name: 'jack',
age: 30,
isMarried: false
}
var child = create(parent)
console.log(child)
create工具函數(shù)實現(xiàn)了一個基本的原型繼承，每次調(diào)用create都會根據(jù)parent對象去復(fù)制一個新對象，新對象全部的屬性都來自于parent。這里parent有三個屬性，都是基本數(shù)據(jù)類型：字符串，數(shù)字，布爾。
這時修改child看看會不會影響parent
復(fù)制代碼 代碼如下:
child.name = 'lily'
child.age = 20,
child.isMarried = true
console.log(child)
console.log(parent)
結(jié)果如下
即修改child不會影響到parent。
再看看另外一個例子
復(fù)制代碼 代碼如下:
var create = function() {
function Fn() {}
return function(parent) {
Fn.prototype = parent
return new Fn
}
}()
var parent = {
data: {
name: 'jack',
age: 30,
isMarried: false
},
language: ['Java']
}
var child = create(parent)
child.data.name = 'lily'
child.data.age = 20
child.data.isMarried = true
child.language.push('javascript')
console.dir(child)
console.dir(parent)
注意這里的parent的兩個屬性data，language都是引用類型，一個是對象，一個是數(shù)組。child仍然繼承與parent，隨后修改了child，結(jié)果如下
可以看到，此時parent也被修改了，和child的name，age等都一樣了。這是使用原型繼承時需要注意的。
使用繼承時比較好的方式是：
1，數(shù)據(jù)屬性采用類式繼承（掛在this上），這樣new時也可以通過參數(shù)配置
2，方法采用原型繼承，這樣能節(jié)省內(nèi)存，同時子類重寫方法也不會影響父類
下面是一個滿足以上2點(diǎn)的寫類工具函數(shù)
復(fù)制代碼 代碼如下:
/**
* @param {String} className
* @param {String/Function} superCls
* @param {Function} factory
*/
function $class(name, superClass, factory) {
if (superClass === '') superClass = Object
function clazz() {
if (typeof this.init === 'function') {
this.init.apply(this, arguments)
}
}
var p = clazz.prototype = new superCls
clazz.prototype.constructor = clazz
clazz.prototype.className = className
var supr = superCls.prototype
window[className] = clazz
factory.call(p, supr)
}
對象類型放在父類原型上時務(wù)必小心子類修改其，這時繼承于該父類的所有子類的實例都將被修改。而這造成的bug很不容易發(fā)現(xiàn)。
ES5中加入了一個新API用來實現(xiàn)原型繼承：Object.create?？梢杂盟娲厦孀詫崿F(xiàn)的create函數(shù)，如下
復(fù)制代碼 代碼如下:
var parent = {
name: 'jack',
age: 30,
isMarried: false
}
var child = Object.create(parent)
console.log(child)
相關(guān)文章
這篇文章主要介紹了js控制網(wǎng)頁前進(jìn)和后退的方法,涉及javascript中history.go方法的相關(guān)使用技巧,非常簡單實用,需要的朋友可以參考下2015-06-06
jQuery Mobile動態(tài)刷新頁面樣式的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query Mobile動態(tài)刷新頁面樣式的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了獲取XMLHttpRequest對象的三種方式,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細(xì)介紹了JS、CSS和HTML實現(xiàn)注冊頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了JS簡單獲取日期相差天數(shù)的方法,涉及javascript日期時間的轉(zhuǎn)換與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
使用SpreadJS快速清除Excel中工作表保護(hù)密碼
這篇文章主要為大家介紹了使用SpreadJS快速清除Excel中工作表保護(hù)密碼方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要介紹了自制微信公眾號一鍵排版工具的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要為大家詳細(xì)介紹了純js+css實現(xiàn)在線時鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
在做3D項目時，我們經(jīng)常需要模擬下雨，下雪的天氣，有時也會模擬噴泉、著火等效果。這些效果需要使用名為粒子系統(tǒng)(particle)的技術(shù)來實現(xiàn)。使用ThingJS可以快速編寫粒子效果，本文就來看看如何實現(xiàn)2021-05-05
這篇文章主要介紹了鼠標(biāo)懸浮停留三秒后顯示大圖，在網(wǎng)頁中還是比較實用的，下面是示例代碼2014-09-09