淺析JavaScript原型繼承的陷阱
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言一樣，對(duì)象類型采用引用方式。持有對(duì)象的變量只是一個(gè)地址，而基本類型數(shù)據(jù)是值。當(dāng)原型上存儲(chǔ)對(duì)象時(shí)，就可能有一些陷阱。
先看第一個(gè)例子
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ù)實(shí)現(xiàn)了一個(gè)基本的原型繼承，每次調(diào)用create都會(huì)根據(jù)parent對(duì)象去復(fù)制一個(gè)新對(duì)象，新對(duì)象全部的屬性都來自于parent。這里parent有三個(gè)屬性，都是基本數(shù)據(jù)類型：字符串，數(shù)字，布爾。
這時(shí)修改child看看會(huì)不會(huì)影響parent
child.name = 'lily'
child.age = 20,
child.isMarried = true
console.log(child)
console.log(parent)
結(jié)果如下
即修改child不會(huì)影響到parent。
再看看另外一個(gè)例子
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的兩個(gè)屬性data，language都是引用類型，一個(gè)是對(duì)象，一個(gè)是數(shù)組。child仍然繼承與parent，隨后修改了child，結(jié)果如下
可以看到，此時(shí)parent也被修改了，和child的name，age等都一樣了。這是使用原型繼承時(shí)需要注意的。
使用繼承時(shí)比較好的方式是：
1，數(shù)據(jù)屬性采用類式繼承（掛在this上），這樣new時(shí)也可以通過參數(shù)配置
2，方法采用原型繼承，這樣能節(jié)省內(nèi)存，同時(shí)子類重寫方法也不會(huì)影響父類
下面是一個(gè)滿足以上2點(diǎn)的寫類工具函數(shù)
/**
* @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)
}
對(duì)象類型放在父類原型上時(shí)務(wù)必小心子類修改其，這時(shí)繼承于該父類的所有子類的實(shí)例都將被修改。而這造成的bug很不容易發(fā)現(xiàn)。
ES5中加入了一個(gè)新API用來實(shí)現(xiàn)原型繼承：Object.create。可以用它替代上面自實(shí)現(xiàn)的create函數(shù)，如下
var parent = {
name: 'jack',
age: 30,
isMarried: false
}
var child = Object.create(parent)
console.log(child)
相關(guān)文章
有些小伙伴可能會(huì)問caller,callee 是什么?在javascript 中有什么樣的作用?那么本篇會(huì)對(duì)于此做一些基本介紹。希望能夠?qū)Υ蠹依斫鈐avascript中的callee與caller有所幫助。2015-08-08
js實(shí)現(xiàn)精確到秒的倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)精確到秒的倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
在一個(gè)瀏覽器里呈現(xiàn)所有瀏覽器測試結(jié)果的前端測試工具的思路
對(duì)前端工程師來說,跨瀏覽器的兼容性問題一直是最頭疼的,測試一個(gè)小小的東西,就要打開N個(gè)瀏覽器,然后比較來比較去,記錄個(gè)瀏覽器的數(shù)據(jù),比較不同,實(shí)在是麻煩.2010-03-03
使用requirejs模塊化開發(fā)多頁面一個(gè)入口js的使用方式
這篇文章主要介紹了使用requirejs模塊化開發(fā)多頁面一個(gè)入口js的使用方式,需要的朋友可以參考下2017-06-06
如何用js控制frame的隱藏或顯示的解決辦法，需要的朋友可以參考一下2013-03-03
這篇文章主要為大家分享了KnockoutJs快速入門教程，了解KnockoutJs到底是什么？如何使用KnockoutJS中的data-bind語法來將模型數(shù)據(jù)綁定到DOM元素中，感興趣的小伙伴們可以參考一下2016-05-05
返回頁面頂部top按鈕通過錨點(diǎn)實(shí)現(xiàn)(自寫)
用戶在使用系統(tǒng)時(shí)，會(huì)有很多表單的操作然而很多表單就會(huì)很長,所以就需要一個(gè)返回頁面頂部的top按鈕啦，于是自己寫了一個(gè)，喜歡的朋友可以參考下2013-08-08
javascript隨機(jī)抽取0-100之間不重復(fù)的10個(gè)數(shù)
這篇文章主要為大家詳細(xì)介紹了javascript隨機(jī)抽取0-100之間不重復(fù)的10個(gè)數(shù)，分享了兩種簡單辦法，感興趣的小伙伴們可以參考一下2016-02-02
Javascript中類式繼承和原型式繼承的實(shí)現(xiàn)方法和區(qū)別之處
其它的面向?qū)ο蟪绦蛟O(shè)計(jì)語言都是通過關(guān)鍵字來解決繼承的問題。但是javascript中并沒有定義這種實(shí)現(xiàn)的機(jī)制。接下來通過本文給大家介紹Javascript中類式繼承和原型式繼承的實(shí)現(xiàn)方法和區(qū)別,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了JS如何定義用字符串拼接的變量,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07