淺談原型式繼承、藉助構造函數、組合方式繼承

原型式繼承

原型式繼承,就是必定一個函數,該函數中建立一個臨時性的構造函數,將做爲參數,傳入的對象做爲這個構造函數的原型,最後返回這個構造函數的實例對象前端

/*定義函數:用於實現對象之間的繼承
    參數:
    obj:表示繼承關係中的父級對象
    prop:對象格式,表示繼承關係中的子級對象的屬性和方法
*/
function fn(obj,porp){
    //定義一個臨時的構造函數
    function Fun(){
       //遍歷對象的屬性和方法
       for(var attrName in porp){
           this[attrName]=porp[attrName];
       }
    }
    //將函數的參數做爲構造函數的原型
    Fun.prototype=obj;
    //將構造函數建立的對象進行返回
    return new Fun();
}
var obj={
    name:'前端'
}
//調用函數
var result=fn(obj,{
    age:20,
    sayMe:function(){
        console.log('this is function');
    }
});
console.log(result.age);
result.sayMe();

利用Object.create()方法實現繼承app

var obj={
    name:'前端'
}
var newObj=object.create(obj,{
    age:{
        value:20
    },
    sayMe:{
        value:function(){
            console.log('this is function');
        }
    }
});
console.log(newObj.age);
newObj.sayMe();

藉助構造函數

不管是原型鏈仍是原型式繼承,都具備相同的問題。想要解決這樣的問題的話,能夠藉助構造函數(也能夠叫作僞造對象或經典繼承)。
這種方式實現很是簡單,就是在子對象的構造函數中調用父對象的構造函數。具體能夠經過調用apply()和call()方法實現。
apply()和call()方法都容許傳遞指定某個對象的this。對於繼承來說,能夠實如今子對象的構造函數中調用父對象的構造函數時,將子對象的this和父對象的this綁定在一塊兒函數

//定義父級對象的構造函數
function Parent(){
    this.parent='parent';
}

//定義子級對象的構造函數
function child(){
    //調用父級對象的構造函數:使用apply()或call()方法
    Parent.call(this);
    
    this.child='child';
}
//建立子級對象
var child=new Child();
console.log(child);

組合方式繼承

組合繼承,也叫作僞經典繼承,指的是將原型鏈或原型式繼承和藉助構造函數的技術組合在一塊兒,發揮兩者長處的一種繼承方式
具體實現的思路就是:this

  • 使用原型鏈或原型式繼承實現對原型的屬性和方法的繼承。
  • 經過藉助構造函數實現對實例對象的屬性的繼承

這樣,既經過在原型上定義方法實現了函數的重用,又能夠保證每一個對象都有本身的專有屬性prototype

function Parent(){
    //構造函數的自有屬性
    this.name='前端';
}
//構造函數的原型屬性
Parent.prototype.age=20;

function Child(){
    //繼承父級構造函數中的自有屬性
    Parent.call(this);
    
    this.job='IT';
}
//繼承父級構造函數中的原型屬性
Child.prototype=Parent.prototype;

var child=new Child();

console.log(child.job);
console.log(child.age);
console.log(child.name);
相關文章
相關標籤/搜索