在前端面试的战场上，这绝对是一道“出镜率”极高的经典考题。hen多小伙伴可Neng觉得，这不就是写个 `new Person` 嘛，天天dou在用，有啥好解释的？但Ru果你真的这么想，那可Neng就正好掉进了面试官的“陷阱”里。

说实话，当我们日常在代码里敲下 `const person = new Person` 的时候，这行代码背后发生的事情，远比你想象的要精彩得多。今天咱们就抛开那些枯燥的教科书定义，像拆解玩具一样，把 `new` 这个操作符彻底拆开kankan，顺便聊聊怎么才Neng在面试中给出一个让面试官眼前一亮的“王者级”答案。

揭开 `new` 的神秘面纱：它到底是个啥？

咱们得达成一个共识：在 JavaScript 的世界里`new` 这个关键字就像是一个神奇的开关，专门负责在内存中“变”出一个崭新的对象实例。与之相对的，`delete` 则是用来清理不再使用的对象。不过今天咱们的重点是“生”，而不是“死”。

hen多人容易把构造函数神话，觉得它一定有什么特殊的语法糖。其实吧，构造函数本质上跟咱们平时写的普通函数没啥两样，它并没有什么特殊的超Neng力。唯一的区别就在于你怎么去“召唤”它——Ru果你在调用时加上了 `new`，那它就摇身一变成为了构造函数；要是没加，它也就是个普普通通的函数罢了。

那么当我们敲下 `new` 的那一刻，JS 引擎在底层究竟忙活了一些什么呢？咱们不妨把这kan作是一个精密的流水线作业，整个过程大概Ke以分为四个核心步骤。听好了这可是面试拿分的关键点。

深入底层：`new` 背后的四步走战略

为了方便理解，咱们假设代码正在执行 `new Foo`。这时候，JS 引擎内部其实是在偷偷地干这四件事：

第一步：开辟内存，迎接新生命

系统会在堆内存中开辟一块全新的空白空间。你Ke以把它想象成刚建好的一座毛坯房，里面空空如也，什么家具dou没有。这个新对象，就是我们要返回的实例的雏形。

第二步：寻找血缘，链接原型链

房子建好了得给它上户口吧？在 JS 里这个“上户口”的过程就是建立原型链。新对象内部的那个隐藏属性 `]`会被指向构造函数的 `prototype` 属性。

这一步至关重要，因为它决定了这个新对象Neng不Neng“继承”到构造函数上定义的那些方法。要是这一步没Zuo好，新对象就成了个“黑户，啥也访问不到。

第三步：绑定 `this`，确立归属权

接下来构造函数开始执行了。但是在执行之前，有一个非常关键的“偷梁换柱”操作：构造函数内部的 `this` 关键字，会被强制指向刚才创建的那个新对象。

这就是为什么我们在构造函数里写 `this.name = 'Fog'`，Zui终创建出来的实例对象上就会有 `name` 属性。因为 `this` 指的就是那个新对象，所有的属性装修，dou是往这个新对象身上堆。

第四步：执行代码与Zui终交付

然后就是按部就班地执行构造函数里的代码，给新对象添加各种属性。Zui后到了交付环节。这里有个容易被忽视的细节：Ru果构造函数显式返回了一个对象，那么 `new` 的结果就是这个返回的对象；否则，默认返回刚才创建的那个新对象。

这Zui后一步，就是hen多初级开发者容易踩坑的地方，也是面试官Zui喜欢深挖的“雷区”。

面试现场：手写一个 `new`，从青铜到王者的进阶之路

光说不练假把式。面试官Ru果问你“Neng不Neng手写一个 `new`”，他绝对不是想kan你背诵代码，而是在考察你对底层逻辑的理解深度，以及处理边缘情况的缜密程度。

咱们来由浅入深，kankan怎么写出一个完美的 `new` 实现。

青铜版：Neng跑就行，基础实现

Zui基础的思路，就是严格按照上面说的四步来。咱们得处理一下 `arguments` 这个类数组对象，因为它没有 `shift` 方法，得借用数组的。

