JavaScript之new运算符原理

1. 定义

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例

先来看一段代码：

  function Person(name) {
    this.name = name;
  }
  Person.prototype.show = () => this.name;

  const p1 = new Person('zhangsan');
  console.log(p1); // Person {name: "zhangsan"}
  // 访问构造函数里的属性
  console.log(p1.name); // zhangsan
  // 访问构造函数原型里的方法
  console.log(p1.show()); // zhangsan
  // 实例原型指向构造函数的原型对象
  console.log(p1.__proto__ == Person.prototype); // true

从上面代码可以知道，实例 person 可以：

• 访问到 Person 构造函数里的属性
• 访问到 Person.prototype 中的属性
• 实例原型就是构造函数的原型对象

这个是最基本的了，也是new一个对象就知道的特点

2. 其他特点

当构造函数中没有返回值时，new一个对象会返回一个新的对象，如果构造函数有返回值呢？

2-1. 构造函数返回基本数据类型

function Person(name) {
  this.name = name;
  // return 111 // number
  // return '111' // string
  // ...
  return true // boolean
}
Person.prototype.show = () => this.name;

const p1 = new Person('zhangsan');
console.log(p1); // Person {name: "zhangsan"}

从打印结果可知：和没有return效果一样

2-2. 构造函数返回引用类型

function Person(name) {
 this.name = name;
  // return {name: 111} // object
  // return [] // array
  // ...
  // return () => 111 // fucntion
}
Person.prototype.show = () => this.name;

const p1 = new Person('zhangsan');
console.log(p1); 
// {name: 111}
// []
// () => 111

从打印结果可知：最后返回 return 后面的对象

3. new运算符原理

1. 创建一个空对象
2. 对象的原型指向传人构造函数的原型对象
3. 执行构造函数中的代码，为这个新对象添加属性
4. 如果构造函数代码执行后没有返回值或者返回值为基础数据类型，则返回创建的对象，否则返回执行结果

4. 模拟实现(白话说明)

function myNew() {
  // 因为new出来是一个对象，所以先创建一个空的对象
  const obj = new Object();

  // 获取传入的构造函数
  // 为何要操作这一步？该段代码的精髓在于：
  // 1、获取了构造函数 
  // 2、修改了arguments将构造函数参数和其他参数区分了开来，为之后的执行构造函数提供了便利
  const Constructor = [].shift.call(arguments); // Array.shift() 删除数组第一个元素，修改原数组，并返回删除的元素

  // 将obj原型指向构造函数原型对象，obj 可以访问到构造函数原型对象中的属性
  // 为何要改变原型指向？
  // 打印new出来的对象的原型，你会发现该原型等同于构造函数的原型对象
  // 为什么一会是.__proto__一会又是.prototype？
  // 简单说对象用.__proto__，函数用.prototype，具体讲解见最后参考
  obj.__proto__ = Constructor.prototype; 

  // 绑定 this 实现继承，现在obj 可以访问到构造函数中的属性
  // 该段代码的精髓在于：
  // 即为obj新增了属性又可以拿到构造函数的返回值
  // 如 this.name = name =》obj.name = name;
  // 获取构造函数返回值之后就可以用于决定我们最后的输出
  const ret = Constructor.apply(obj, arguments); // 这里就体现了[].shift.call(arguments)这段代码的好处

  // 优先返回构造函数返回的对象
  // ret为构造函数的返回值，如果它为引用数据类型则直接返回，否则就返回内部创建的对象
  return ret instanceof Object ? ret : obj;
}

5. 测试

function Person(name) {
 this.name = name;
}
Person.prototype.show = () => this.name;

const p1 = new Person('zhangsan');
console.log(p1); // Person {name: "zhangsan"}

function myNew() {
  const obj = new Object();
  const Constructor = [].shift.call(arguments);
  obj.__proto__ = Constructor.prototype; 
  const ret = Constructor.apply(obj, arguments);
  return ret instanceof Object ? ret : obj;
}
const p2 = myNew(Person, 'lisi');
console.log(p2); // Person {name: "lisi"}
console.log(p1.__proto__ == p2.__proto__); // true

完工！

6. 参考

帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）
深入理解JavaScript之 new 原理及模拟实现