摘要：使用指定的參數(shù)調(diào)用構(gòu)造函數(shù)，并將綁定到新創(chuàng)建的對(duì)象。由構(gòu)造函數(shù)返回的對(duì)象就是表達(dá)式的結(jié)果。情況返回以外的基本類型實(shí)例中只能訪問(wèn)到構(gòu)造函數(shù)中的屬性，和情況完全相反，結(jié)果相當(dāng)于沒(méi)有返回值。

new 運(yùn)算符創(chuàng)建一個(gè)用戶定義的對(duì)象類型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對(duì)象的實(shí)例。 ——（來(lái)自于MDN）

舉個(gè)栗子

function Car(color) {
    this.color = color;
}
Car.prototype.start = function() {
    console.log(this.color + " car start");
}

var car = new Car("black");
car.color; // 訪問(wèn)構(gòu)造函數(shù)里的屬性
// black

car.start(); // 訪問(wèn)原型里的屬性
// black car start

可以看出 new 創(chuàng)建的實(shí)例有以下 2 個(gè)特性

1、訪問(wèn)到構(gòu)造函數(shù)里的屬性

2、訪問(wèn)到原型里的屬性

ES6新增 symbol 類型，不可以使用 new Symbol()，因?yàn)?symbol 是基本數(shù)據(jù)類型，每個(gè)從Symbol()返回的 symbol 值都是唯一的。

Number("123"); // 123
String(123); // "123"
Boolean(123); // true
Symbol(123); // Symbol(123)

new Number("123"); // Number?{123}
new String(123); // String?{"123"}
new Boolean(true); // Boolean?{true}
new Symbol(123); // Symbol is not a constructor

當(dāng)代碼 new Foo(...) 執(zhí)行時(shí)，會(huì)發(fā)生以下事情：

一個(gè)繼承自 Foo.prototype 的新對(duì)象被創(chuàng)建。

使用指定的參數(shù)調(diào)用構(gòu)造函數(shù) Foo ，并將 this 綁定到新創(chuàng)建的對(duì)象。new Foo 等同于 new Foo()，也就是沒(méi)有指定參數(shù)列表，Foo 不帶任何參數(shù)調(diào)用的情況。

由構(gòu)造函數(shù)返回的對(duì)象就是 new 表達(dá)式的結(jié)果。如果構(gòu)造函數(shù)沒(méi)有顯式返回一個(gè)對(duì)象，則使用步驟1創(chuàng)建的對(duì)象。

new 是關(guān)鍵詞，不可以直接覆蓋。這里使用 create 來(lái)模擬實(shí)現(xiàn) new 的效果。

new 返回一個(gè)新對(duì)象，通過(guò) obj.__proto__ = Con.prototype 繼承構(gòu)造函數(shù)的原型，同時(shí)通過(guò) Con.apply(obj, arguments)調(diào)用父構(gòu)造函數(shù)實(shí)現(xiàn)繼承，獲取構(gòu)造函數(shù)上的屬性（【進(jìn)階3-3期】）。

實(shí)現(xiàn)代碼如下

// 第一版
function create() {
    // 創(chuàng)建一個(gè)空的對(duì)象
    var obj = new Object(),
    // 獲得構(gòu)造函數(shù)，arguments中去除第一個(gè)參數(shù)
    Con = [].shift.call(arguments);
    // 鏈接到原型，obj 可以訪問(wèn)到構(gòu)造函數(shù)原型中的屬性
    obj.__proto__ = Con.prototype;
    // 綁定 this 實(shí)現(xiàn)繼承，obj 可以訪問(wèn)到構(gòu)造函數(shù)中的屬性
    Con.apply(obj, arguments);
    // 返回對(duì)象
    return obj;
};

測(cè)試一下

// 測(cè)試用例
function Car(color) {
    this.color = color;
}
Car.prototype.start = function() {
    console.log(this.color + " car start");
}

var car = create(Car, "black");
car.color;
// black

car.start();
// black car start

完美！

不熟悉 apply / call 的點(diǎn)擊查看：【進(jìn)階3-3期】深度解析 call 和 apply 原理、使用場(chǎng)景及實(shí)現(xiàn)

不熟悉繼承的點(diǎn)擊查看：JavaScript常用八種繼承方案

上面的代碼已經(jīng)實(shí)現(xiàn)了 80%，現(xiàn)在繼續(xù)優(yōu)化。

構(gòu)造函數(shù)返回值有如下三種情況：

1、返回一個(gè)對(duì)象

2、沒(méi)有 return，即返回 undefined

3、返回undefined 以外的基本類型

情況1：返回一個(gè)對(duì)象

function Car(color, name) {
    this.color = color;
    return {
        name: name
    }
}

var car = new Car("black", "BMW");
car.color;
// undefined

car.name;
// "BMW"

實(shí)例 car 中只能訪問(wèn)到返回對(duì)象中的屬性。

情況2：沒(méi)有 return，即返回 undefined