function objectFactory {
    // 1. 创建一个空对象
    var obj = new Object;
    // 2. 获取构造函数
    var Constructor = .shift.call;
    // 3. 链接原型：让 obj Neng访问 Constructor.prototype 上的属性
    // 这里直接操作 __proto__，虽然浏览器支持，但略显“野路子”
    obj.__proto__ = Constructor.prototype;
    // 4. 绑定 this 并执行，把剩下的参数传进去
    var result = Constructor.apply;
    // 5. 返回值处理
    // Ru果构造函数返回了对象，就返回那个对象，否则返回新创建的 obj
    return typeof result === 'object' && result !== null ? result : obj;
}
// 测试一下
function Person {
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function  {
    console.log;
}
var awei = objectFactory;
console.log; // 输出: 阿伟
awei.sayName;         // 输出: 阿伟

这个版本写出来基本分是拿到了。它展示了你对流程的掌握。但是Ru果你只写到这一步，面试官可Neng会微微一笑，接着问：“有没有geng规范一点的写法？”

白银版：拥抱现代，`Object.create` 的优雅

时代变了咱们得用geng现代、geng规范的 API。直接操作 `__proto__` 虽然在hen多浏览器里Neng跑，但这毕竟不是标准属性，而且在性Neng上也不一定是Zui优的。ES6 给我们提供了 `Object.create`，这才是链接原型的正统Zuo法。

同时咱们也Ke以用 ES6 的剩余参数 `...args` 来告别那个丑陋的 `arguments` 转换。

function objectFactory {
    // 1. & 2. 创建对象并直接链接原型
    // Object.create 会创建一个新对象，并直接将其原型指向 proto
    // 这比 new Object + __proto__ 赋值要geng纯粹，性Neng也geng好
    const obj = Object.create;
    // 3. 执行构造函数，绑定 this
    const result = Constructor.apply;
    // 4. 返回值处理
    return typeof result === 'object' && result !== null ? result : obj;
}

这个版本kan起来清爽多了代码的可读性和规范性dou上了一个台阶。但是这还不是终点。因为这里藏着一个巨大的“隐形漏洞”，一个Neng让你在面试中直接翻车的坑。

王者版：滴水不漏，处理返回值的“坑”

注意了！前面的代码里我们对返回值的判断逻辑通常是 `typeof result === 'object' && result !== null`。这kan起来没问题，但你想过一种特殊情况吗？

Ru果构造函数返回的是一个函数呢？

在 JavaScript 里函数也是对象，对吧？但是 `typeof function` 返回的是 `'function'`，而不是 `'object'`。Ru果我们用上面的简易版逻辑，当构造函数返回一个函数时判断条件为假，Zui终会错误地返回 `obj` 实例，而不是那个函数！

这可不是我瞎编的，咱们来kankan代码验证：

function Factory {
    // 这个构造函数故意返回一个函数
    return function { 
        console.log; 
    };
}
// 用简易版 new 来测试
const test = new Factory;
console.log; // 理想情况下应该是 "function"，但简易版可Neng会返回 "object"

所以一个完美的“王者版”实现，必须把函数的情况也考虑进去。这才是体现你功底深厚的地方！

function objectFactory {
    // 0. 参数校验
    if  {
        throw new TypeError;
    }
    // 1. 创建对象，链接原型
    const obj = Object.create;
    // 2. 绑定 this 执行构造函数
    const result = Constructor.apply;
    // 3. 完美的返回值处理
    // 判断 result 是否是对象 或者 是函数
    // 只要是这两者之一，就返回 result，否则返回新创建的 obj
    const isObject = typeof result === 'object' && result !== null;
    const isFunction = typeof result === 'function';
    return  ? result : obj;
}
// 验证特殊情况
function Factory {
    return function { 
        console.log; 
    };
}
const test = objectFactory;
console.log; // "function" —— 逻辑完全正确！

你kan，加上这个判断，逻辑就闭环了。这时候，你Ke以自信地跟面试官说：“我不止会写 `new`，我还知道为什么要这么写，甚至连构造函数返回函数这种边缘情况我dou考虑到了。”

那些容易被忽视的细节与陷阱

除了手写代码，面试中关于 `new` 还有一些常见的“连环追问”。咱们得提前Zuo好准备，别被问得哑口无言。

比如有人会问：“Ru果不使用 `new` 调用构造函数会怎么样？”

这就涉及到 `this` 指向的问题了。Ru果你不用 `new`，构造函数里的 `this` 就不会指向新对象，而是会指向全局对象。这会导致你在构造函数里定义的属性全部污染到全局作用域去，这可是个巨大的 Bug！

为了防止这种“低级错误”，hen多业界的规范dou建议：构造函数名首字母必须大写。这就是一种视觉上的约定，提醒开发者：“嘿，这是个构造函数，记得加 `new` 啊！”

不仅仅是代码，geng是思维

咱们今天聊了这么多，从 `new` 的基本概念，到底层的四步操作，再到手写实现的三个版本。你kan，所谓的“手写源码”，其实就是对基础知识的排列组合和深度挖掘。

面试官让你手写 `new`，绝对不是为了kan你默写代码。通过这寥寥几行代码，他在考察你以下四大内功：

对 原型链 的理解是否透彻；

对 this 指向 的掌握是否灵活；

对 类数组与参数处理 是否熟练；

对 边缘情况 的考虑是否周全。

下次再遇到这个问题，别再只是背书了。试着像今天这样，把 `new` 想象成一个工厂的生产流程，把每一个步骤dou讲得有血有肉。相信我，这样的回答，绝对Neng让你在面试中脱颖而出！

好了今天的“拆解”就到这里。希望这篇长文Neng帮你彻底搞定 `new` 操作符，咱们下期见！

---