JavaScript面向?qū)ο笾械睦^承個(gè)人分享

Coly 發(fā)布于2019-08-26 12:14 / 2373人閱讀

摘要：繼承原型鏈所謂言行鏈就是如果構(gòu)造函數(shù)或?qū)ο蟮脑椭赶驑?gòu)造函數(shù)或?qū)ο蟮脑驮僦赶驑?gòu)造函數(shù)或?qū)ο笠源祟愅谱罱K的構(gòu)造函數(shù)或?qū)ο蟮脑l(xiāng)指向的原型由此形成一條鏈狀結(jié)構(gòu)被稱之為原型鏈?zhǔn)纠a原型鏈通過(guò)構(gòu)造函數(shù)創(chuàng)建對(duì)象將的原型指向?qū)ο笸ㄟ^(guò)構(gòu)造函數(shù)創(chuàng)建對(duì)象

繼承 原型鏈

所謂言行鏈就是如果構(gòu)造函數(shù)或?qū)ο驛,A的原型指向構(gòu)造函數(shù)或?qū)ο驜,B的原型再指向構(gòu)造函數(shù)或?qū)ο驝,以此類推,最終的構(gòu)造函數(shù)或?qū)ο蟮脑l(xiāng)指向Object的原型.由此形成一條鏈狀結(jié)構(gòu),被稱之為原型鏈

示例代碼:

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

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

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

function C(){
    this.c = "c";
}
// 將C的原型指向?qū)ο骲
C.prototype = b;
// 通過(guò)構(gòu)造函數(shù)創(chuàng)建對(duì)象
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

原型鏈實(shí)現(xiàn)繼承的問(wèn)題

原型鏈實(shí)際上是在多個(gè)構(gòu)造函數(shù)或?qū)ο笾g共享屬性和方法

常見(jiàn)子類的對(duì)象時(shí),不能像父級(jí)的構(gòu)造函數(shù)傳遞任何參數(shù)

注意: 在實(shí)際開(kāi)發(fā)中很少會(huì)多帶帶使用原型鏈

示例代碼:

// 原型鏈
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);// 調(diào)用結(jié)果為 c
console.log(c.b);// 調(diào)用結(jié)果為 b
console.log(c.a);// 調(diào)用結(jié)果為 a

var a = new A();

console.log(a.a);// 調(diào)用結(jié)果為 a
console.log(a.b);// 調(diào)用結(jié)果為 b
console.log(a.c);// 調(diào)用結(jié)果為 c

var b = new B();

console.log(b.a);// 調(diào)用結(jié)果為 a
console.log(b.b);// 調(diào)用結(jié)果為 b
console.log(b.c);// 調(diào)用結(jié)果為 c

原型式繼承

語(yǔ)法 : 定義一個(gè)函數(shù) - 再將構(gòu)造函數(shù)創(chuàng)建的對(duì)象返回,用于實(shí)現(xiàn)對(duì)象之間的繼承

參數(shù)

obj - 表示繼承關(guān)系中的父級(jí)對(duì)象

prop - 對(duì)象格式,表示繼承關(guān)系中的子級(jí)對(duì)象的屬性和方法

示例代碼:

function fn(obj,prop) {
    // 定義一個(gè)臨時(shí)的構(gòu)造函數(shù)
    function Fun() {
        // 遍歷對(duì)象的屬性和方法
        for(var attrName in prop){
            this[attrName] = prop[attrName];
        }
    }
    // 將函數(shù)的參數(shù)作為構(gòu)造函數(shù)的原型
    Fun.prototype = obj;
    // 將構(gòu)造函數(shù)創(chuàng)建的對(duì)象進(jìn)行返回
    return new Fun();
}
var obj = {
    name : "皮卡丘"
};
// 調(diào)用函數(shù)
var result = fn(obj,{
    age : 26,
    sayMe : function () {
        console.log("一花一世界");
    }
});
console.log(result.age);// 調(diào)用結(jié)果為 26
result.sayMe();// 調(diào)用結(jié)果為 一花一世界

原型式竭誠(chéng)另一種方法

示例代碼:

 // 利用Object.create()
 var obj ={
    name : "皮卡丘"
 };
var newObj = Object.create(obj,{
    age : {
        value : 18
    },
    sayMe : {
        value : function () {
            console.log("一花一世界");
        }
    }
});
console.log(newObj.age);// 調(diào)用結(jié)果為 18
newObj.sayMe();// 調(diào)用結(jié)果為 一花一世界

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

可用過(guò)在子級(jí)的構(gòu)造函數(shù)中調(diào)用父級(jí)的構(gòu)造函數(shù)，來(lái)實(shí)現(xiàn)繼承效果

示例代碼:

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

// 定義子級(jí)對(duì)象的構(gòu)造函數(shù)
function Child() {
    // 調(diào)用父級(jí)對(duì)象的構(gòu)造函數(shù) - 使用apply()或call()方法
    Parent.call(this);
    this.child = "嚯嚯嚯";
}

// 創(chuàng)建子級(jí)對(duì)象
var child = new Child();
console.log(child);// 調(diào)用結(jié)果為 Child { parent: "嘎嘎嘎", child: "嚯嚯嚯" }

分析圖:

組合式繼承

就是將原型式繼承和借助構(gòu)造函數(shù)式繼承有效的結(jié)合在一起

示例代碼:

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

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

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

var child = new Child();

console.log(child.job);// 調(diào)用結(jié)果為 凈壇使者
console.log(child.age);// 調(diào)用結(jié)果為 500歲
console.log(child.name);// 調(diào)用結(jié)果為 豬八戒