#每日一题# new操作符做了什么？如何自己实现new操作符？

new操作符做了什么？

MDN给出的定义是：new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。 简单的说就是用来创建一个新实例。

在看《JS高级程序设计（第三版）》这本书时，P145是这样写到的。要创建Person的新实例，必须使用new操作符。以这种方式调用构造函数实际上会经历以下4个步骤：

1. 创建一个新对象；
2. 将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
3. 执行构造函数中的代码（为这个新对象添加属性）；
4. 返回新对象；

上面都提到了一个叫构造函数的东东，我先看一哈什么是构造函数？

构造函数

构造函数在技术上是常规函数。不过有两个约定：

1. 它们的命名以大写字母开头。
2. 它们只能由 “new” 操作符来执行。

例如：

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("Jack");

alert(user.name); // Jack
alert(user.isAdmin); // false

当一个函数被使用 new 操作符执行时，它按照以下步骤：

1. 一个新的空对象被创建并分配给 this。
2. 函数体执行。通常它会修改 this，为其添加新的属性。
3. 返回 this 的值。

换句话说，new User(...) 做的就是类似的事情：

function User(name) {
  // this = {};（隐式创建）

  // 添加属性到 this
  this.name = name;
  this.isAdmin = false;

  // return this;（隐式返回）
}

任何函数都可以用作构造器。即：任何函数都可以通过 new 来运行，它会执行上面的算法。“首字母大写”是一个共同的约定，以明确表示一个函数将被使用 new 来运行。

如何自己实现new操作符？

上面我给了两种解释来理解new操作符执行的过程，无非就干三件事：

1. 创建一个对象并返回
2. 修改该对象的this指向
3. 保证该对象拥有构造函数的所有属性（包括原型链上的）

在模拟 new 之前，先举个例子看看 new 具体实现了哪些功能。
例子：

// Otaku 御宅族，简称宅
function Otaku (name, age) {
    this.name = name;
    this.age = age;

    this.habit = 'Games';
}

// 因为缺乏锻炼的缘故，身体强度让人担忧(属性加在了显示原型上)
Otaku.prototype.strength = 60;

Otaku.prototype.sayYourName = function () {
    console.log('I am ' + this.name);
}

var person = new Otaku('Kevin', '18');

console.log(person.name) // Kevin
console.log(person.habit) // Games
console.log(person.strength) // 60

person.sayYourName(); // I am Kevin

从这个例子中，我们可以看到，实例 person 可以：

1. 访问到 Otaku 构造函数里的属性
2. 访问到 Otaku.prototype 中的属性

接下来，我们可以尝试着模拟一下了。

因为 new 是关键字，所以无法像 bind 函数一样直接覆盖，所以我们写一个函数，命名为 objectFactory，来模拟 new 的效果。用的时候是这样的：

function Otaku () {
    ……
}

// 使用 new
var person = new Otaku(……);
// 使用 objectFactory
var person = objectFactory(Otaku, ……)

初步实现

分析：

因为 new 的结果是一个新对象，所以在模拟实现的时候，我们也要建立一个新对象，假设这个对象叫 obj，因为 obj 会具有 Otaku 构造函数里的属性，想想经典继承的例子，我们可以使用 Otaku.apply(obj, arguments)来给 obj 添加新的属性。

我们知道实例的 proto 属性会指向构造函数的 prototype，也正是因为建立起这样的关系，实例可以访问原型上的属性。

现在，我们可以尝试着写第一版了：

// 第一版代码
function objectFactory() {

    var obj = new Object();//创建一个空的对象

    Constructor = [].shift.call(arguments);//获取到构造函数

    obj.__proto__ = Constructor.prototype;//将obj的隐式原型指向构造函数的显示原型，这样就可以访问到显示原型上的属性

    Constructor.apply(obj, arguments);//改变this指向

    return obj;

};

在这一版中，我们：

1. 用new Object() 的方式新建了一个对象 obj
2. 取出第一个参数，就是我们要传入的构造函数。此外因为 shift 会修改原数组，所以 arguments 会被去除第一个参数
3. 将 obj 的原型指向构造函数，这样 obj 就可以访问到构造函数原型中的属性
4. 使用 apply，改变构造函数 this 的指向到新建的对象，这样 obj 就可以访问到构造函数中的属性
5. 返回 obj

所以我们还需要判断返回的值是不是一个对象，如果是一个对象，我们就返回这个对象，如果没有，我们该返回什么就返回什么。
再来看第二版的代码，也是最后一版的代码：

// 第二版的代码
function objectFactory() {

    var obj = new Object(),

    Constructor = [].shift.call(arguments);

    obj.__proto__ = Constructor.prototype;

    var ret = Constructor.apply(obj, arguments);//用外部传入的构造器给obj设置属性

    return typeof ret === 'object' ? ret||obj : obj;//确保构造器总是返回一个对象
};

推荐一篇写的好的文章：能否模拟实现JS的new操作符

总结

/*new做了什么：

1.创建了一个全新的对象。
2.这个对象的隐式原型(__proto__)指向构造函数(构造器)的显式原型(prototype)。
3.将生成的新对象绑定到函数调用的this。(新创建的对象作为this的上下文)
4.如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调用会自动返回这个新的对象。
*/

/**
 * 模拟实现 new 操作符
 * @param  {Function} ctor [构造函数]
 * @return {Object|Function|Regex|Date|Error} [返回结果]
 */
function newOperator(ctor){
    if(typeof ctor !== 'function'){
      throw 'newOperator function the first param must be a function';
    }
    // ES6 new.target 是指向构造函数
    newOperator.target = ctor;
    //每个实例对象(object)都有一个私有属性(称之为 __proto__)指向它的构造函数的原型对象(prototype)。
    // 1.创建一个全新的对象
    // 2.并且执行__proto__链接
    // 通过new创建的每个对象的__proto__将最终被链接到这个函数的prototype对象上。
    // Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。
    var newObj = Object.create(ctor.prototype);
    // ES5 arguments转成数组 当然也可以用ES6 [...arguments], Aarry.from(arguments);
    // 获取除去ctor构造函数的其余参数(删除第一个参数)
    var argsArr = [].slice.call(arguments, 1);
    // 3.将生成的新对象绑定到函数调用的this。
    // 执行并获取到ctor函数的返回结果
    var ctorReturnResult = ctor.apply(newObj, argsArr);
    // 4.这些类型中合并起来只有Object和Function两种类型，因为 typeof null 也是'object'所以要不等于null，排除null
    var isObject = typeof ctorReturnResult === 'object' && ctorReturnResult !== null;
    var isFunction = typeof ctorReturnResult === 'function';
    if(isObject || isFunction){
        return ctorReturnResult;
    }
    // 5.如果ctor函数没有返回对象类型Object(包含Functoin,Array,Date,RegExg,Error)，那么new表达式中的函数调用会自动返回这个新的对象。
    return newObj;
}