登录
1. 《手写系列：面试官问我 new 的原理，我直接甩出三个版本》
今天我们来聊聊 JavaScript 中那个既熟悉又神秘的 new 操作符。相信很多小伙伴在面试时都经历过这样的“名场面”：面试官微微一笑，推过来那个熟悉的键盘：“来，能不能手写一个 new 的实现？”
这时候，如果你只是背诵了代码，稍微问深一点可能就露怯了。今天，我们就把这个“黑盒”拆开，从底层原理到完美实现，彻底搞懂它！
一、核心原理拆解：new 到底干了啥？
我们在日常开发中，const person = new Person('Fog', 18) 写得飞起。但 new 背后到底发生了什么？
简单来说，new 就是一个**“生产车间”**。它拿着你的图纸（构造函数），给你造出一个实实在在的产品（实例对象）。
这个过程，标准流程只有四步（核心四步法）：
- 建空房：创建一个全新的空对象 {}。
- 挂牌子：将这个空对象的原型链（proto）链接到构造函数的原型对象（prototype）上。（这步最关键，决定了你能用这一类的公共方法）。
- 搞装修：将构造函数内部的 this 指向这个新对象，并执行构造函数。（给对象添加属性，如 name, age）。
- 交钥匙：判断构造函数的返回值。如果构造函数自己返回了一个对象（或函数），那就以它为准；否则，默认返回我们在第一步创建的那个新对象。
二、面试官到底在考什么？
面试官让你手写 new，绝对不是为了看你默写代码。通过这寥寥几行代码，他在考察你以下四大内功：
- 原型链的理解：你知不知道实例和类是怎么关联起来的？
- this 指向机制：你懂不懂怎么用 call 或 apply 改变函数执行上下文？
- 函数参数处理：面对不定参数，你会用 arguments 还是 ...args？
- 边界情况处理：**这是高分点！**如果构造函数里写了 return，你的代码还能正常工作吗？
三、手写进阶之路
接下来，我们由浅入深，演示三个版本的实现。
V1.0 青铜版：ES5 经典写法
这是最基础的写法，也是很多老教材里的标准答案。我们需要处理 arguments 这个“伪数组”。
JavaScript
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayName = function () {
console.log(this.name);
}
// 核心实现
function objectFactory() {
// 1. 创建一个空对象
var obj = new Object();
// 2. 获取构造函数
// arguments 是类数组，没有 shift 方法，我们借用数组原型的 shift
// 这行代码有两个作用：取出第一个参数(Constructor)，同时 arguments 里剩下的就是参数了
var Constructor = [].shift.call(arguments);
// 3. 链接原型：让 obj 能访问 Person.prototype 上的属性
obj.__proto__ = Constructor.prototype;
// 4. 绑定 this 并执行
// 使用 apply 将 remaining arguments 传进去
var result = Constructor.apply(obj, arguments);
// 5. 返回值处理
// 这是一个常见的简易判断，但其实有漏洞（稍后在王者版揭晓）
return typeof result === 'object' && result !== null ? result : obj;
}
// 测试
var awei = objectFactory(Person, '阿伟', 20);
console.log(awei.name); // 阿伟
awei.sayName(); // 阿伟
重点解析：
-
为什么用 [].shift.call(arguments)？
arguments 是一个类数组对象（有 length，有索引，但没数组方法）。通过 call，我们强行让它借用了数组的 shift 方法，切掉并拿到了第一个参数（构造函数），剩下的正好传给 apply。
V2.0 黄金版：ES6 现代化写法
时代变了，我们有了更优雅的语法糖。proto 虽然好用，但在生产环境中被视为非标准（尽管浏览器支持），性能也不如 Object.create。
JavaScript
// 使用 ...args 剩余参数，告别 arguments
function objectFactory(Constructor, ...args) {
// 1. & 2. 创建对象并直接链接原型
// Object.create(proto) 创建一个新对象，带着指定的原型，性能更好，更符合规范
const obj = Object.create(Constructor.prototype);
// 3. 执行构造函数
const result = Constructor.apply(obj, args);
// 4. 返回值处理 (依然沿用旧逻辑)
return typeof result === 'object' && result !== null ? result : obj;
}
重点解析：
- Object.create 的优势：它直接创建一个已经连接好原型的对象，避免了创建后再修改 proto 指针带来的性能损耗（修改原型链在 V8 引擎中是非常昂贵的操作）。
V3.0 王者版：无懈可击的最终版
注意了！如果你能写出这个版本，面试官绝对会对你刮目相看。
在 V1 和 V2 中，我们对返回值的判断是 typeof result === 'object'。这有一个巨大的隐形漏洞：
如果构造函数返回的是一个 function 呢？
在 JS 原生 new 中，如果构造函数返回函数，new 表达式的结果就是那个函数。但 typeof function 是 'function' 而不是 'object'，之前的代码会错误地返回 obj 实例。
JavaScript
function objectFactory(Constructor, ...args) {
// 0. 参数校验 (严谨性加分项)
if (typeof Constructor !== 'function') {
throw new TypeError('Constructor must be a function');
}
// 1. 创建对象，链接原型
const obj = Object.create(Constructor.prototype);
// 2. 绑定 this 执行
const result = Constructor.apply(obj, args);
// 3. 完美的返回值处理（关键修正！）
// 如果 result 是对象(非null) 或者 是函数，则返回 result
// 否则返回新创建的 obj
const isObject = typeof result === 'object' && result !== null;
const isFunction = typeof result === 'function';
return (isObject || isFunction) ? result : obj;
}
// 验证特殊情况
function Factory() {
return function() { console.log('I am a function'); };
}
const test = objectFactory(Factory);
console.log(typeof test); // "function" —— 逻辑正确！
四、总结
你看，所谓的“手写源码”，其实就是对基础知识的排列组合。
- 创建：Object.create
- 执行：Function.prototype.apply
- 判断：类型检测与逻辑运算
掌握了这三点，new 操作符对你来说就不再是黑盒。下次面试遇到，直接展示“王者版”，告诉面试官：我不止会写，我还知道为什么要这么写。
