第5章 繼承
5.1原型對象鏈和Object.prototype
原型對象鏈：對象繼承其原型對象，而原型對象繼承他的原型對象，以此類推。
原型對象的屬性可經由對象實例訪問。
所有對象都繼承自Object.prototype。任何以對象字面形式定義的對象，其[[Prototype]]的值都被設為Object.prototype。
5.1.1 繼承自Object.prototype的方法
hasOwnProperty() 檢查是否存在一個給定名字的自有屬性
propertyIsEnumerable() 檢查一個自有屬性是否可枚舉
isPrototypeOf() 檢查一個對象是否是另一個對象的原型對象
valueOf() 返回一個對象的值表達
valueof()默認返回對象實例本身。原始封裝類型重寫了valueOf() 以使得它對String返回字符串，對Boolean返回一個布爾值，對Number返回一個數字。
toString() 返回一個對象的字符串表達
一旦valueOf返回的是一個引用而不是原始值的時候，就會回退調用toString() 方法。
//使用加號時，一邊是字符串，另一邊會轉換成字符串
1+'2'; //12
//如果另外一邊是原始值，會自動轉換成字符串表達式
true+'2'; //true2
true+2; //3
//如果另一邊是引用類型，則會調用valueOf()；如果valueOf()返回一個引用值，則調用toString()
//以下例子，book先調用了valueOf(),然后回退調用了toString()；array只調用了valueOf()
var book = {
title:'Hello world'
};
var array = [2,3,5];
book+'2'; //[object Object]2
array+'2'; //2,3,52
array+2; //2,3,52
book.valueOf(); //{title: 'Hello world'}
book.toString(); //[object Object]
因為book是一個對象，其方法繼承自Object.prototype，大部分JavaScript引擎返回默認值'[object Object]'。我們可以定義自己的toString()方法，來為此類字符串轉換提供包含更多信息的值。
var book = {
title: 'Hello world',
toString: function(){
return '[Book: ' +this.title + ']';
}
};
var person = {
name:'liang'
};
book+'2'; //[Book: Hello world]2
person+'2'; //[object Object]2
5.1.2 修改Object.prototype
由于所有對象都默認繼承自Object.prototype，所以修改這個屬性將影響到所有的對象。
而且，會給Object.prototype添加可枚舉屬性，隨著for-in循環的頻繁使用，影響到大量代碼。
因此，最好不要修改或添加Object.prototype。
Object.prototype.add = function(value){
return this + value;
};
var person = {
name:'liang'
};
console.log(person.add(' cool')); //[object Object] cool
console.log(document.add(true)); //[object HTMLDocument]true
console.log(window.add(5)); //[object Window]5
如果有添加比較多的Object.prototype屬性，在for-in中應該使用hasOwnProperty()排除掉這些繼承來的屬性。
Object.prototype.add = function(value){
return this + value;
};
var person = {
name:'liang'
};
for(var property in person){
if (person.hasOwnProperty(property)){
console.log(property);
}
} //name
5.2 對象繼承
對象字面形式會隱式指定Object.prototype為其[[Prototype]]。
可以用Object.create()方法顯式指定要繼承哪個原型對象。
Object.create() 方法接受兩個參數：一個需要被設置為新對象的[[Prototype]]、一個屬性描述對象（可選）。
var book = {
title: 'Hello world'
};
//上下兩例效果相同
var book = Object.create(Object.prototype,{
title: {
configurable: true,
enumerable: true,
value: 'Hello world',
writable: true
}
});
讓一個對象繼承另一個對象的屬性。
var person1 = {
name: 'liang',
sayName: function(){
console.log(this.name);
}
};
var person2 = Object.create(person1,{
name:{
configurable: true,
enumerable: true,
value: 'zhu',
writable: true
}
});
person1.sayName(); //liang
person2.sayName(); //zhu
console.log(person1.isPrototypeOf(person2)); //true
console.log(person2.hasOwnProperty('sayName')); //false
sayName() 依然只存在于person1并被person2繼承。
person2繼承自person1，person1繼承自Object.prototype。
當訪問一個對象的屬性時，JavaScript引擎會執行一個搜索過程，先搜索對象實例（如person2），然后繼續搜索[[Prototype]]，直到繼承鏈末端。末端的[[Prototype]]被置為null。
可創建[[Prototype]]為null的對象，創建出一個沒有原型對象的對象。
var obj1= Object.create(null);
var obj2 = {};
console.log('toString' in obj1); //false
console.log('toString' in obj2); //true
obj1此時是一個沒有任何預定義屬性的白板，成為了一個完美的哈希容器，因為不會跟繼承來的屬性名字起沖突。
5.3 構造函數繼承
對象繼承是構造函數繼承的基礎。
幾乎所有函數都有prototype屬性，可以被修改。
泛用對象的prototype屬性被自動設置為繼承自Object.prototype，該對象有一個自有屬性constructor。
可以改寫prototype屬性來改變原型對象鏈。
//創建長方形的構造函數，并添加、修改protype屬性
function Rectangle(length,width){
this.length = length;
this.width = width;
}
Rectangle.prototype.getArea = function(){
return this.length * this.width;
};
Rectangle.prototype.toString = function(){
return '[Rectangle ' + this.length + 'x' + this.width + ']';
};
//創建正方形的構造函數，并使之繼承長方形的prototype屬性
function Square(size){
this.length = size;
this.width = size;
}
Square.prototype = new Rectangle(); //此處將Square.prototype改寫為一個Rectangle對象
//因為Square繼承了Rectangle的屬性constructor，添加下一行代碼來恢復原值
Square.prototype.constructor = Square;
var rect = new Rectangle(5,10);
var squa = new Square(5);
console.log(rect.getArea()); //50
console.log(squa.getArea()); //25
console.log(rect.toString()); //[Rectangle 5x10]
console.log(squa.toString()); //[Rectangle 5x5]
//Square繼承來的toString要重新設定，使它符合需要；也可以用call()或apply()方法，具體見5.5訪問父類方法
Square.prototype.toString = function(){
return '[Square ' + this.length + 'x' + this.width + ']';
}
console.log(squa.toString()); //[Square 5x5]
//最后，檢測繼承的原型 注：instanceof寫成instanceOf，會報錯'missing ) after argument list'
console.log(rect instanceof Rectangle); //true
console.log(rect instanceof Object); //true
console.log(squa instanceof Square); //true
console.log(squa instanceof Rectangle); //true
console.log(squa instanceof Object); //true
Square.prototype并不真的需要改寫為一個Rectangle對象，要的只是把Square.prototype指向Rectangle.prototype。
因此，可以用Object.create()改寫上述例子。
//...Rectangle的構造函數...
function Square(size){
this.length = size;
this.width = size;
}
//下面讓Square.prototype繼承自Rectangle.prototype。
Square.prototype = Object.create(Rectangle.prototype,{
constructor:{
configurable: true,
enumerable: true,
value: Square,
writable: true
}
});
Square.ptototype.toString = function(){
return '[Square ' + this.length + 'x' + this.width + ']';
};
5.4 構造函數竊取
構造函數竊取就是用自己的對象竊取父類的構造函數。只需要在子類的構造函數中用call() 或者apply() 調用父類的構造函數，并將新創建的對象傳進去即可。
function Rectangle(length,width){
this.length = length;
this.width = width;
}
Rectangle.prototype.getArea = function(){
return this.length * this.width;
};
Rectangle.prototype.toString = function(){
return '[Rectangle ' + this.length + 'x' + this.width + ']';
};
//讓Square竊取Rectangle的構造函數
function Square(size){
Rectangle.call(this,size,size); //傳入兩次size，一次作為lenth,一次作為width
//此處還可添加新的屬性或覆蓋已有的屬性
}
Square.prototype = Object.create(Rectangle.prototype,{
constructor:{
configurable: true,
enumerable: true,
value: Square,
writable: true
}
});
Square.prototype.toString = function(){
return '[Square ' + this.length + 'x' + this.width + ']';
};
var squa = new Square(6);
console.log(squa.length); //6
console.log(squa.width); //6
console.log(squa.getArea()); //36
你經常需要修改一個構造函數的原型對象，你也經常需要在子類的構造函數中調用父類的構造函數。
一般來說，需要修改prototype來繼承方法并用構造函數竊取來設置屬性。這種做法模仿了那些基于類的語言的類繼承，所以被稱為偽類繼承。
偽類繼承的方法：使用call()繼承構造函數，使用create()繼承其prototype原型屬性并修改。
5.5 訪問父類方法
5.3與5.4的代碼中，通過設置toString() 方法隱藏了其原型對象的toString() 方法。是隱藏不是覆蓋，因為在delete后，還能調用其原型對象的toString() 方法。
下面例子，通過call() 調用父類的方法，并替換要修改的值。這是唯一訪問父類方法的手段。
//5.3與5.4中的代碼
Square.prototype.toString = function(){
return '[Square ' + this.length + 'x' + this.width + ']';
};
//可以替換為
Square.prototype.toString = function(){
var text = Rectangle.prototype.toString.call(this);
return text.replace('Rectangle','Square');
};
第五章總結：
JavaScript通過原型對象鏈支持繼承。當將一個對象的[[Prototype]]設置為另一個對象時，就在這兩個對象之間創建了一條原型對象鏈。
所有泛用對象都繼承自Object.prototype。如要創建一個繼承自其他對象的對象，使用Object.create()指定[[Prototype]]為一個新對象。
直接創建一條原型對象鏈在繼承其他對象的方法時工作得十分好，但你不能用原型對象繼承自有屬性。為了正確繼承自有屬性，可以使用構造函數竊取。結合構造函數竊取和原型對象鏈，這種組合稱為偽類繼承，是JavaScript中最常見的繼承手段。
