資訊專欄INFORMATION COLUMN
摘要：當調用的構造函數時，在函數內部又會調用的構造函數，又在新對象上創建了實例屬性和，于是這兩個屬性就屏蔽了原型中的同名屬性。
前言：這次對上篇收個尾，主要總結一下javascript的繼承。
1.原型鏈js中原型鏈是實現繼承的主要方法?；舅枷胧牵豪迷妥屢粋€引用類型繼承另一個引用類型的屬性和方法。我們來簡單回顧一下以前的內容：
每個構造函數都有一個原型對象
每個原型對象都包含一個指向構造函數的指針：（constructor）
而實例和構造函數都有一個prototype屬性指針指向原型對象。
假如現在我們讓原型對象（A）等于另一個類型的實例（b），此時相當于這個原型對象（A）整體作為一個實例指向另一個實例的原型對象（b的原型對象B）。
以上就實現了繼承。
看下面代碼實例：
function SuperType(){
this.property = true; //property是SuperType的實例屬性
};
SuperType.prototype.getSuperValue = function(){ //getSuperValue是SuperType的原型方法
return this.property;
};
function SubType(){
this.subproperty = false;
}
//讓SuperType繼承SubType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function(){
return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue()); //true
在上面的代碼中，定義了兩個類型：SuperType和SubType。每個類型分別有一個屬性和方法。
通過創建SuperType的實例，并賦值給了SubType.prototype,從而實現SubType繼承了這個的實例，
原來存在于SuperType的實例中的所有的屬性和方法，現在也存在于SubType.prototype中了。
既然現在SubType的原型對象SubType.prototype是SuperType的實例化對象，那么SuperType的實例屬性property就位于SubType.prototype。如下圖：
現在instance.constructor現在指向的是SuperType，圖中可以看出來。也可以在進行繼承之后，再進行如下步驟：
SubType.prototype.constructor = Subtype;
所有函數的默認原型都是Object的實例，所以下圖是上面例子的完整原型鏈。
（1）重寫和添加方法必須在用超類型的實例（new SuperType()）替換原型（SubType.prototype）之后。
function SuperType(){
this.property = true;
};
SuperType.prototype.getSuperValue = function(){
return this.property;
};
function SubType(){
this.subproperty = false;
}
//讓SuperType繼承SubType
SubType.prototype = new SuperType();
//添加新方法
SubType.prototype.getSubValue = function(){
return this.subproperty;
};
//重寫超類型中的方法
SubType.prototype.getSuperValue = function(){
return false;
};
var instance = new SubType();
alert(instance.getSuperValue()); //false
alert((new SuperType()).getSuperValue()); //我仿照java這么寫，居然返回true
重寫超類型中的方法之后，通過SuperType的實例調用getSuperValue()時，調用的就是這個重新定義的方法。
通過SuperType的實例調用getSuperValue()時，調用的就是超類型中的方法，返回true
（2）通過原型鏈實現繼承時，不能使用對象字面量創建原型方法，這樣會重寫原型鏈
function SuperType(){
this.property = true;
};
SuperType.prototype.getSuperValue = function(){
return this.property;
};
function SubType(){
this.subproperty = false;
}
//讓SuperType繼承SubType
SubType.prototype = new SuperType();
SubType.prototype = {
getSubValue: function(){
return this.subproperty;
},
someOtherMethod: function(){
return false;
}
};
var instance = new SubType();
alert(instance.getSuperValue()); //error
(3)原型鏈的問題
在通過原型鏈進行繼承時，原型實際上會變成另一個類型的實例，所以原先的實例屬性也就變成了現在的原型屬性了。
現在假如原型實例的屬性是引用類型的，那么它會直接被添加成現在的對象原型的屬性，那么通過這個創建的實例對這個引用類型的屬性進行更改時，會立即反映在所有的實例對象上。
看下面代碼：
function SuperType(){
this.colors = ["red","blue","green"];
};
function SubType(){
}
//讓SubType繼承SuperType
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //["red","blue","green","black"]
var instance2 = new SubType();
alert(instance2.colors); //["red","blue","green","black"]
當SubType通過原型鏈繼承了SuperType之后，SubType.prototype就變成了SuperType的一個實例
此時SubType擁有一個自己的colors屬性，就像專門創建了一個SubType.prototype.colors屬性一樣
此時SubType所有的實例話對象都會共享這個colors屬性，修改instances1的colors屬性會立即在instances2中顯示出來。
原型鏈還有一個問題：在創建子類型的實例時，不能向超類型的構造函數傳遞參數，實際上是沒有辦法在不影響所有對象實例的情況下，給超類型的構造函數傳遞參數。
4.實現繼承的其它方法 （1）借用構造函數基本思想：
在子類型構造函數的內部調用超類型的構造函數，通過使用call()方法或者apply()方法。
例子：
function SuperType(name){
this.name = name;
this.colors = ["red","blue","green"];
}
function SubType(name,age){
//繼承了SuperType,同時還傳遞了參數
SuperType.call(this,name);
//再為子類型定義屬性
this.age = age;
}
var instance1 = new SubType("Jack");
alert(instance1.name);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"
上述代碼中解決了一個問題，就是引用類型的屬性問題，每個實例化的子類型都有自己的特有的屬性
還存在一個問題，如果方法都定義在構造函數中，那么方法的就不能復用。
（2）組合繼承－最常用的繼承模式組合繼承的思路是：
使用原型鏈實現對原型屬性和方法的繼承，通過借用構造函數來實現對實例屬性的繼承
這樣既通過在原型上定義方法實現了函數復用，又能夠保證每個實例都有它自己的屬性。
例子：
function SuperType(name){
this.name = name;
this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name,age){
//繼承SuperType的屬性
SuperType.call(this,name);
this.age = age;
}
//繼承SuperType的方法
SubType.prototype = new SuperType();
//定義子類型自己的方法
SubType.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType("Jack",26);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //Jack
instance1.sayAge(); //26
var instance2 = new SubType("Rose",23);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //Rose
instance2.sayAge(); //23
（3）原型式繼承
思路：借助原型可以基于已有的對象創建新對象，還不必因此創建自己的自定義類型
如下：
function object(o){
function F(){};
F.prototype = o;
return new F();
}
在object()函數內部先創建一個臨時性的函數。
然后將傳入的對象作為這個構造函數的原型。
最后返回這個臨時類型的餓新實例。
如下：
var person = {
name:"Jack",
friends:["路人甲","路人乙"]
};
var anotherPerson = object(person); //此處調用上方的object方法
anotherPerson.name = "Rose";
anotherPerson.friends.push("路人丙");
var yetPerson = object(person);
yetPerson.name = "Rick";
yetPerson.friends.push("路人丁");
alert(person.friends); //["路人甲","路人乙","路人丙","路人丁"]
上述person.friends不僅屬于person所有，而且會被anotherPerson和yetPerson共享。
還有Object.create()方法，前面已經總結過了。
思路：創建一個僅用于封裝繼承過程的函數。
function createAnother(original){
var clone = object(original); //調用前面的object()方法
clone.sayHi = function(){
alert("hi");
};
return clone;
}
//使用
var person = {
name:"Jack",
friends:["路人甲","路人乙","路人丙"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"Hi"
5.寄生組合式繼承
（1）組合繼承存在的問題
組合繼承是js最常用的繼承模式，不過它有自己的不足，組合繼承最大的問題在于要調用兩次超類型的構造函數，一次是創建超類型的實例賦值給子類型的原型對象時，一次是子類型構造函數內部。
最終子類型會包含超類型對象的全部實例屬性，但是我們不得不在調用子類型構造函數時重寫這些屬性。
看下面例子：
function SuperType(name){
this.name = name;
this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name,age){
SuperType.call(this,name); //第二次調用
this.age = age;
}
SubType.prototype = new SuperType(); //第一次調用
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
alert(this.age);
};
第一次調用SuperType構造函數時，SubType.prototype會得到兩個屬性：name和colors,它們都是SuperType的實例屬性，只不過位于SubType的原型中。
當調用SubType的構造函數時，在函數內部又會調用SuperType的構造函數，又在新對象上創建了實例屬性name和colors，于是這兩個屬性就屏蔽了原型中的同名屬性。
（2）解決方法寄生組合式繼承的思想是：不必為了子類型的原型而調用超類型的構造函數，我們所需要的無非就是超類型的一個副本而已，本質上就是使用寄生式繼承來繼承超類型的原型，把返回的結果賦值給子類型的原型。
大家一定還記得上面說的原型式繼承吧吧，將一個對象淺賦值給另一個對象，現在也可以把一個超類型的原型賦值給另一個子類型原型
1.回憶一下object()函數的代碼
function object(o){
function F(){}
F.prototype = 0;
return new F();
}
2.創建一個函數,它接收兩個參數：子類型構造函數和超類型構造函數。
function inheritPrototype(subType,superType){
var prototype = object(superType.prototype);
prototype.constructor = subType;
subType.prototype = prototype;
}
上面的代碼第一步創建超類型原型的一個副本
為創建的副本添加constructor屬性，彌補因重寫原型而失去默認的constructor屬性
此處的重寫發生在object()函數里面，超類型的原型superType.prototype直接賦給了F.prototype,然后object()函數又返回了F的新實例。
把創建新的對象賦值給子類型的原型
3.那么現在來使用一下
function SuperType(name){
this.name = name;
this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name,age){
SuperType.call(this,name);
this.age = age;
}
inheritPrototype(subType,SuperType);
SubType.prototype.sayAge = function(){
alert(this.age);
};
上述代碼高效率，因為它只調用了一次SuperType的構造函數，因此避免了在SubType.prototype上面創建不必要的、多余的屬性，
此時原型鏈還能保持不變。
以上～～～～～
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79980.html
摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...
摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...
摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...
摘要：創建對象兩個基本方法創建對象最基本的兩個方法是構造函數和對象字面量。當調用構造函數創建一個新的實例對象后，該實例內部會有一個指針指向構造函數的原型對象。碼農構造函數在不返回值的情況下，默認會返回新對象實例。 前言：本文主要總結一下javascript創建對象的方法、原型、原型鏈和繼承，但是先從創建對象的幾種方法開始，延伸到原型模式創建對象以及其它模式。繼承本來想一塊寫了，發現太多內容了...
閱讀 3242·2021-10-21 17:50
閱讀 3254·2021-10-08 10:05
閱讀 3380·2021-09-22 15:04
閱讀 581·2019-08-30 14:00
閱讀 1939·2019-08-29 17:01
閱讀 1508·2019-08-29 15:16
閱讀 3219·2019-08-26 13:25
閱讀 852·2019-08-26 11:44
