javascript 之原型理解

最近一直在瞭解javascript原型的問題，也算是理解了一點，但願把我所理解的，用簡單的例子和說明，讓更多人清除的去理解javascript原型

1,原型 prototype 是一個什麼東西

咱們建立的每個函數都有一個prototype屬性，這個屬性是一個指針，指向一個對象。簡單的說 prototype就是一個對象

理解原型對象：

不管何時只要建立了一個新函數，就會根據一組特定的規則爲該函數建立一個prototype屬性，這個屬性指向函數的原型對象。

建立自定義的構造函數後，原型對象默認只會取得constructor屬性，至於其餘方法，則都是從Object繼承而來的，

當用構造函數建立一個實例後，該實例內部將包含一個指針（內部屬性）__proto__，指向構造函數的原型。

經過訪問對象的 __proto__ 屬性，這個屬性在腳本中是徹底不可見的，這個連接存在於實例與構造函數的原型對象之間，而不是存在於實例與構造函數之間。

上面的話看不懂麼，不要怕，咱們一句話一句話來驗證。

下面開始跟着我來清除的看到原型prototype 這個東西，在瀏覽器的控制檯，輸入下面的代碼（若是你連控制檯都不知道，就別玩了）

function A(){
		this.name = "xiami";
	}

來看看咱們的prototype屬性， 在控制檯輸入下面的代碼 （圖片是返回的結果表示）

A.prototype

看看這個原型對象有什麼

默認的它有一個constructor屬性，指向咱們的構造函數

如今咱們看看這個函數實例化以後，它的原型還在不在？

a = new A();

 如今 a 是A函數的實例，若是咱們給我如今給A函數原型中添加name屬性爲1，那麼我在 a對象中能看到麼？

A.prototype.name = 1;

而後輸入a.name ，發現結果是1，怎麼這麼神奇，在實例化以後，給構造函數的原型添加屬性，還能被對象訪問到。這種方法不推介使用，w3c的說法是不容易被跟蹤，具體的狀況我也沒遇到過，那麼它是怎麼實現的呢？咱們再來看看上面的這句話

當用構造函數建立一個實例後，該實例內部將包含一個指針（內部屬性）__proto__，指向構造函數的原型。這個屬性不必定是 __proto__ ，可是這個指針必定是存在的，我在火狐瀏覽器發現 是用 __proto__ 屬性，這個時候咱們能夠使用 a.__proto__  查看咱們A的原型對象了，是真的麼？

點擊箭頭指向的地方，以下圖

是否是和咱們以前 看到的原型對象如出一轍，是否是理解了上面的那句話，這也是在實例化後，添加原型屬性，在對象中也能訪問的緣由麼？

上面的name 是剛纔 給構造函數A的原型對象添加的name屬性，這也說明了它們指向的是同一個原型

下面是最初始化的一個狀態，只要函數存在、對象存在，這個屬性或指針就是存在的（下面的constructor 屬性值爲 A()指向構造函數 ，畫圖的時候忘記寫了）

給原型對象添加 name屬性後（下面的constructor 屬性值爲 A() 指向構造函數，畫圖的時候忘記寫了）

原本覺得有好多要寫的，這個文章寫了好幾回了，可能理解不是很深，忽然發現沒有什麼要寫的了，準備準備再接着寫

2，原型鏈和繼承

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

回顧上面說的，構造函數、原型 和 實例(對象) 的關係，每一個構造函數都有一個原型對象，原型對象包含一個指向構造函數的指針(constructor 你還記得麼)，而實例都包含一個指向原型對象的內部指針(上面說的__proto__屬性)。

若是咱們讓原型對象等於另外一個類型的實例，此時的原型對象將包含一個指向另外一個原型的指針（__proto__屬性），相應的，另外一個原型中也包含着一個指向另外一個構造函數的指針。假如另外一個原型又是另外一個類型的實例，那麼上述關係依然成立，這樣層層遞進，就構成了實例與原型的鏈條，這就是所謂原型鏈的基本概念。

上面這句話是否是很繞，那麼下面就讓咱們來用例子理解它：

　　　　 function SuperType(){
		this.property = true;
	}
	// 給 SuperType 原型添加方法
	SuperType.prototype.getSuperValue = function(){
		return this.property;
	}

	function SubType(){
		this.subproperty = false;
	}

	// 重寫SubType原型
	SubType.prototype = new SuperType();
	// 給Subtype 原型添加方法
	SubType.prototype.getSubValue = function(){
		return this.subproperty;
	}

	// 實例化 SubType
	var instance = new SubType();
	console.log(instance.getSuperValue());	// 結果是 true

 首先咱們建立SuperType函數，函數內有一個屬性，給SuperType原型添加方法

分析：默認建立函數，就會爲該函數建立一個 prototype對象，prototype對象中有一個constructor 屬性 指向構造函數 SuperType()

而後，咱們建立SubType函數，函數內有一個屬性，重寫SubType原型對象，將SuperType 的實例 賦給 SubType的原型對象

分析：建立SubType函數也會爲它建立一個 prototype對象，可是這裏用SuperType的實例 給重寫了，那麼重寫後變成什麼了呢？

既然被重寫了，那它裏面的constructor屬性 確定沒有了，被代替的是 SuperType實例的屬性值（包括方法），那麼這些屬性值是什麼呢？

還記得前面說過的當函數建立一個實例後，該實例會包含一個內部指針，指向構造函數的原型

最後得知SubType的原型對象的值包括：SuperType實例的屬性值，SuperType的原型值，SuperType的原型

 

參考：

javascript高級程序設計第三版，第6章，面向對象的程序設計