JavaScript面向?qū)ο缶幊?繼承（四）

MartinHan 發(fā)布于2019-08-26 12:20 / 3158人閱讀

摘要：一些面向?qū)ο笳Z言中支持多繼承，在也能實(shí)現(xiàn)多繼承，但是有一些局限，因?yàn)樵谥欣^承是依賴原型鏈實(shí)現(xiàn)的，只有一條原型鏈，所以理論上是不能繼承多個(gè)父類的。從第一個(gè)參數(shù)起為被繼承的對(duì)象獲取參數(shù)長度緩存參數(shù)對(duì)象緩存當(dāng)前對(duì)象遍歷被繼承對(duì)象中的屬性

一些面向?qū)ο笳Z言中支持多繼承，在JavaScript也能實(shí)現(xiàn)多繼承，但是有一些局限，因?yàn)樵贘avaScript中繼承是依賴原型prototype鏈實(shí)現(xiàn)的，只有一條原型鏈，所以理論上是不能繼承多個(gè)父類的。但是JavaScript很靈活，通過一些技巧方法可以繼承多個(gè)對(duì)象的屬性來實(shí)現(xiàn)類似的多繼承。

單繼承

繼承單對(duì)象的extend方法：

//單繼承  屬性復(fù)制
var extend = function (target,source) {
    //遍歷源對(duì)象中的屬性
    for(var property in source){
        //將源對(duì)象中的屬性復(fù)制到目標(biāo)對(duì)象中
        target[property] = source[property];
    }
    //返回目標(biāo)對(duì)象
    return target;
};

單繼承的測試代碼

//測試代碼
var book ={
    name:"javascript",
    alike:["css","html5","js"]
}
var anotherBook = {
    color :"blue"
}
extend(anotherBook,book);
console.log(anotherBook.name);//javascript
console.log(anotherBook.alike);//[ "css", "html5", "js" ]
anotherBook.alike.push("ajax");
anotherBook.name = "設(shè)計(jì)模式";
console.log(anotherBook.name);//設(shè)計(jì)模式
console.log(anotherBook.alike);//[ "css", "html5", "js", "ajax" ]
console.log(book.name);//javascript
console.log(book.alike);//[ "css", "html5", "js", "ajax" ]

上面的方法可以實(shí)現(xiàn)對(duì)一個(gè)對(duì)象屬性的復(fù)制繼承，當(dāng)傳遞多個(gè)對(duì)象時(shí)，即可實(shí)現(xiàn)多繼承。

多繼承

//多繼承  屬性復(fù)制
var mix = function () {
    var i =1,//從第二個(gè)參數(shù)起為被繼承的對(duì)象
        len =arguments.length,//獲取參數(shù)長度
        target = arguments[0], //第一個(gè)對(duì)象為目標(biāo)對(duì)象
        arg;//緩存參數(shù)對(duì)象
    for(;i
mix方法的作用是將傳入的多個(gè)對(duì)象的屬性復(fù)制到源對(duì)象中，這樣即可實(shí)現(xiàn)對(duì)多個(gè)對(duì)象的屬性的繼承。另外當(dāng)使用的時(shí)候需要傳入目標(biāo)對(duì)象（第一個(gè)參數(shù)-需要繼承的對(duì)象）時(shí)，可以將它綁定到原生對(duì)象Object上，這樣所有的對(duì)象都可以擁有這個(gè)方法。這樣就可以在對(duì)象上直接調(diào)用。
Object.property.mix = function () {
    var i=0,//從第一個(gè)參數(shù)起為被繼承的對(duì)象
        len =arguments.length,//獲取參數(shù)長度
        arg;//緩存參數(shù)對(duì)象
    for(;i