js:深入繼承

/**
* js實現繼承:
* 1.基於原型鏈的方式
* 2.基於偽造的方式
* 3.基於組合的方式
*/
一、基於原型鏈的方式
function Parent(){
this.pv = “parent”;
}
Parent.prototype.showParentValue = function(){
console.log(this.pv);
}

function Child(){
this.cv = “child”;
}
//讓Child的原型鏈指向Parent,也就等於完成瞭一次繼承
Child.prototype = new Parent();
Child.prototype.showChildValue = function(){
console.log(this.cv);
}

var c = new Child();
c.showParentValue(); //parent
c.showChildValue(); //child

/**
*在使用原型鏈進行繼承時,應註意以下問題:
*1.不能在設定瞭原型鏈之後,再重新為原型鏈賦值
*2.一定要在原型鏈賦值之後才能添加或者覆蓋方法
*/

使用原型鏈繼承的缺點是:
1.無法從子類中調用父類的構造函數,
2.如果父類中存在引用類型,這個引用類型會添加到子類的原型中,如果一個對象修改瞭這個引用,其它對象的引用同時修改

所以一般都不會單純的使用原型鏈來實現繼承。

二、基於偽造的方式
function Parent(){
this.color = [“red”,”blue”];
}

function Child(){
//在Child中的this應該是指向Child的對象
//在調用Parent方法的時候,而且this又指向瞭Child,就等於是:this.color = [“red”,”blue”];
//也就等於在Child中有瞭this.color屬性,這樣也就變向的完成瞭繼承
Parent.call(this);
//Parent(); 這種調用方式,隻是完成瞭函數的調用,根本無法實現繼承
}
var c1 = new Child();
c1.color.push = “green”;
console.log(c1.color); //red,blue,green
var c2 = new Child();
console.log(c2.color); //red,blue

//但是這依然不太好,如下:
——————————————————————————
function Parent(name){
this.color = [“red”,”blue”];
this.name = name;

/*this.say = function(){
console.log(this.name);
}*/
}
Parent.prototype.say = function(){
console.log(this.name);
}

function Child(name,age){
/**
* 使用偽造的方式就可以把子類的構造函數參數傳遞到父類中
* 存在問題:
* 1.由於使用的偽造方式,不會完成Child的原型指向Parent,所以對Child來說say方法不存在
* 解決方案:
* 將這個方法放到Parent中,使用this來創建
* 但是這又引起前面提到的問題:
* 每個Child對象都會有一個say,占用空間,所以也不應單獨的使用偽造的方式實現繼承。
* 因此我們要使用組合的方式來解決這個問題
*/
this.age = age;
Parent.call(this,name);
}
var c1 = new Child(“Leon”,13);
var c2 = new Child(“Ada”,22);
console.log(c1.name+”,”+c1.age);
console.log(c2.name+”,”+c2.age);

三、基於組合的方式
組合的方式是:屬性通過偽造的方式實現,方法通過原型鏈的方式實現。

function Parent(name){
this.color = [“red”,”blue”];
this.name = name;
}
Parent.prototype.ps = function(){
console.log(this.name+”,[“+this.color+”]”);
}

function Child(name,age){
this.age = age;
Parent.call(this,name);
}
Child.prototype = new Parent();
Child.prototype.say = function(){
console.log(this.name+”,”+this.age+”,[“+this.color+”]”);
}

var c1 = new Child(“Leon”,22);
c1.color.push(“green”);
c1.say(); //Leon,22,[red,blue,green]
c1.ps(); //Leon,[red,blue,green]
var c2 = new Child(“Ada”,23);
c2.say(); //Ada,23,[red,blue]
c2.ps(); //Ada,[red,blue]

原創文章如轉載,請註明出處,本文首發於csdn網站:https://blog.csdn.net/magneto7/article/details/25010555

You May Also Like