JS物件導向:JS繼承方法總結

weixin_33797791發表於2018-06-06

物件導向中,繼承相對是比較難的,即使看了很多文章,可能依然不明白,下面我談談我的理解。

1.

建構函式繼承

function p0(){

this.name = "p0";

this.colors = ["pink","black","gray"];}

function children0(){

p0.call( this );

this.type = "children0";}

通過這種在子類中執行父類的建構函式呼叫,把父類建構函式的
this
指向為子類例項化物件引用,從而導致父類執行的時候父類裡面的屬性都會被掛載到子類的例項上去。

new children0().name; // p0

new children0().colors; // ["pink","black","gray"]

這種方式,父類原型上的東西沒法繼承,因此函式複用也就無從談起

p0.prototype.sex = "

";

p0.prototype.say = function() {

console.log(" hellow");}

new children0().sex; // undefined

// Uncaught TypeError: (intermediate value).say is not a function

new children0().say();

缺點:
children0
無法繼承
p0
的原型物件,只能算是部分繼承

2.

原型鏈式繼承

function p1(){

this.name = "p1";

this.colors = ["red","blue","yellow"];

}function Children1(){

this.name = "Children1";}

Children1.prototype = new p1();

p1.prototype.sex = "

";

p1.prototype.say = function() {

console.log(" hellow! ");}

new Children1().sex; //

new Children1().say(); //hellow!

這種方式確實解決了上面借用建構函式繼承方式的缺點。

但是,這種方式仍有缺點,如下:

var s1 = new Children1();

s1.colors.push("black");

var s2 = new Children1();

s1.colors; // (4) ["red", "blue", "yellow", "balck"]

s2.colors; // (4) ["red", "blue", "yellow", "balck"]

在這裡例項化了兩個
Children1
s1
中為父類的
colors
屬性
push
了一個顏色
black
,但是
s2
也改變了。因為原型物件是共用的。

但我們並不想這樣,這是這個方法缺點。

3.

組合式繼承

意思就是把建構函式和原型鏈繼承結合起來。

function p2(){

this.name = "p2";

this.colors = ["red","blue","yellow"];}

function Children2(){

p2.call(this);

this.type = "Children2";}

Children2.prototype = new p2()

var s1 = new Children2();

s1.colors.push("black");

var s2 = new Children2();

s1.colors; // (4) ["red", "blue", "yellow", "balck"]

s2.colors; // (3) ["red", "blue", "yellow"]

可以看到,
s2
s1
兩個例項物件已經被隔離了。

但這種方式仍有缺點。父類的建構函式被執行了兩次,第一次是
Children2.prototype = new p2()
,第二次是在例項化的時候,這是沒有必要的。

組合式繼承優化
1

直接把父類的原型物件賦給子類的原型物件

function p3(){

this.name = "p3";

this.colors = ["red","blue","yellow"];}

p3.prototype.sex = "

";

p3.prototype.say = function(){console.log("Oh, My God

")}

function Children3(){

p3.call(this);

this.type = "Children3";}

Children3.prototype = p3.prototype;

var s1 = new Children3();

var s2 = new Children3();

console.log(s1, s2);

但是,看如下程式碼:

console.log(s1 instanceof Child3); // true

console.log(s1 instanceof Parent3); // true

可以看到,我們無法區分例項物件
s1
到底是由
Children3
直接例項化的還是
p3
直接例項化的。用
instanceof
關鍵字來判斷是否是某個物件的例項就基本無效了。

我們還可以用
.constructor
來觀察物件是不是某個類的例項:

console.log(s1.constructor.name); // p3

可以看出,
s1
的建構函式是父類,而不是子類
Children3
,這並不是我們想要的。

組合式繼承優化
2

function p4(){

this.name = "p4";

this.colors = ["red","blue","yellow"];}

p4.prototype.sex = "

";

p4.prototype.say = function(){console.log("Oh, My God

")}

function Children4(){

p4.call(this);

this.type = "Children4";}

Children4.prototype=Object.create(p4.prototyp

Children4.prototype.constructor = Children4;

Object.create

是一種建立物件的方式,它會建立一箇中間物件

var p = {name: "p"}

var obj = Object.create(p)

// Object.create({ name: "p" })

通過這種方式建立物件,新建立的物件obj的原型就是p,同時obj也擁有了屬性name,這個新建立的中間物件的原型物件就是它的引數。

這種方式解決了上面的所有問題,是繼承的最好實現方式。


相關文章