JS中的new運(yùn)算符，從一個(gè)自定義對(duì)象類型或者包含constructor構(gòu)建函數(shù)的內(nèi)建對(duì)象類型中實(shí)例化一個(gè)對(duì)象。JS中已經(jīng)“萬(wàn)物皆對(duì)象”。為什么還要存在實(shí)例化的操作呢？

首先，先看一段代碼：

function Animal(name) {
  this.name = name
}
Animal.color = 'black'
Animal.say = function () {
  console.log('it is an ' + this.name)
}
Animal.prototype.say = function () {
  console.log('i am a ' + this.name)
}

var cat = new Animal('cat')
console.log(
  cat.name,  // cat
  cat.height  // undefined
)
cat.say()  // i am a cat
console.log(
  Animal.name, //Animal
  Animal.color //black
);
Animal.say(); //it is an Animal

1. 首先定義了一個(gè)函數(shù)對(duì)象Animal。作為函數(shù)對(duì)象，Animal擁有原型對(duì)象prototype，prototype中擁有一個(gè)constructor函數(shù)，指向Animal函數(shù)自身。
2. 給Animal函數(shù)對(duì)象添加了一個(gè)color屬性，賦值為black
3. 給Animal函數(shù)對(duì)象添加了一個(gè)say方法，該方法，讀取當(dāng)前調(diào)用的this對(duì)象中的name屬性，打印字符串。
4. 給Ainimal的原型對(duì)象添加一個(gè)say的方法，該方法，讀取當(dāng)前調(diào)用的this對(duì)象中的name屬性，打印字符串。
5. 通過new，從Animal函數(shù)對(duì)象中創(chuàng)建一個(gè)實(shí)例，將其賦值為變量cat
6. 打印新建cat對(duì)象中的兩個(gè)屬性，name和height，分別打印為cat和undefined
7. 調(diào)用cat對(duì)象的say方法，將cat對(duì)象作為this傳遞到Animal.prototype.say函數(shù)中，并執(zhí)行打印輸出
8. 打印Animal函數(shù)對(duì)象中的兩個(gè)屬性，name和color，分別打印為Animal和black。其中的name屬性是從Function.prototype上繼承而來(lái)，color是Animal函數(shù)對(duì)象的自有屬性。
9. 調(diào)用Animal函數(shù)對(duì)象的say方法，將Animal函數(shù)對(duì)象作為this傳遞到Animal.say函數(shù)中，并執(zhí)行打印輸出

關(guān)于Animal，以及Animal的say，name屬性的調(diào)用，都可以從函數(shù)對(duì)象的原型鏈的繼承上得到解釋。它的原型鏈?zhǔn)?/p>

Animal->Function.prototype->Object.prototype->null

我們重點(diǎn)關(guān)注下

var cat = new Animal('cat')

當(dāng)JS中使用new操作符 添加到一個(gè)函數(shù)對(duì)象的前面并執(zhí)行調(diào)用的時(shí)候。函數(shù)對(duì)象起到了一個(gè)自定義對(duì)象的constructor，也既構(gòu)建函數(shù)的作用。
JS的new本身是一個(gè)“語(yǔ)法糖”，當(dāng)JS解釋器碰到new的時(shí)候，它會(huì)按照下面的偽代碼執(zhí)行：

// var cat = new Animal('cat')
var cat = (function () {
  let obj = {}
  obj.__proto__ = Animal.prototype
  let result = Animal.call(obj, 'cat')
  return (typeof result == 'object') ? result : obj
})()

將其轉(zhuǎn)成規(guī)則，則new所起到的作用流程如下：

1. 首先憑空創(chuàng)建一個(gè)空對(duì)象obj
2. 把 obj 的proto 指向構(gòu)造函數(shù) Animal 的原型對(duì)象 prototype，此時(shí)便建立了 obj 對(duì)象的原型鏈：obj->Animal.prototype->Object.prototype->null
3. 在 obj 對(duì)象的執(zhí)行環(huán)境調(diào)用 Animal 函數(shù)并傳遞參數(shù) “ cat ” 。 相當(dāng)于 var result = obj.Animal("cat")。這句話，將this指向新創(chuàng)建的obj對(duì)象。并執(zhí)行構(gòu)建函數(shù)Animal。當(dāng)這句執(zhí)行完之后，obj 便產(chǎn)生了屬性 name 并賦值為 "cat"。關(guān)于 call 的用法請(qǐng)參考：深入理解 call、apply 和 bind
4. 考察第 3 步的返回值，如果無(wú)返回值 或者 返回一個(gè)非對(duì)象值，則將 obj 作為新對(duì)象返回；否則會(huì)將 result 作為新對(duì)象返回。

