JavaScript new 做了什么

在学习JavaScript时，很多人会用到new关键字创建对象，但它到底做了什么，却常常说不清楚。其实只要结合生活里的“定制商品”例子，就能轻松理解。

先想个生活化的例子

假设你想开一家定制玩偶店，店里有一个“玩偶制作模板”——这个模板规定了玩偶都要有圆脑袋、两只胳膊，还会有一个固定的“打招呼”动作。每次有客人要定制玩偶，你不会重新画一遍模板，而是拿现成的模板，填好客人要的颜色、衣服，再把它变成一个独一无二的玩偶。这里的“模板”，就对应JavaScript里的构造函数，而你用模板做新玩偶的过程，就和new的作用一模一样。

第一步：创建空白对象

当你用new调用构造函数时，JavaScript会先凭空生成一个空白的“空对象”。就像你从模板店拿出一块未加工的布料，它还没有任何样式和功能，只是一个待加工的载体。

举个代码例子：

`javascript

// 这是玩偶的构造函数，相当于之前说的制作模板

function Doll(color) {

this.color = color;

this.sayHi = function() {

console.log(我是${this.color}玩偶);

};

}

// 用new创建新玩偶，此时生成了一个空白对象

const myDoll = new Doll('粉色');

`

这里的myDoll，就是第一步生成的那个空白对象，只是现在它还没有color属性，也不会“打招呼”。

第二步：绑定原型链

接下来，这个空白对象会关联到构造函数的prototype属性——也就是模板的“通用规则”。还是用玩偶的例子，每个玩偶都要从模板继承“圆脑袋、两只胳膊”，对应到代码里，就是myDoll的proto（原型）指向Doll.prototype，这样它就能共享模板的通用功能，不用每个玩偶都重复做一遍。

比如，你可以给Doll.prototype加一个通用的“换衣服”方法，所有用这个模板做的玩偶都能直接用，不用单独给每个玩偶写一遍：

`javascript

Doll.prototype.changeClothes = function(clothes) {

console.log(给${this.color}玩偶穿上${clothes});

};

myDoll.changeClothes('连衣裙'); // 正常运行，这就是原型的作用

`

如果没有new的这一步，myDoll就找不到changeClothes方法，会报错。

第三步：绑定this到新对象

然后，构造函数里的this会指向刚才生成的空白对象。也就是说，构造函数里写的this.color = color，其实是给这个新对象添加color属性，this.sayHi = function()也是给它添加方法。

回到玩偶的例子，这一步就像你用模板给新玩偶缝上指定颜色的布料，加上“打招呼”的动作，让这个空白对象变成有自己特征的玩偶。如果不用new，直接调用Doll('粉色')，this会指向全局对象（浏览器里是window），反而会给window加属性，根本得不到新对象。

第四步：返回新对象

最后，构造函数会自动返回刚才的新对象。就像你把加工好的玩偶递给客人，客人拿到的就是一个完整的、属于自己的玩偶，而不是模板或者一块布料。

如果构造函数里自己返回了一个对象，比如return {name: '玩偶'}，那new就会忽略之前的步骤，直接返回这个自定义对象；如果返回的是原始值（比如数字、字符串），还是会返回之前生成的新对象。

现在再回头看，new的四个步骤其实就是：拿模板→做空白载体→绑定模板规则→加工出成品。搞懂这几点，再看那些用new的代码，就不会觉得抽象了。