深入理解 javaScript 原型繼承
在探討 javaScript 的原型繼承之前，先不妨想想為什么要繼承？
考慮一個場景，如果我們有兩個對象，它們一部分屬性相同，另一部屬性不同。通常一個好的設計方案是將相同邏輯抽出來，實現重用。
以 xiaoMing liLei 兩位同學舉例。這兩位同學有自己的名字，并且會介紹自己。抽象為程序對象，可以做如下表示。
var xiaoMing = { name : 'xiaoMing', hello : function(){ console.log( ’Hello, my name is ’+ this.name + ’.’); }}var liLei = { name : 'liLei', hello : function(){ console.log( ’Hello, my name is ’+ this.name + ’.’); }}
使用過 java 的同學，可能第一眼就想到了用面向對象來解決這個問題。創造一個 Person 的類，然后實例化 xiaoMing 和 liLei 兩個對象。在 ES6 中也有類似于 java 中類的概念： class 。
下面使用 ES6 的語法，用面向對象的思路來重構上面的代碼。
class Person { constructor(name){ this.name = name } hello(){ console.log(this.name); }}var xiaoMing = new Person(’xiaoMing’);var liLei = new Person(’liLei’);
可以看到，使用類創建對象，達到了重用的目的。它基于的邏輯是，兩個或多個對象的結構功能類似，可以抽象出一個模板，依照模板復制出多個相似的對象。
使用類創建對象，就像自行車制造商一遍一遍地重用相同的藍圖來制造大量的自行車。
然解決重用問題的方案，當然不止一種。傳統面向對象的類，只是其中的一種方案。下面輪到我們的主角“原型繼承”登場了，它從另一個角度解決了重用的問題。
原型繼承的原理 原型對象javaScript 中的 object 由兩部分組成，普通屬性的集合，和原型屬性。
var o = { a : ’a’, ... __proto__: prototypeObj}
普通屬性指的就是 a ； 原型屬性 指的是 __proto__ 。這本不屬于規范的一部分，后來 chrome 通過 __proto__ 將這個語言底層屬性給暴露出來了，慢慢的被大家所接受，也就添加到 ES6 規范中了。 o.__proto__ 的值 prototypeObj 也就是 原型對象 。原型對象其實也就是一個普通對象，之所以叫原型對象的原因，只是因為它是原型屬性所指的值。
原型對象所以特殊，是因為它擁有一個普通對象沒有的能力：將它的屬性共享給其他對象。
在 ES6 規范 中，對它是如下定義的：
object that provides shared properties for other objects 屬性讀操作
回到最開始的例子，看看如何利用原型繼承實現重用的目的。
var prototypeObj = { hello: function(){ console.log( ’Hello, my name is ’+ this.name + ’.’); } // ...}var xiaoMing = { name : 'xiaoMing', __proto__ : prototypeObj}var liLei = { name : 'liLei', __proto__ : prototypeObj}xiaoMing.hello(); // Hello, my name is xiaoMing.liLei.hello(); // Hello, my name is liLei.
xiaoMing liLei 對象上，并沒直接擁有 hello 屬性(方法)，但是卻能讀取該屬性(執行該方法)，這是為什么？
想象一個場景，你在做數學作業，遇到一個很難的題目，你不會做。而你有一個好兄弟，數學很厲害，你去請教他，把這道題做出來了。
xiaoMing 對象上，沒有 hello 屬性，但是它有一個好兄弟， prototypeObj 。屬性讀操作，在 xiaoMing 身上沒有找到 hello 屬性，就會去問它的兄弟 prototypeObj 。所以 hello 方法會被執行。
原型鏈還是做數學題的例子。你的數學題目很難，你的兄弟也沒有答案，他推薦你去問另外一個同學。這樣直到有了答案或者再也沒有人可以問，你就不會再問下去。這樣就好像有一條無形鏈條把你和同學們牽在了一起。
在 JS 中，讀操作通過 __proto__ 會一層一層鏈下去的結構，就叫 原型鏈 。
var deepPrototypeObj = { hello: function(){ console.log( ’Hello, my name is ’+ this.name + ’.’); } __proto__ : null}var prototypeObj = { __proto__ : deepPrototypeObj}var xiaoMing = { name : 'xiaoMing', __proto__ : prototypeObj}var liLei = { name : 'liLei', __proto__ : prototypeObj}xiaoMing.hello(); // Hello, my name is xiaoMing.liLei.hello(); // Hello, my name is liLei. 原型繼承的實現
在上面的例子中，通過直接修改了 __proto__ 屬性值，實現了原型繼承。但是在實際生產中，
代替的方式是使用 Object.create() 方法。
調用 Object.create() 方法會創建一個新對象，同時指定該對象的原型對象為傳入的第一個參數。
我們將上面的例子改一下。
var prototypeObj = { hello: function(){ console.log( ’Hello, my name is ’+ this.name + ’.’); } // ...}var xiaoMing = Object.create(prototypeObj);var liLei = Object.create(prototypeObj);xiaoMing.name = 'xiaoMing';liLei.name = 'liLei';xiaoMing.hello(); // Hello, my name is xiaoMing.liLei.hello(); // Hello, my name is liLei.
You-Dont-Know-JS 的作者，對這種原型繼承的實現取了一個很好玩的名字 OLOO (objects-linked-to-other-objects) ，這種實現方式的優點是沒有使用任何類的概念，只有 object ，所以它是很符合 javaScript 的特性的。
因為JS 中本無類，只有 object 。
無奈的是，喜歡類的程序員是在太多，所以在 ES6 新增了 class 概念。下一篇會講 class 在 JS 中的實現原理
小結類創建對象，達到了重用的目的。它基于的邏輯是，兩個或多個對象的結構功能類似，可以抽象出一個模板，依照模板 復制 出多個相似的對象。就像自行車制造商一遍一遍地重用相同的藍圖來制造大量的自行車。
使用原型繼承，同樣可以達到重用的目的。它基于的邏輯是，兩個或多個對象的對象有一部分共用屬性，可以將共用的屬性抽象到另一個獨立公共對象上，通過特殊的原型屬性，將公共對象和普通對象鏈接起來，再利用屬性讀(寫)規則進行遍歷查找，實現屬性 共享 。
來自：https://segmentfault.com/a/1190000008293372
相關文章：
網公網安備