構造函數、原型、實例、原型鏈之間的聯系

描述：每個構造函數都有一個原型對象；

? ? ? ? ? 每個原型對象都有一個指針，指向構造函數；

? ? ? ? ? 每個實例對象都有一個內部指針，指向原型對象；

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

　　　相應的另一個原型對象中也包含一個指針，指向另一個構造函數；若此時另一個原型對象又是另另一個

　　　類型的實例，那么上述關系依然成立，如此層層遞進，就構成了實例與原型的鏈條，俗稱原型鏈。

　　　

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

繼承的實現方式：
1.借用構造函數實現繼承
基本思想：在子類中調用父類的構造函數，這樣在創建子類實例對象時就會執行父類的構造函數中定義的所有屬性的初始化，結果每個子類實例對象都會具有父類屬性的一個副本。
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.

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

?

2.借助原型鏈實現繼承

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..."

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

?

3.構造函數和原型鏈組合方式實現繼承

基本思想：使用構造函數模式實現對實例屬性的繼承，保證了每個實例對象都有自己的屬性；
使用原型鏈模式實現對原型屬性和方法的繼承，實現了函數的復用。

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

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

4.構造函數和原型鏈組合方式實現繼承優化(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

描述：解決了兩次調用父類構造函數的問題，但是仍然無法區分一個實例對象是子類實例還是父類實例。

5.構造函數和原型鏈組合方式實現繼承優化(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

描述：目前最完美的繼承實現方式；
-

繼承

實現：繼承主要通過原型鏈來實現

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

本質：重寫原型對象

轉載于:https://www.cnblogs.com/marton/p/9734732.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。