快捷導(dǎo)航

淺析JavaScript原型繼承的陷阱

更新時間：2013年12月03日 09:50:40 作者：

JavaScript和其它面向?qū)ο笳Z言一樣，對象類型采用引用方式。持有對象的變量只是一個地址，而基本類型數(shù)據(jù)是值。當(dāng)原型上存儲對象時，就可能有一些陷阱

JavaScript默認采用原型繼承。雖然沒有類(class)的概念，它的函數(shù)(function)可以充當(dāng)構(gòu)造器(constructor)。構(gòu)造器結(jié)合this，new可以構(gòu)建出類似Java的類。因此，JavaScript通過擴展自身能模擬類式(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點的寫類工具函數(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) 

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

淺析JavaScript原型繼承的陷阱

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具