構(gòu)造函數(shù)、原型、實例、原型鏈之間的聯(lián)系

描述：每個構(gòu)造函數(shù)都有一個原型對象；

? ? ? ? ? 每個原型對象都有一個指針，指向構(gòu)造函數(shù)；

? ? ? ? ? 每個實例對象都有一個內(nèi)部指針，指向原型對象；

　　　若此時的原型對象是另一個類型的實例，此時的原型對象將包含一個指針，指向另一個原型對象，

　　　相應(yīng)的另一個原型對象中也包含一個指針，指向另一個構(gòu)造函數(shù)；若此時另一個原型對象又是另另一個

　　　類型的實例，那么上述關(guān)系依然成立，如此層層遞進，就構(gòu)成了實例與原型的鏈條，俗稱原型鏈。

　　　

繼承
實現(xiàn)：繼承主要通過原型鏈來實現(xiàn)
基本思想：利用原型讓一個引用類型繼承另一個引用類型的屬性和方法
本質(zhì)：重寫原型對象

繼承的實現(xiàn)方式：
1.借用構(gòu)造函數(shù)實現(xiàn)繼承
基本思想：在子類中調(diào)用父類的構(gòu)造函數(shù)，這樣在創(chuàng)建子類實例對象時就會執(zhí)行父類的構(gòu)造函數(shù)中定義的所有屬性的初始化，結(jié)果每個子類實例對象都會具有父類屬性的一個副本。
function Animal () {
this.name = "animal";
this.colors = ["blue", "green"];
this.sayName = function () {
console.log(this.name);
}
}
Animal.prototype.call = function () {
console.log("Animal call...");
}

function Cat() {
Animal.call(this);
}

var cat1 = new Cat();
var cat2 = new Cat();
cat1.colors.push("black");

console.log(cat1.colors); //"blue", "green", "black"
console.log(cat2.colors); //"blue", "green"
cat1.sayName(); //"animal"
cat1.call(); //cat1.call is not a function.

缺點：方法都在構(gòu)造函數(shù)中定義，函數(shù)的復(fù)用就無從談起；
父類原型中的方法對于子類而言是不可見的，結(jié)果導(dǎo)致所有屬性的繼承只能使用構(gòu)造函數(shù)模式。

?

2.借助原型鏈實現(xiàn)繼承

function Animal () {
this.name = "animal";
this.colors = ["blue", "green"];
}

Animal.prototype.call = function () {
console.log("Animal call...");
}

function Cat() {
}

Cat.prototype = new Animal (); //inherit
Cat.prototype.jump = function () {
console.log("cat jump...");
}
var cat1 = new Cat();
var cat2 = new Cat();
cat1.colors.push("black");

console.log(cat1.colors); //"blue", "green", "black"
console.log(cat2.colors); //"blue", "green"，"black"
cat1.call(); //"Animal call..."
cat1.jump(); //"cat jump..."

缺點：最主要的問題是包含引用類型值的原型，包含引用類型的原型屬性會被所有的實例對象共享，這就是為什么要在構(gòu)造函數(shù)而不是原型對象中定義屬性的原因；
在通過原型實現(xiàn)繼承時，原型會變成另一個類型的實例，于是原先的實例屬性就變成了現(xiàn)在的原型屬性了。

?

3.構(gòu)造函數(shù)和原型鏈組合方式實現(xiàn)繼承

基本思想：使用構(gòu)造函數(shù)模式實現(xiàn)對實例屬性的繼承，保證了每個實例對象都有自己的屬性；
使用原型鏈模式實現(xiàn)對原型屬性和方法的繼承，實現(xiàn)了函數(shù)的復(fù)用。

function Animal () {
this.name = "animal";
this.colors = ["blue", "green"];
}

Animal.prototype.call = function () {
console.log("Animal call...");
}

function Cat() {
Animal.call(this);
}

Cat.prototype = new Animal (); //inherit

Cat.prototype.jump = function () {
console.log("cat jump...");
}
var cat1 = new Cat();
var cat2 = new Cat();
cat1.colors.push("black");

console.log(cat1.colors); //"blue", "green", "black"
console.log(cat2.colors); //"blue", "green"
console.log(cat1 instanceof Cat, cat1 instanceof Animal); //true true
console.log(cat1.constructor); //Animal

缺點：任何情況下，父類的構(gòu)造函數(shù)執(zhí)行了兩次，不必為了指定子類型的原型而調(diào)用父類的構(gòu)造函數(shù)，我們所需要的無非就是父類原型的一個副本而已；
無法區(qū)分一個實例對象是子類實例還是父類實例。

4.構(gòu)造函數(shù)和原型鏈組合方式實現(xiàn)繼承優(yōu)化(1)

function Animal () {
this.name = "animal";
this.colors = ["blue", "green"];
}

Animal.prototype.call = function () {
console.log("Animal call...");
}

function Cat() {
Animal.call(this);
}

Cat.prototype = new Animal (); //inherit

Cat.prototype.jump = function () {
console.log("cat jump...");
}
var cat1 = new Cat();
var cat2 = new Cat();
cat1.colors.push("black");

console.log(cat1.colors); //"blue", "green", "black"
console.log(cat2.colors); //"blue", "green"
console.log(cat1 instanceof Cat, cat1 instanceof Animal); //true true
console.log(cat1.constructor); //Animal

描述：解決了兩次調(diào)用父類構(gòu)造函數(shù)的問題，但是仍然無法區(qū)分一個實例對象是子類實例還是父類實例。

5.構(gòu)造函數(shù)和原型鏈組合方式實現(xiàn)繼承優(yōu)化(2)

function Animal () {
this.name = "animal";
this.colors = ["blue", "green"];
this.sayName = function () {
console.log(this.name);
}
}

Animal.prototype.call = function () {
console.log("Animal call...");
}

function Cat() {
Animal.call(this);
}

Cat.prototype = Object.create(Animal.prototype); //inherit
Cat.prototype.constructor = Cat;

Cat.prototype.jump = function () {
console.log("cat jump...");
}
var cat1 = new Cat();
var cat2 = new Cat();
cat1.colors.push("black");
console.log(cat1.colors); //"blue", "green", "black"
console.log(cat2.colors); //"blue", "green"

console.log(cat1 instanceof Cat, cat1 instanceof Animal); //true true
console.log(cat1.constructor); // Cat

描述：目前最完美的繼承實現(xiàn)方式；
-

繼承

實現(xiàn)：繼承主要通過原型鏈來實現(xiàn)

基本思想：利用原型讓一個引用類型繼承另一個引用類型的屬性和方法

本質(zhì)：重寫原型對象

轉(zhuǎn)載于:https://www.cnblogs.com/marton/p/9734732.html

總結(jié)

以上是生活随笔為你收集整理的JS--继承的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。