JavaScript原型繼承工作原理
JavaScript采用原型繼承這事兒是眾所皆知的，但由于它默認只提供了一個實現(xiàn)的實例，也就是 new 運算符，因此對于它的解釋總是令人困惑。這篇文章旨在闡明什么是原型繼承以及在JavaScript中究竟如何使用原型繼承。
原型繼承的定義
當你閱讀關(guān)于JS原型繼承的解釋時，你時常會看到以下這段文字：
| 當查找一個對象的屬性時，JavaScript 會向上遍歷原型鏈，直到找到給定名稱的屬性為止。——出自JavaScript秘密花園 |
大多數(shù)JavaScript的實現(xiàn)用 __proto__ 屬性來表示一個對象的原型鏈。在這篇文章里我們將看到 __proto__與 prototype 的區(qū)別何在。
注：__proto__ 是一個不應在你代碼中出現(xiàn)的非正規(guī)的用法，這里僅僅用它來解釋JavaScript原型繼承的工作原理。
以下代碼展示了JS引擎如何查找屬性：
- function getProperty(obj, prop) {
- if (obj.hasOwnProperty(prop))
- return obj[prop]
- else if (obj.__proto__ !== null)
- return getProperty(obj.__proto__, prop)
- else
- return undefined
- }
讓我們舉一個常見的例子：二維點，擁有二維坐標 x y ，同似擁有一個 print 方法。
用之前我們說過的原型繼承的定義，我們創(chuàng)建一個對象 Point ，擁有三個屬性：x，y 和 print 。為了能創(chuàng)建一個新的二維點，我們需要創(chuàng)建一個新的對象，讓他其中的 __proto__ 屬性指向 Point ：
- var Point = {
- x: 0,
- y: 0,
- print: function () { console.log(this.x, this.y); }
- };
- var p = {x: 10, y: 20, __proto__: Point};
- p.print(); // 10 20
JavaScript怪異的原型繼承
令人困惑的是，每個教授原型繼承的人都不會給出這樣一段代碼，反而會給出下面這樣的代碼：
- function Point(x, y) {
- this.x = x;
- this.y = y;
- }
- Point.prototype = {
- print: function () { console.log(this.x, this.y); }
- };
- var p = new Point(10, 20);
- p.print(); // 10 20
這和說好的不一樣啊，這里 Point 變成了函數(shù)，然后還有個什么 prototype 的屬性，而且有了 new 運算符。這他喵的是什么情況？
new 運算符是如何工作的
造物者 Brendan Eich 想讓JS和傳統(tǒng)的面向?qū)ο蟮木幊陶Z言差不太多，如Java和C++。在這些語言里，我們采用 new 運算符來給類實例化一個新的對象。所以他在JS里寫了一個 new 運算符。
- C++里有用來初始化實例屬性的構(gòu)造函數(shù)概念，因此
new運算符必須針對函數(shù)。 - 我們需要將對象的方法放到一個地方去，既然我們在用原型語言，我們就把它放到函數(shù)的原型屬性中去。
new 運算符接受一個函數(shù) F 及其參數(shù)：new F(arguments...)。這一過程分為三步：
- 創(chuàng)建類的實例。這步是把一個空的對象的
__proto__屬性設置為F.prototype。 - 初始化實例。函數(shù)
F被傳入?yún)?shù)并調(diào)用，關(guān)鍵字this被設定為該實例。 - 返回實例。
現(xiàn)在我們知道了 new 是怎么工作的，我們可以用JS代碼實現(xiàn)一下：
- function New (f) {
- var n = { '__proto__': f.prototype }; /*第一步*/
- return function () {
- f.apply(n, arguments); /*第二步*/
- return n; /*第三步*/
- };
- }
一個小小的例子來看一下他的工作狀況：
- function Point(x, y) {
- this.x = x;
- this.y = y;
- }
- Point.prototype = {
- print: function () { console.log(this.x, this.y); }
- };
- var p1 = new Point(10, 20);
- p1.print(); // 10 20
- console.log(p1 instanceof Point); // true
- var p2 = New (Point)(10, 20);
- p2.print(); // 10 20
- console.log(p2 instanceof Point); // true
JavaScript中真正的原型繼承
JS的ECMA規(guī)范只允許我們采用 new 運算符來進行原型繼承。但是大宗師 Douglas Crockford 卻發(fā)現(xiàn)了一種可以利用 new 來實現(xiàn)真正的原型繼承的方式！他寫下了 Object.create 函數(shù)如下：
- Object.create = function (parent) {
- function F() {}
- F.prototype = parent;
- return new F();
- };
這看起來蠻奇怪的，但卻是相當?shù)暮啙崳核鼊?chuàng)建了新的對象，并將其原型設置為你想設置的任意值。如果我們允許使用 __proto__ ，那我們也可以這樣寫：
- Object.create = function (parent) {
- return { '__proto__': parent };
- };
下面這段代碼就是讓我們的 Point 采用真正的原型繼承：
- var Point = {
- x: 0,
- y: 0,
- print: function () { console.log(this.x, this.y); }
- };
- var p = Object.create(Point);
- p.x = 10;
- p.y = 20;
- p.print(); // 10 20
結(jié)論
我們已經(jīng)了解了JS原型繼承是什么，以及JS如何用特定的方式來實現(xiàn)之。然而使用真正的原型繼承（如 Object.create 以及 __proto__）還是存在以下缺點：
- 標準性差：
__proto__不是一個標準用法，甚至是一個不贊成使用的用法。同時原生態(tài)的Object.create和道爺寫的原版也不盡相同。 - 優(yōu)化性差： 不論是原生的還是自定義的
Object.create，其性能都遠沒有new的優(yōu)化程度高，前者要比后者慢高達10倍。
附圖，ECMA中的原型繼承解釋圖：
