JavaScript學(xué)習(xí)第十天筆記（繼承）

baiy 發(fā)布于2019-08-26 12:17 / 3020人閱讀

摘要：繼承原型鏈如果構(gòu)造函數(shù)或?qū)ο蟮脑椭赶驑?gòu)造函數(shù)或?qū)ο螅脑驮僦赶驑?gòu)造函數(shù)或?qū)ο螅源祟愅疲罱K的構(gòu)造函數(shù)或?qū)ο蟮脑椭赶虻脑汀?/p>

繼承 原型鏈

如果構(gòu)造函數(shù)或?qū)ο驛的原型指向構(gòu)造函數(shù)或?qū)ο驜，B的原型再指向構(gòu)造函數(shù)或?qū)ο驝，以此類推，最終的構(gòu)造函數(shù)或?qū)ο蟮脑椭赶騉bject的原型。由此形成了一條鏈狀結(jié)構(gòu)，被稱之為原型鏈。按照上述的描述，在B中定義的屬性或方法，可以在A中使用并不需要定義。這就是繼承，它允許每個對象來訪問其原型鏈上的任何屬性或方法。在JS語言中，原型鏈?zhǔn)抢^承的默認(rèn)產(chǎn)生方式。

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


function B(){
    this.b = "b";
}
//將B的原型指向A
B.prototype = a ;
var b =new B();
console .log(b.a);//a
console .log(b.b);//b

function C(){
    this.c = "c"
}
//將C的原型指向B
C.prototype = b;
var c= new C();
/*console .log(對象.屬性)*/
console .log(c.c);//c
console .log(c.b);//b
console .log(c.a);//a

只繼承與原型

出于對效率的考慮，盡可能地將屬性和方法加到原型上，可以采用以下方式：
1.不要為繼承關(guān)系多帶帶創(chuàng)建新對象。
2.盡量減少運(yùn)行時的方法搜索。

//原型鏈
function A(){

}
A.prototype.a="a";//將自有屬性改寫為原型屬性

function B(){

}
B.prototype=A.prototype; //將B的原型屬性指向A的原型屬性
B.prototype.b = "b";


function C(){
    this .c="c";
}
C.prototype = B.prototype;

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

原型鏈的問題

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

原型式繼承

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

/*
    定義一個函數(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)建的對象進(jìn)行返回
    return new Fun();
}
var obj = {
    name : "HK"
}
// 調(diào)用函數(shù)
var result = fn(obj, {
    age : 26,
    sayMe : function(){
        console.log("this is function");
    }
});
console.log(result.age);
result.sayMe();

Object.create()方法實(shí)現(xiàn)繼承

var obj = {
    name : "HK"
}
var newObj = Object.create(obj, {
    age : {
        value : 26
    },
    sayMe : {
        value : function(){
            console.log("this is function");
        }
    }
});
console.log(newObj.age);
newObj.sayMe();

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

在子級中調(diào)用父級元素的屬性

// 定義父級對象的構(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);