L - JavaScript繼承

joyvw 發(fā)布于2019-08-22 15:59 / 2712人閱讀

摘要：類式繼承原型鏈繼承實(shí)現(xiàn)我是的方法我是的方法由于的實(shí)例能夠訪問，所以我們可以設(shè)置指向的實(shí)例。所以的實(shí)例可以訪問的實(shí)例以及，實(shí)現(xiàn)繼承缺點(diǎn)由于對(duì)象類型的賦值是引用賦值，如果父類實(shí)例化過程中有引用類型，那么子類的實(shí)例的這個(gè)屬性都指向同一內(nèi)存空間。

類式繼承（原型鏈繼承） 實(shí)現(xiàn)

function A(){
    this.a="a";
    this.arr=[1,2];
}
A.prototype.funA=function(){
    console.log("我是A的方法");
    
}
function B(){
    this.b="b";
}
B.prototype.funB=function(){
    console.log("我是B的方法");
}
B.prototype=new A();

var b1=new B();

由于A的實(shí)例能夠訪問A.prototype，所以我們可以設(shè)置B.prototype指向A的實(shí)例。所以B的實(shí)例可以訪問A的實(shí)例以及A.prototype，實(shí)現(xiàn)繼承

缺點(diǎn)：

1.由于對(duì)象類型的賦值是引用賦值，如果父類A實(shí)例化過程中有引用類型，那么子類B的實(shí)例的這個(gè)屬性都指向同一內(nèi)存空間。

function A(){
    this.a="a";
    this.arr=[1,2];
}
A.prototype.funA=function(){
    console.log("我是A的方法");
    
}
function B(){
    this.b="b";
}
B.prototype.funB=function(){
    console.log("我是B的方法");
}
B.prototype=new A();

var b1=new B();
var b2=new B();

b1.arr.push(3);
console.log(b1.arr);    // [1, 2, 3]
console.log(b2.arr);    // [1, 2, 3]

2.如果父類的實(shí)例需要傳入一些參數(shù)，那么兩個(gè)子類實(shí)例初始化時(shí)某一屬性值相同

function A(year){
    this.year=year;
}
function B(){
    this.b="b";
}
B.prototype=new A(18);

var b1=new B();
var b2=new B();
console.log(b1.color);    // 18
console.log(b2.color);    // 18

3.B.prototype中constructor指向不正確，因?yàn)?b>B.prototype指向了一個(gè)A的實(shí)例，所以本應(yīng)指向B的constructor指向了A

function A(year){
    this.year=year;
}
function B(){
    this.b="b";
}
B.prototype=new A(18);

var b1=new B();

b1.constructor===A    // true

構(gòu)造函數(shù)繼承（借用構(gòu)造函數(shù)繼承） 實(shí)現(xiàn)

function A(color){
    this.a="a";
    this.arr=[1,2];
    this.color=color;
}
A.prototype.funA=function(){
    console.log("我是A的方法");
    
}
function B(color){
    A.call(this,color);
}
B.prototype.funB=function(){
    console.log("我是B的方法");
}

var b1=new B("red");

console.log(b1)    // {a: "a", arr: Array(2), color: "red"}

優(yōu)點(diǎn)

解決了引用賦值問題，也可以自定義一些屬性了，constructor也指向B了，即解決了類式繼承的第一個(gè)、第二個(gè)問題以及第三個(gè)問題

缺點(diǎn)

很明顯，B除了調(diào)用了A這個(gè)函數(shù)外并沒有和A扯上什么關(guān)系，原型鏈?zhǔn)遣煌ǖ?無法訪問到應(yīng)該作為父類的A的prototype屬性)，我甚至并不覺得這是一種繼承方式，但它為下面兩種方法奠定了基礎(chǔ)

b1.__proto__===B.prototype   // true
b1.__proto__.__proto__===Object.prototype    // true

組合繼承

說白了，就是將上述兩種方法的長處組合到一起，利用原型鏈實(shí)現(xiàn)原型屬性和方法的繼承，通過借用構(gòu)造函數(shù)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承

實(shí)現(xiàn)

function A(color){
    this.a="a";
    this.arr=[1,2];
    this.color=color;
}
A.prototype.funA=function(){
    console.log("我是A的方法");
    
}
function B(color,age){
    // 通過借用構(gòu)造函數(shù)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承
    A.apply(this,[color]);
    this.age=age;
}

// 利用原型鏈實(shí)現(xiàn)原型屬性和方法的繼承
B.prototype=new A();
B.prototype.constructor=B;

var b1=new B("red",18);

優(yōu)點(diǎn)

既通過在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用，又能夠保證每個(gè)實(shí)例都有它自己的屬性

缺點(diǎn)

調(diào)用了兩次父類的構(gòu)造函數(shù)

寄生組合式繼承（此方法最好） 實(shí)現(xiàn)

function A(color){
    this.a="a";
    this.arr=[1,2];
    this.color=color;
}
A.prototype.funA=function(){
    console.log("我是A的方法");
    
}
function B(color,age){
    A.apply(this,[color]);
    this.age=age;
}

B.prototype=Object.create(A.prototype);
B.prototype.constructor=B;

var b1=new B("red",18);

優(yōu)點(diǎn)

只需訪問一次父類的構(gòu)造函數(shù),避免了在子類的prototype上創(chuàng)建不必要、多余的屬性