JavaScript的繼承

看風景就發表於2015-11-29
JavaScript繼承

1.借用建構函式繼承 call,apply（繼承例項屬性）

function Parent(sName,nAge){
    this.sName = sName;
    this.nAge = nAge;
}

function Child(sName,nAge,sSex){
    //Parent.call(this,sName,nAge);
    Parent.apply(this,[sName,nAge]);
    this.sSex = sSex;
}

2.原型繼承

利用空函式做中介(YUI做法)

//ES3
function fExtend(Child,Parent){
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}   
//ES5
Object.create(new Parent(),{props}) //簡單，多new了一個parent物件
//避免new物件
function Child(){
    Parent.call(this);//例項繼承
}
Child.prototype = Object.create(Parent.prototype);//object create只進行原型繼承

3.拷貝繼承

深拷貝繼承(jquery做法)

function fDeepCopy(dest,src){
    var dest = dest || {},
        toString = Object.prototype.toString;
    for(var p in src){
        if(toString.call(p) === '[object Object]'){
            dest[p] = {};
            fDeepCopy(p,dest[p]);
        }
        else if(toString.call(p) === '[object Array]'){
            dest[p] = [];
            fDeepCopy(p,dest[p]);
        }
        else{
            dest[p] = src[p];
        }
    }
}

fDeepCopy(Child,Parent);//例項屬性拷貝
fDeepCopy(Child.prototype,Parent.prototype);//原型屬性拷貝

4. class繼承(ES6)

class Animal {
    constructor(){
        this.type = 'animal';
    }
    says(text){
        console.log(this.type + ' says ' + say)
    }
}

class Cat extends Animal{
    constructor(){
        super();
        this.type = 'cat';
    }
}

const cat = new Cat();
cat.says('hello');//cat says hello

 總結：一般完整的繼承要由借用繼承和原型繼承來組合完成，借用繼承負責例項屬性，包括引用型別的屬性，原型繼承一般負責原型上的方法繼承，原型屬性為引用型別的話，會被共用。ES6的話，直接用class繼承即可。

相關文章