function Car(color, name) {
    this.color = color;
}

var car = new Car("black", "BMW");
car.color;
// black

car.name;
// undefined

實(shí)例 car 中只能訪問(wèn)到構(gòu)造函數(shù)中的屬性，和情況1完全相反。

情況3：返回undefined 以外的基本類型

function Car(color, name) {
    this.color = color;
    return "new car";
}

var car = new Car("black", "BMW");
car.color;
// black

car.name;
// undefined

實(shí)例 car 中只能訪問(wèn)到構(gòu)造函數(shù)中的屬性，和情況1完全相反，結(jié)果相當(dāng)于沒(méi)有返回值。

所以需要判斷下返回的值是不是一個(gè)對(duì)象，如果是對(duì)象則返回這個(gè)對(duì)象，不然返回新創(chuàng)建的 obj對(duì)象。

所以實(shí)現(xiàn)代碼如下：

// 第二版
function create() {
    // 創(chuàng)建一個(gè)空的對(duì)象
    var obj = new Object(),
    // 獲得構(gòu)造函數(shù)，arguments中去除第一個(gè)參數(shù)
    Con = [].shift.call(arguments);
    // 鏈接到原型，obj 可以訪問(wèn)到構(gòu)造函數(shù)原型中的屬性
    obj.__proto__ = Con.prototype;
    // 綁定 this 實(shí)現(xiàn)繼承，obj 可以訪問(wèn)到構(gòu)造函數(shù)中的屬性
    var ret = Con.apply(obj, arguments);
    // 優(yōu)先返回構(gòu)造函數(shù)返回的對(duì)象
    return ret instanceof Object ? ret : obj;
};

問(wèn)題：用 JS 實(shí)現(xiàn)一個(gè)無(wú)限累加的函數(shù) add，示例如下：

add(1); // 1
add(1)(2);  // 3
add(1)(2)(3)； // 6
add(1)(2)(3)(4)； // 10 

// 以此類推

實(shí)現(xiàn)：

function add(a) {
    function sum(b) { // 使用閉包
        a = a + b; // 累加
        return sum;
     }
     sum.toString = function() { // 重寫(xiě)toString()方法
        return a;
    }
     return sum; // 返回一個(gè)函數(shù)
}

add(1); // 1
add(1)(2);  // 3
add(1)(2)(3)； // 6
add(1)(2)(3)(4)； // 10 

我們知道打印函數(shù)時(shí)會(huì)自動(dòng)調(diào)用 toString()方法，函數(shù) add(a) 返回一個(gè)閉包 sum(b)，函數(shù) sum() 中累加計(jì)算 a = a + b，只需要重寫(xiě)sum.toString()方法返回變量 a 就OK了。

JavaScript 深入之 new 的模擬實(shí)現(xiàn)
MDN 之 new 運(yùn)算符
MDN 之 Symbol
javascript 函數(shù) add(1)(2)(3)(4) 實(shí)現(xiàn)無(wú)限極累加

【進(jìn)階1期】 調(diào)用堆棧

【進(jìn)階2期】 作用域閉包

【進(jìn)階3期】 this全面解析

【進(jìn)階4期】 深淺拷貝原理

【進(jìn)階5期】 原型Prototype

【進(jìn)階6期】 高階函數(shù)

【進(jìn)階7期】 事件機(jī)制

【進(jìn)階8期】 Event Loop原理

【進(jìn)階9期】 Promise原理

【進(jìn)階10期】Async/Await原理

【進(jìn)階11期】防抖/節(jié)流原理

【進(jìn)階12期】模塊化詳解

【進(jìn)階13期】ES6重難點(diǎn)

【進(jìn)階14期】計(jì)算機(jī)網(wǎng)絡(luò)概述

【進(jìn)階15期】瀏覽器渲染原理

【進(jìn)階16期】webpack配置

【進(jìn)階17期】webpack原理

【進(jìn)階18期】前端監(jiān)控

【進(jìn)階19期】跨域和安全

【進(jìn)階20期】性能優(yōu)化

【進(jìn)階21期】VirtualDom原理

【進(jìn)階22期】Diff算法

【進(jìn)階23期】MVVM雙向綁定

【進(jìn)階24期】Vuex原理

【進(jìn)階25期】Redux原理

【進(jìn)階26期】路由原理

【進(jìn)階27期】VueRouter源碼解析

【進(jìn)階28期】ReactRouter源碼解析

進(jìn)階系列文章匯總?cè)缦拢瑑?nèi)有優(yōu)質(zhì)前端資料，覺(jué)得不錯(cuò)點(diǎn)個(gè)star。

https://github.com/yygmind/blog

我是木易楊，網(wǎng)易高級(jí)前端工程師，跟著我每周重點(diǎn)攻克一個(gè)前端面試重難點(diǎn)。接下來(lái)讓我?guī)阕哌M(jìn)高級(jí)前端的世界，在進(jìn)階的路上，共勉！