web前端開發技術講解之JS繼承方法總結

JS面向對象中，繼承相對是比較難的，即便看了不少文章，可能依然不明白，下面我談談個人理解。

 

 

 

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，這個新建立的中間對象的原型對象就是它的參數。

這種方式解決了上面的全部問題，是繼承的最好實現方式。