写在前面的话
大家在面试的时候，是不是经常被问到"请手写一个new操作符"？每次听到这个问题，心里是不是都会想："new不就是new嘛，还能咋写？" 别急，今天我们就来彻底搞懂new操作符背后的秘密，让你在下次面试时能够从容应对，甚至反过来考考面试官！
叠个甲：本文会从最基础的概念讲起，如果你已经是JavaScript老司机，可以直接跳到代码实现部分。但我建议你还是看看，说不定会有新的收获呢！
一、new操作符到底做了什么？
在开始手写之前，我们先来理解一下new操作符的工作机制。很多同学可能觉得new就是"创建对象"，但实际上它的工作过程比你想象的要复杂得多。
new的四个关键步骤
当我们执行 new Person('张三', 18) 时，JavaScript引擎会按照以下步骤执行：
- 创建空对象：
var obj = {} - 设置原型链：
obj.__proto__ = Constructor.prototype - 绑定this并执行构造函数：
Constructor.apply(obj, args) - 返回对象：根据构造函数的返回值决定最终返回什么
看起来很简单对吧？但是魔鬼在细节里，特别是第4步，这里有个大坑等着你！
二、手写实现：一步步揭开面纱
基础版本：能跑就行
function objectFactory(Constructor, ...args) {
var obj = {};
obj.__proto__ = Constructor.prototype;
Constructor.apply(obj, args);
return obj;
}
这个版本看起来没问题，但是运行起来你就会发现问题了。为什么？因为我们忽略了构造函数的返回值处理！
进阶版本：处理返回值的坑
function objectFactory(Constructor, ...args) {
var obj = {};
obj.__proto__ = Constructor.prototype;
var ret = Constructor.apply(obj, args);
// 这里是关键！构造函数返回对象时，使用返回值；否则返回创建的对象
return typeof ret === 'object' ? ret || obj : obj;
}
等等，这里有个细节！ 为什么要写 ret || obj 而不是直接 ret？
因为当构造函数返回 null 时，typeof null === 'object' 返回 true，但我们实际上应该返回创建的对象而不是 null。JavaScript就是这么"贴心"，连null都要给你挖个坑！
三、实战测试：验证我们的实现
让我们用一个实际的例子来测试我们的实现：
function Person(name, age) {
this.name = name;
this.age = age;
// 测试不同的返回值情况
// return 1; // 返回基本类型，应该被忽略
// return null; // 返回null，应该被忽略
// return { label: '哈哈' }; // 返回对象，应该使用这个返回值
}
Person.prototype.say = function() {
console.log(`你好，我是${this.name}`);
}
// 原生new的效果
let p1 = new Person('张三', 18);
console.log(p1);
// 我们手写的效果
let p2 = objectFactory(Person, '张三', 18);
console.log(p2);
p2.say(); // 测试原型方法是否正常
console.log(p2 instanceof Person); // 测试instanceof是否正常
四、深入理解：那些你可能不知道的细节
1. 为什么不用Object.create()？
有同学可能会问："既然要设置原型链，为什么不用 Object.create(Constructor.prototype) 呢？"
答案是：完全可以！这样写更加语义化：
function objectFactory(Constructor, ...args) {
var obj = Object.create(Constructor.prototype);
var ret = Constructor.apply(obj, args);
return typeof ret === 'object' ? ret || obj : obj;
}
2. 类数组对象的处理技巧
在ES6之前，我们通常这样处理参数：
function objectFactory() {
// 类数组对象没有shift方法，所以借用数组的shift方法
var Constructor = [].shift.call(arguments);
var obj = {};
obj.__proto__ = Constructor.prototype;
var ret = Constructor.apply(obj, arguments);
return typeof ret === 'object' ? ret || obj : obj;
}
这种"借用"方法的思想在JavaScript中非常常见，体现了JavaScript灵活性的一面。
3. instanceof的工作原理
为什么我们手写的new能让 instanceof 正常工作？因为 instanceof 检查的是对象的原型链，而我们正确设置了 obj.__proto__ = Constructor.prototype。
五、常见的坑和注意事项
坑1：忘记处理构造函数返回值
function BadPerson() {
return { name: '我是返回的对象' };
}
// 如果不处理返回值，你会得到错误的结果
坑2：箭头函数不能作为构造函数
const ArrowPerson = () => {
this.name = 'test'; // 这里会报错！
}
// new ArrowPerson(); // TypeError: ArrowPerson is not a constructor
坑3：忘记绑定this
// 错误的实现
function badObjectFactory(Constructor, ...args) {
var obj = {};
obj.__proto__ = Constructor.prototype;
Constructor(...args); // 忘记绑定this！
return obj;
}
六、性能优化：让代码跑得更快
在实际项目中，如果频繁使用手写的new，可以考虑以下优化：
function objectFactory(Constructor, ...args) {
// 提前检查Constructor是否为函数
if (typeof Constructor !== 'function') {
throw new TypeError('Constructor must be a function');
}
var obj = Object.create(Constructor.prototype);
var ret = Constructor.apply(obj, args);
// 优化返回值判断
return (ret !== null && typeof ret === 'object') ? ret : obj;
}
七、扩展思考：从new到工厂模式
手写new操作符其实就是实现了一个"对象工厂"。这种模式在实际开发中非常有用：
// 通用对象工厂
function createInstance(Constructor, ...args) {
if (typeof Constructor !== 'function') {
throw new Error('First argument must be a constructor function');
}
return objectFactory(Constructor, ...args);
}
// 使用工厂模式创建不同类型的对象
const person = createInstance(Person, '张三', 18);
const car = createInstance(Car, 'BMW', 'X5');
总结与思考
通过手写new操作符，我们不仅掌握了JavaScript对象创建的底层机制，更重要的是理解了以下几个核心概念：
- 原型链的设置：
__proto__与prototype的关系 - this绑定：
apply/call的实际应用场景 - 返回值处理：构造函数返回值的特殊规则
- 类型检查：
typeof操作符的细节和陷阱
这些知识点不仅在面试中会被问到，在实际开发中也经常遇到。比如在实现设计模式、理解框架源码时，这些基础知识都是必不可少的。
最后的最后，记住一句话：理解原理比记住代码更重要。当你真正理解了new操作符的工作机制，手写实现只是水到渠成的事情。
下次面试官再问你"请手写一个new操作符"时，你不仅能写出代码，还能讲出原理，甚至可以反问："您想了解哪个方面的细节呢？原型链设置、this绑定，还是返回值处理？" 😏
如果这篇文章对你有帮助，别忘了点个赞哦！有问题欢迎在评论区讨论，我们一起进步！
