JavaScript面向?qū)ο缶幊獭^承

desdik 發(fā)布于2019-08-26 12:16 / 634人閱讀

摘要：想要解決這樣的問題的話，可以借助構(gòu)造函數(shù)也可以叫做偽造對象或經(jīng)典繼承。通過借助構(gòu)造函數(shù)實現(xiàn)對實例對象的屬性和繼承。

原型鏈 原型鏈是什么

構(gòu)造函數(shù)或構(gòu)造器具有prototype屬性對象具有__proto__屬性這就是之前學習的原型
如果構(gòu)造函數(shù)或?qū)ο驛 A的原型指向構(gòu)造函數(shù)或?qū)ο驜 B的原型在指向構(gòu)造函數(shù)或?qū)ο驝以此類推最終的構(gòu)造函數(shù)或?qū)ο蟮脑椭赶騉bject的原型由此形成一條鏈狀結(jié)構(gòu) 被稱之為原型鏈
按照上述的描述在B中定義的屬性或方法可以直接在A中使用并不需要定義這就是繼承它允許每個對象來訪問其原型鏈上的任何屬性或方法。
原型鏈是ECMAScript標準中指定的默認實現(xiàn)繼承方式。

// 原型鏈
function A(){
    this.a = "a";
}
// 通過構(gòu)造函數(shù)創(chuàng)建對象
var a = new A();

function B(){
    this.b = "b";
}
// 將B的原型指向?qū)ο骯
B.prototype = a;
// 通過構(gòu)造函數(shù)創(chuàng)建對象
var b = new B();

console.log(b.b);// b
console.log(b.a);// a

function C(){
    this.c = "c";
}
// 將C的原型指向?qū)ο骲
C.prototype = b;
// 通過構(gòu)造函數(shù)創(chuàng)建對象
var c = new C();

console.log(c.c);// c
console.log(c.b);// b
console.log(c.a);// a

只繼承于原型

處于對效率的考慮，盡量的將屬性和方法添加到原型上。
1.不要為繼承關(guān)系多帶帶創(chuàng)建對象。
2.盡量減少運行時的方法搜索。

// 原型鏈
function A(){
    // 將自有屬性改寫為原型屬性
    // this.a = "a";
}
A.prototype.a = "a";

function B(){
    // this.b = "b";
}

// 將B的原型指向
B.prototype = A.prototype;

B.prototype.b = "b";
/*B.prototype = {
    b : "b"
}*/

function C(){
    this.c = "c";
}
// 將C的原型指向
C.prototype = B.prototype;

var c = new C();
console.log(c.c);// c
console.log(c.b);
console.log(c.a);// a

原型鏈的問題

原型鏈雖然很強大，用他可以實現(xiàn)JavaScript中的繼承，但同時也存在著一些問題。
1.原型鏈實際上實在多個構(gòu)造函數(shù)或?qū)ο笾g共享屬性和方法。
2.常見子類的對象時，不能向父級的構(gòu)造函數(shù)傳遞任何參數(shù)。
在實際開發(fā)中很少會多帶帶使用原型鏈。

// 原型鏈
function A(){
    // 將自有屬性改寫為原型屬性
    // this.a = "a";
}
A.prototype.a = "a";

function B(){
    // this.b = "b";
}

// 將B的原型指向
B.prototype = A.prototype;

B.prototype.b = "b";

function C(){
    // this.c = "c";
}
// 將C的原型指向
C.prototype = B.prototype;
C.prototype.c = "c";

var c = new C();
console.log(c.c);// c
console.log(c.b);// b
console.log(c.a);// a

var a = new A();

console.log(a.a);
console.log(a.b);
console.log(a.c);

var b = new B();

console.log(b.a);
console.log(b.b);
console.log(b.c);

繼承 原型式繼承

所謂的原型式繼承，就是定義一個函數(shù)，該函數(shù)中創(chuàng)建一個臨時性的構(gòu)造函數(shù)，將作為參數(shù)傳入的對象，作為這個構(gòu)造函數(shù)的原型，左后返回這個構(gòu)造函數(shù)的實例對象。

/*
    定義一個函數(shù) - 用于實現(xiàn)對象之間的繼承
    * 參數(shù)
      * obj - 表示繼承關(guān)系中的父級對象
      * prop - 對象格式，表示繼承關(guān)系中的子級對象的屬性和方法
  */
function fn(obj, porp){
    // 定義一個臨時的構(gòu)造函數(shù)
    function Fun(){
        // 遍歷對象的屬性和方法
        for (var attrName in porp) {
            // var attrValue = porp[attrName];
            this[attrName] = porp[attrName];
        }
    }
    // 將函數(shù)的參數(shù)作為構(gòu)造函數(shù)的原型
    Fun.prototype = obj;
    // 將構(gòu)造函數(shù)創(chuàng)建的對象進行返回
    return new Fun();
}
var obj = {
    name : "張無忌"
}
// 調(diào)用函數(shù)
var result = fn(obj, {
    age : 18,
    sayMe : function(){
        console.log("this is function");
    }
});
console.log(result.age);
result.sayMe();

注意；原型式繼承具有與原型鏈相同的問題。

借助構(gòu)造函數(shù)

無論是原型鏈還是原型式繼承，都具有相同的問題。想要解決這樣的問題的話，可以借助構(gòu)造函數(shù)（也可以叫做偽造對象或經(jīng)典繼承）。
這種方式實現(xiàn)非常簡單，就是在子對象的構(gòu)造函數(shù)中調(diào)用父對象的構(gòu)造函數(shù)，具體可以通過調(diào)用apply()和call（）方法實現(xiàn)。
apply（）和call（）方法允許傳遞指定某個對形象的 this。對于繼承來說，可以實現(xiàn)子對象構(gòu)造函數(shù)中調(diào)用父對象的構(gòu)造函數(shù)時，將子對象的this和父對象的this綁定在一起。

// 定義父級對象的構(gòu)造函數(shù)
function Parent(){
    this.parent = "parent";
}

// 定義子級對象的構(gòu)造函數(shù)
function Child(){
    // 調(diào)用父級對象的構(gòu)造函數(shù) -> 使用apply()或call()方法
    Parent.call(this);

    this.child = "child";
}
// 創(chuàng)建子級對象
var child = new Child();
console.log(child);

組合方式繼承

組合繼承，也佳作為經(jīng)典繼承，指的是將原型鏈或原型式繼承和借助構(gòu)造.函數(shù)的技術(shù)組合在一起，發(fā)揮二者長處的一種繼承方式。
1.使用原型鏈或原型式繼承實現(xiàn)對原型的屬性和方法的繼承。
2.通過借助構(gòu)造函數(shù)實現(xiàn)對實例對象的屬性和繼承。
這樣既通過在原型定義方法實現(xiàn)了函數(shù)的重用，又保證每個對象都有自己的專有屬性。

function Parent(){
    // 構(gòu)造函數(shù)的自有屬性
    this.name = "張無忌";
}
// 構(gòu)造函數(shù)的原型屬性
Parent.prototype.age = 18;

function Child(){
    // 繼承父級構(gòu)造函數(shù)中的自有屬性
    Parent.call(this);

    this.job = "教主";
}
// 繼承父級構(gòu)造函數(shù)中的原型屬性
Child.prototype = Parent.prototype;

var child = new Child();

console.log(child.job);
console.log(child.age);
console.log(child.name);