【JavaScript】【對象】更好地理解對象繼承

繼承原理：實例中包含一個指向原型對象的內部指針

實現方法：讓原型對象等於另外一個類型的實例

關鍵點：

1. 構造函數、原型對象、實例

2. 實例屬性、原型方法

3. 構造關係、原型關係

4. 自有屬性、繼承屬性和方法

demo：

//構造器
function Animal() {
    this.animal = 'animal';
};
function Mammal() {
    this.mammal = 'mammal';
};
var cat;

//原型鏈
Mammal.prototype = new Animal();
cat = new Mammal();

//添加屬性和方法
Animal.prototype.isAnimal = true;
Animal.prototype.sayAnimal = function() {
    alert('Is it ' + this.animal + '? ' + this.isAnimal);
};
Mammal.prototype.isMammal = true;
Mammal.prototype.sayMammal = function() {
    alert('Is it a ' + this.mammal + '? ' + this.isMammal);
};

先來看看每一個對象都能訪問到哪些屬性和方法：

Animal.prototype:

isAnimal    //自定義
sayAnimal()    //自定義

Mammal.prototype:

isMammal    //自定義
sayMammal()    //自定義
animal    //來自構造函數
isAnimal    //來自繼承
sayAnimal()    //來自繼承

cat:

mammal    //來自構造函數
isMammal    //來自繼承
sayMammal()    //來自繼承
animal    //來自繼承
isAnimal    //來自繼承
sayAnimal()    //來自繼承

在這個demo中，有兩對構造關係和兩對繼承關係（不考慮Object）。每個經過構造函數實例化的對象（Mammal.prototype和cat）都具備構造函數中的屬性，實例和構造函數之間是構造關係；構造過程當中也造成了原型關係：Mammal.prototype是cat的原型，Animal.prototype是Mammal.prototype的原型，實例經過原型鏈找到原型中的屬性和方法。

自定義和構造函數的屬性是自有屬性，它們是對象自己的屬性。來自繼承的屬性和方法是對象沿着原型鏈找到的，它們並非對象自己的屬性和方法。

實例繼承到的方法的做用域是該實例對象內部的執行環境，能夠訪問實例能獲取到的全部屬性。經過this.property的方式能夠獲得實例對象可以訪問到的全部屬性和方法，包括自有屬性和繼承的屬性方法。demo中的實例對象cat能夠訪問到在Animal和Mammal及其原型中定義的全部屬性方法，這正是繼承的意義所在。

驗證：

console.log(cat.mammal);    //mammal
console.log(cat.isMammal);    //true
console.log(cat.sayMammal());    //Is it mammal? true
console.log(cat.animal);    //animal
console.log(cat.isAnimal);    //true
console.log(cat.sayAnimal());    //Is it animal? true

轉載請註明出處：http://www.javashuo.com/article/p-qaktmvpx-ge.html

文章不按期更新完善，若是能對你有一點點啓發，我將不勝榮幸。