此時(shí)cat的原型鏈?zhǔn)?/p>

cat -> Animal.prototype -> Object.prototype -> null

為什么要使用new來(lái)創(chuàng)建對(duì)象呢？

new的出現(xiàn)，讓JS擁有了對(duì)象的繼承能力，從例子中看到，通過new，成功在cat和Animal之間建立了繼承的關(guān)系。cat可以調(diào)用Animal的原型對(duì)象上的方法。

通過 new 創(chuàng)建的 對(duì)象 和 構(gòu)造函數(shù) 之間建立了一條原型鏈，原型鏈的建立，讓原本孤立的對(duì)象有了依賴關(guān)系和繼承能力，讓JavaScript 對(duì)象能以更合適的方式來(lái)映射真實(shí)世界里的對(duì)象，這是面向?qū)ο蟮谋举|(zhì)。

測(cè)試下

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();

1. Foo.getName(): 調(diào)用Foo函數(shù)對(duì)象的getName方法，此時(shí)打印 2
2. getName(); 調(diào)用全局的getName方法。JS代碼執(zhí)行分為兩個(gè)階段，具體參考執(zhí)行上下文的文章，首先在代碼為執(zhí)行前，getName指的是打印 5 的函數(shù)聲明，但在執(zhí)行到此時(shí)的時(shí)候，上面 getName 全局變量的執(zhí)行，將getName的賦值指向了 打印4 的函數(shù)。因此此時(shí)打印 4
3. Foo().getName(); 將Foo函數(shù)執(zhí)行后返回的對(duì)象作為this，并調(diào)用該this中包含的getName方法。首先，F(xiàn)oo()的調(diào)用是在全局作用域，因此return this 等價(jià)于 return window。Foo() == window。此時(shí)Foo().getName()變成了this.getName()。但此時(shí)并不等價(jià)于第二條，因?yàn)樵贔oo()執(zhí)行的過程中，在Foo函數(shù)內(nèi)部，對(duì)全局變量getName進(jìn)行了重新賦值，此時(shí)全局函數(shù)getName打印輸出 1
4. getName(); 此時(shí)的結(jié)果和上一條打印結(jié)果輸出相同，打印輸出 1
5. new Foo.getName(); 此時(shí)出現(xiàn)了new操作符，它將后面的函數(shù)Foo.getName作為了構(gòu)建函數(shù)，創(chuàng)建了一個(gè)新的實(shí)例，在創(chuàng)建的過程中，會(huì)執(zhí)行Foo.getName函數(shù)，因此此時(shí)輸出 2
6. new Foo().getName(); 此時(shí)出現(xiàn)了new操作符，根據(jù)就近原則，等價(jià)于(new Foo()).getName()。即先創(chuàng)建了Foo()對(duì)象的一個(gè)實(shí)例 obj = new Foo()。此時(shí)return的this等同于新建實(shí)例對(duì)象obj。接下來(lái)的調(diào)用變成了obj.getName，也既Foo.prototype.getName。打印輸出 3
7. new new Foo().getName(); 首先出現(xiàn)了兩次new操作符，而每次new操作符，都需要跟隨一個(gè)構(gòu)建函數(shù)的調(diào)用。在表達(dá)式中一共有兩次調(diào)用(函數(shù)的調(diào)用通過()實(shí)現(xiàn))。因此按照就近原則，表達(dá)式等價(jià)于 new (new Foo()).getName()。new Foo()，根據(jù)new的執(zhí)行原則，返回新建實(shí)例obj。此時(shí)等價(jià)于new obj.getName()。和第6條一樣。因此此時(shí)，打印輸出 3

最后打印順序?yàn)?2,4,1,1,2,3,3

參考鏈接：
https://zhuanlan.zhihu.com/p/23987456
https://stackoverflow.com/questions/1646698/what-is-the-new-keyword-in-javascript
https://www.cnblogs.com/onepixel/p/5043523.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new