和其他高級語言一樣 JavaScript 也有 new 操作符，我們知道 new 可以用來實例化一個類，從而在內存中分配一個實例對象。 但在 JavaScript 中，萬物皆對象，為什么還要通過 new 來產生對象？ 帶着這個問題，我們一步步來分析和理解 new 的一些特性：
認識 new 操作符
function Animal(name){
this.name = name;
}
Animal.color = "black";
Animal.prototype.say = function(){
console.log("I'm " + this.name);
};
var cat = new Animal("cat");
console.log(
cat.name, //cat
cat.height //undefined
);
cat.say(); //I'm cat
console.log(
Animal.name, //Animal
Animal.color //back
);
Animal.say(); //Animal.say is not a function
代碼解讀如下：
L1-3： 創建了一個函數Animal，並在其 this 上定義了屬性：name，name的值是函數被執行時的形參。
L4 ： 在 Animal 對象（Animal本身是一個函數對象）上定義了一個靜態屬性:color,並賦值“black”
L5-7：在 Animal 函數的原型對象 prototype 上定義了一個 say() 方法，say方法輸出了 this 的 name 值。
L8： 通過 new 關鍵字創建了一個新對象 cat
L10-14： cat 對象嘗試訪問 name 和 color 屬性，並調用 say 方法。
L16-20： Animal 對象嘗試訪問 name 和 color 屬性，並調用 say 方法。
剖析 new 的內部原理
第8行代碼是關鍵：
var cat = new Animal("cat");
Animal 本身是一個普通函數，但當通過new來創建對象時，Animal 就是構造函數。
JS引擎執行這句代碼時，在內部做了很多工作，用偽代碼模擬其內部流程如下：
new Animal('cat') = {
var obj = {};
obj.__proto__ = Animal.prototype;
var result = Animal.call(obj,"cat");
return typeof result === 'object'? result : obj;
}
將上述流程分為 4 個步驟來理解：
【1】創建一個空對象 obj；
【2】把 obj 的__proto__ 指向構造函數 Animal 的原型對象 prototype，此時便建立了 obj 對象的原型鏈：obj->Animal.prototype->Object.prototype->null
【3】在 obj 對象的執行環境調用 Animal 函數並傳遞參數 “ cat ” 。 相當於 var result = obj.Animal("cat")。
當這句執行完之后，obj 便產生了屬性 name 並賦值為 "cat"。關於 call 的用法請參考：深入理解 call、apply 和 bind
【4】考察第 3 步的返回值，如果無返回值 或者 返回一個非對象值，則將 obj 作為新對象返回；否則會將 result 作為新對象返回。
根據以上過程，我們發現 cat 其實就是【4】的返回值，因此我們對 cat 對象的認知就多了一些：
- cat 的原型鏈是：cat->Animal.prototype->Object.prototype->null
- cat上新增了一個屬性：name
分析完了 cat 的產生過程，我們再分析一下輸出結果：
- cat.name - 在【3】中，obj 對象就產生了 name 屬性。因此 cat.name 就是這里的 obj.name
- cat.color - cat 對象先查找自身的 color，沒有找到便會沿着原型鏈查找，在上述例子中，我們僅在 Animal 對象上定義了 color，並沒有在其原型鏈上定義，因此找不到。
- cat.say - cat會先查找自身的 say 方法，沒有找到便會沿着原型鏈查找，在上述例子中，我們在 Animal 的 prototype 上定義了say，因此在原型鏈上找到了say 方法。
另外，在 say 方法中還訪問 this.name，這里的 this 指的是其調用者 obj，因此輸出的是 obj.name 的值。
對於Animal來說，它本身也是一個對象，因此它在訪問屬性和方法時也遵守上述查找規則，所以：
- Animal.color > " black "
- Animal.name > " Animal "
- Animal.say() > Animal.say is not a function
需要注意的是，Animal 先查找自身的 name，找到了 name，但這個 name 並不是我們定義的 name，而是函數對象內置的屬性，一般情況下，函數對象在產生時會內置 name 屬性並將函數名作為賦值（僅函數對象）。
另外，Animal 在自身沒有找到 say() 方法，也會沿着其原型鏈查找，Animal 的原型鏈如下所示：
Animal 的原型鏈： Animal->Function.prototype->Object.prototype->null
由於 Animal 的原型鏈上也沒有定義 say 方法，因此返回異常提示。
探索 new 的意義
對 new 運算符有了較深入的理解之后，我們再回到開篇提到的問題：在JavaScript 中，萬物皆對象，為什么還要通過 new 來產生對象？
要弄明白這個問題，我們首先要搞清楚 cat 和 Animal 的關系：
【1】cat 繼承了 Animal 對象
通過上面的分析我們發現， cat 通過原型鏈繼承了 Animal 中的部分屬性，因此我們可以簡單的認為：Animal 和 cat 是繼承關系。
【2】cat 是 Animal 的實例
cat 是通過 new 產生的對象，那么 cat 到底是不是 Animal 的實例對象？ 我們先來了解一下JS是如何來定義實例對象：
A instanceof B
如果上述表達式為 true，JavaScript 認為 A 是 B 的實例對象，我們用這個方法來判斷一下 cat 和 Animal 。
cat instanceof Animal; //true
從結果看，cat 確實是 Animal 實例，要想更加證實這個結果，我們再來了解一下 instanceof 的內部原理：
var L = A.__proto__;
var R = B.prototype;
if(L === R)
return true;
如果 A 的__proto__ 等價於 B 的 prototype，就返回 true 。
在 new 的執行過程【2】中，cat 的 __proto__ 指向了Animal 的 prototype，所以 cat 和 Animal 符合 instanceof 的判斷結果。
因此，通過 new 創建的 對象 和 構造函數 之間建立了一條原型鏈，原型鏈的建立，讓原本孤立的對象有了依賴關系和繼承能力，讓JavaScript 對象能以更合適的方式來映射真實世界里的對象，這是面向對象的本質。
實戰演練
下面是一個經典例子，涉及 new 、this、以及原型鏈相關問題，請看代碼：
function Foo(){
getName = function(){
console.log(1)
}
return this;
}
Foo.getName = function(){
console.log(2)
}
Foo.prototype.getName = function(){
console.log(3)
}
var getName = function(){
console.log(4)
}
function getName(){
console.log(5)
}
// ouput:
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();
原創發布 by @一像素 2015.12