JavaScript面向對象中的繼承我的分享

繼承

原型鏈

• 所謂言行鏈就是若是構造函數或對象A,A的原型指向構造函數或對象B,B的原型再指向構造函數或對象C,以此類推,最終的構造函數或對象的原鄉指向Object的原型.由此造成一條鏈狀結構,被稱之爲原型鏈

示例代碼:

// 原型鏈
function A(){
    this.a = 'a';
}
// 經過構造函數建立對象
var a = new A();

function B(){
    this.b = 'b';
}
// 將B的原型指向對象a
B.prototype = a;
// 經過構造函數建立對象
var b = new B();

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

function C(){
    this.c = 'c';
}
// 將C的原型指向對象b
C.prototype = b;
// 經過構造函數建立對象
var c = new C();

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

原型鏈代碼分析圖:

---

只繼承於原型

示例代碼:

// 原型鏈
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

---

原型鏈實現繼承的問題

1. 原型鏈其實是在多個構造函數或對象之間共享屬性和方法
2. 常見子類的對象時,不能像父級的構造函數傳遞任何參數

• 注意: 在實際開發中不多會單獨使用原型鏈

示例代碼:

// 原型鏈
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);// 調用結果爲 a
console.log(a.b);// 調用結果爲 b
console.log(a.c);// 調用結果爲 c

var b = new B();

console.log(b.a);// 調用結果爲 a
console.log(b.b);// 調用結果爲 b
console.log(b.c);// 調用結果爲 c

---

原型式繼承

• 語法 : 定義一個函數 - 再將構造函數建立的對象返回,用於實現對象之間的繼承

  • 參數

    • obj - 表示繼承關係中的父級對象
    • prop - 對象格式,表示繼承關係中的子級對象的屬性和方法

示例代碼:

function fn(obj,prop) {
    // 定義一個臨時的構造函數
    function Fun() {
        // 遍歷對象的屬性和方法
        for(var attrName in prop){
            this[attrName] = prop[attrName];
        }
    }
    // 將函數的參數做爲構造函數的原型
    Fun.prototype = obj;
    // 將構造函數建立的對象進行返回
    return new Fun();
}
var obj = {
    name : '皮卡丘'
};
// 調用函數
var result = fn(obj,{
    age : 26,
    sayMe : function () {
        console.log('一花一世界');
    }
});
console.log(result.age);// 調用結果爲 26
result.sayMe();// 調用結果爲 一花一世界

原型式竭誠另外一種方法

示例代碼:

// 利用Object.create()
 var obj ={
    name : '皮卡丘'
 };
var newObj = Object.create(obj,{
    age : {
        value : 18
    },
    sayMe : {
        value : function () {
            console.log('一花一世界');
        }
    }
});
console.log(newObj.age);// 調用結果爲 18
newObj.sayMe();// 調用結果爲 一花一世界

---

藉助構造函數

• 可用過在子級的構造函數中調用父級的構造函數，來實現繼承效果

示例代碼:

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

// 定義子級對象的構造函數
function Child() {
    // 調用父級對象的構造函數 - 使用apply()或call()方法
    Parent.call(this);
    this.child = '嚯嚯嚯';
}

// 建立子級對象
var child = new Child();
console.log(child);// 調用結果爲 Child { parent: '嘎嘎嘎', child: '嚯嚯嚯' }

分析圖:

---

組合式繼承

• 就是將原型式繼承和藉助構造函數式繼承有效的結合在一塊兒

示例代碼:

function Parent(){
    // 構造函數的自有屬性
    this.name = '豬八戒';
}
// 構造函數的原型屬性
Parent.prototype.age = 500 + '歲';

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

    this.job = '淨壇使者';
}
// 繼承父級構造函數中的原型屬性
Child.prototype = Parent.prototype;

var child = new Child();

console.log(child.job);// 調用結果爲 淨壇使者
console.log(child.age);// 調用結果爲 500歲
console.log(child.name);// 調用結果爲 豬八戒