編寫Javascript的開發者都知道，JS雖然沒有類(ES6添加了class語法)，但是可以模擬出OOP語言的類和麵向對象的概念，比如我們都知道的一句話，Javascript中處處是對象，而面向對象語言的特性是繼承，封裝，多態，抽象，而本文討論的是Javascript的繼承，Javascript的 ...
編寫Javascript的開發者都知道，JS雖然沒有類(ES6添加了class語法)，但是可以模擬出OOP語言的類和麵向對象的概念，比如我們都知道的一句話，Javascript中處處是對象，而面向對象語言的特性是繼承，封裝，多態，抽象，而本文討論的是Javascript的繼承，Javascript的繼承方式有原型繼承，組合繼承，寄生繼承等等，在日常開發中，哪種繼承方式更好用在於開發者對於程式的結果以及性能的考慮。筆者在下麵列舉出原型繼承中經常容易被忽略的錯誤。
常見錯誤一:
function Fa(name){ this.name=name; } Fa.prototype.myname=function(){ //設置Fa的原型方法 console.log(this.name); } function Son(name){ Fa.call(this,name); //將Fa的this顯示綁定給Son,這裡的this顯示綁定機制後續筆者會更新 } Son.prototype=Fa.prototype; //將son的原型對象引用到fa的原型對象，其實就是c++裡面的指針概念,直接指向fa的原型 //註意!!!!!：當你修改Son.prototype的constructor時
// Son.prototype.constructor=Son; // 這樣會導致Fa創建出來的對象的constructor也指向了Son,會使對象的類型變的很混亂 Son.prototype.sayhello=function(){ //設置son的原型方法 console.log("this is son"); } //創建對象 var son=new Son("son"); son.sayhello(); //"this is son" console.log(son); var fa=new Fa("fa"); fa.sayhello(); //"this is son" console.log(fa); //這裡發現在由Fa創建的對象中也存在sayhello方法，這是因為son.prototype直接引用了Fa.prototype // Son.prototype=Fa.prototype; 並不會創建一個關聯到 Son.prototype 的新對象，它只 //是讓 Son.prototype 直接引用 Fa.prototype 對象。因此當你執行類似 Son.prototype. //sayhello = ... 的賦值語句時也會直接修改 Fa.prototype 對象本身。顯然這不是你想要的結 //果，否則你根本不需要 Son 對象，直接使用 Fa就可以了，這樣一來代碼也會更簡單一些。
常見錯誤二:
function Fa(name){ this.name=name; } Fa.prototype.myname=function(){ console.log(this.name); } function Son(name){ Fa.call(this,name); } Son.prototype=new Fa("fa"); //調用Fa的構造函數new一個新的對象關聯給Son.prototype Son.prototype.sayhello=function(){ console.log("this is son"); } var son=new Son("son"); console.log(son); son.myname(); //son var fa=new Fa("fa"); console.log(fa); fa.sayhello(); //這裡會報錯。Uncaught TypeError: fa.sayhello is not a function //我們發現在son的原型創建的方法並沒有影響到Fa的原型。但是在Son.prototype = new Fa()後， // var son=new Son("son");我們輸出son.name的值為son,在原型上有一個Fa實例對象，這個實例對象也有name屬性 //而輸出son是因為原型鏈上的隱式屏蔽，這一層的屬性會屏蔽上一層相同屬性的值。 // Son.prototype = new Fa() 的確會創建一個關聯到 Son.prototype 的新對象。但是它使用 //了 Fa(..) 的“構造函數調用”，如果函數 Foo 有一些副作用（比如寫日誌、修改狀態、註 //冊到其他對象、給 this 添加數據屬性，等等）的話，就會影響到 Son() 的“後代”，後果 //不堪設想 也會讓原型變的臃腫
正確做法：
function Fa(name){ this.name=name; } Fa.prototype.myname=function(){ console.log(this.name); } function Son(name){ Fa.call(this,name); }
Son.prototype=Object.create(Fa.prototype); //註意這一句 //當修改son的原型時。son的constructor也會指向fa,這裡需要手動修改constructor //ES6方法 屬性描述符 //IE8以下不相容 Object.defineProperty(Son.prototype,"constructor",{ writable:true, //讀寫屬性 ，為false時為只讀，外界無法修改 configurable:true, //配置屬性，為false時，外界無法刪除該屬性，比如delete Son.prototype.constructor會失效 在嚴格模式下會報錯
enumerable:false, //枚舉屬性，此時為false,在外界的for in訪問方法不會列舉出該屬性，為true時反之； value:Son //將constructor關聯到Son }); var son=new Son("son"); console.log(son); son.myname(); console.log(son instanceof Son); //true // 這段代碼的核心部分就是語句 son.prototype = Object.create( fa.prototype ) 。調用 // Object.create(..) 會憑空創建一個“新”對象並把新對象內部的 Prototype 關聯到你 // 指定的對象（本例中是 fa.prototype ）。 // 換句話說，這條語句的意思是：“創建一個新的 son.prototype 對象並把它關聯到 fa. // prototype ”。
這裡我們對比一下三個方法：
和你想要的機制不一樣！
Son.prototype = Fa.prototype;
基本上滿足你的需求，但是可能會產生一些副作用 :(
Son.prototype = new Fa();
使用 Object.create(..) 而不是使用具有副
作用的 Fa(..) 。這樣做唯一的缺點就是需要創建一個新對象然後把舊對象拋棄掉，不能
直接修改已有的預設對象。
如果能有一個標準並且可靠的方法來修改對象的 Prototype關聯就好了。在 ES6 之前，
我們只能通過設置 .__proto__ 屬性來實現，但是這個方法並不是標準並且無法相容所有瀏
覽器。ES6 添加了輔助函數 Object.setPrototypeOf(..) ，可以用標準並且可靠的方法來修
改關聯。
ES6 之前需要拋棄預設的 Son.prototype
Son.ptototype = Object.create( Fa.prototype );
ES6 開始可以直接修改現有的 Son.prototype
Object.setPrototypeOf( Son.prototype,Fa.prototype );
如果忽略掉 Object.create(..) 方法帶來的輕微性能損失（拋棄的對象需要進行垃圾回收）
它實際上比 ES6 及其之後的方法更短而且可讀性更高。不過無論如何，這是兩種完
全不同的語法。
以上是筆者對於原型繼承中常常忽略的錯誤的總結以及更好的解決方法，至於寄生繼承之類的方法並不是本文討論的範圍，後續筆者也會更新寄生繼承的方法，如果忽視這些細節上的錯誤，對後續程式運行的結果也會產生一些不可預知的結果，細節決定成敗。
