JavaScript new 的原理详解

前言

我们经常这样创建对象：

function Person(name) {
  this.name = name;
}

const p = new Person('Tom');

但是很多人只是会用new，却不知道它背后做了什么。

本文就来讲清楚：

执行new的时候，JavaScript 到底做了哪些事情？

---

一、new 的作用

new主要用于：

• 创建一个新的对象
• 让这个对象继承构造函数的原型
• 执行构造函数
• 返回新对象

---

二、new 的执行过程

执行：

const p = new Person('Tom');

大致会经历下面几步：

1）创建一个新的空对象

const obj = {};

2）让空对象的隐式原型指向构造函数的 prototype

obj.__proto__ = Person.prototype;

3）用新对象作为 this 执行构造函数

Person.call(obj, 'Tom');

4）返回这个对象

return obj;

---

三、模拟实现一个 new

function myNew(fn, ...args) {
  const obj = Object.create(fn.prototype);
  const result = fn.apply(obj, args);
  return typeof result === 'object' && result !== null ? result : obj;
}

使用：

function Person(name) {
  this.name = name;
}

const p = myNew(Person, 'Tom');
console.log(p.name); // Tom

---

四、为什么要链接原型？

因为这样实例对象才能访问构造函数原型上的方法。

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function () {
  console.log(`你好，我是 ${this.name}`);
};

const p = new Person('Tom');
p.sayHello();

如果不建立这个原型关系，实例就访问不sayHello()。

---

五、总结

new的原理可以概括成四步：

1. 创建空对象
2. 链接原型
3. 执行构造函数
4. 返回对象

只要记住这四步，new的本质就很清楚了。