从空对象开始：手把手教你手写 new 函数，彻底理解 JS 原型机制

一、new 操作符的核心原理：JS 对象创建的「幕后黑手」

在 JavaScript 中，new操作符是对象创建的魔法钥匙。当我们写下new Person()时，引擎默默完成了 4 件大事：

创建空对象 ：一个干净的{}, 就像一张等待涂鸦的白纸
绑定原型链 ：obj.__proto__ = Person.prototype，建立对象与构造函数的「血缘关系」
绑定 this 上下文 ：让构造函数中的this指向新创建的对象，开始「属性赋值」
处理返回值：如果构造函数返回对象，就用它；否则默认返回新创建的对象

这一系列操作，让普通函数摇身一变成为「构造函数」，创造出具有特定属性和方法的对象实例。

二、手写 new 函数的核心步骤解析（附完整代码）

1. 创建空对象：一切的起点

javascript 复制代码

const obj = {}; // 初始化一个空对象，后续操作的载体

就像盖房子要先打好地基，所有通过new创建的对象，都是从这个空对象开始「生长」的。

2. 原型链绑定：建立对象的「基因库」

javascript 复制代码

obj.__proto__ = Constructor.prototype; 
// 或使用更规范的 Object.setPrototypeOf(obj, Constructor.prototype)

这一步至关重要！它让新对象可以访问构造函数原型上的方法（比如示例中的sayhi），就像孩子继承了父母的「基因」，是 JS 原型链继承的核心机制。

3. 绑定 this 并执行构造函数：给对象「填装属性」

javascript 复制代码

const ret = Constructor.apply(obj, args); 
// apply改变this指向为obj，并传入参数

通过apply方法，我们把构造函数中的this牢牢绑定到新创建的空对象上。当构造函数执行时（比如给this.name和this.age赋值），这些属性就被「安装」到了空对象上。

4. 返回值处理：谁才是最终的「主角」？

javascript 复制代码

return typeof ret === 'object' && ret !== null ? ret : obj;

这里有个重要规则：

如果构造函数返回对象（包括数组、函数等引用类型），new操作符会直接返回这个对象
如果返回原始值 （字符串、数字等）或者没有返回值，就返回我们创建的obj

完整手写代码（ES6 版本优化）

javascript 复制代码

function objectFactory(Constructor, ...args) {
    // 1. 创建空对象
    const obj = Object.create(null); // 更安全的空对象创建方式
    
    // 2. 绑定原型链（关键步骤！）
    if (Constructor.prototype !== null) {
        obj.__proto__ = Constructor.prototype;
    }
    
    // 3. 绑定this并执行构造函数，获取返回值
    const ret = Constructor.apply(obj, args);
    
    // 4. 处理返回值（注意null的特殊情况）
    return (typeof ret === 'object' && ret !== null) || typeof ret === 'function'
        ? ret 
        : obj;
}

三、关键细节与常见错误修正

1. 类数组参数处理：从 arguments 到剩余参数

早期版本常用[].shift.call(arguments)提取构造函数，ES6 之后推荐使用剩余参数...args，更简洁且避免类数组操作的坑。

2. 原型链绑定的边界情况

当构造函数没有显式原型（比如null）时，需要做防御性判断，避免obj.__proto__指向null导致的原型链断裂。

3. 返回值判断的陷阱

正确的判断应该是：返回值是对象（包括function）且不是null 。原代码中的'onject'拼写错误已修正，同时增加了对function类型的判断（因为函数也是对象）。

四、实战测试：验证手写 new 函数的正确性

1. 基础案例：正常创建对象

javascript 复制代码

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

// 使用原生new创建
const p1 = new Person('张三', 18);
// 使用手写函数创建
const p2 = objectFactory(Person, '张三', 18);

console.log(p1.name); // 18 
p2.sayHi(); // "你好，我是张三" 
console.log(p2 instanceof Person); // true （原型链正确）

2. 特殊场景：构造函数返回对象

javascript 复制代码

function Person(name, age) {
    this.name = name;
    this.age = age;
    // 返回一个自定义对象
    return { 
        name: '李四', 
        age: 20, 
        special: '返回值覆盖' 
    };
}

const p = objectFactory(Person, '张三', 18);
console.log(p.name); // 李四 （使用构造函数的返回值）

3. 边缘情况：返回原始值或无返回

javascript 复制代码

function Person(name, age) {
    this.name = name;
    this.age = age;
    return '这是一个字符串'; // 原始值，会被忽略
    // 或者不写return语句
}

const p = objectFactory(Person, '张三', 18);
console.log(p.name); // 张三 （使用创建的obj，忽略返回值）

五、为什么手写 new 函数很重要？（写给进阶开发者）

1. 深入理解原型链与 this 机制

这两个 JS 中最核心的概念，在手写new的过程中被反复使用。掌握它们，就能理解「为什么p1 instanceof Person返回true」「为什么原型方法可以被所有实例访问」等关键问题。

2. 面试高频考点

无论是初级还是高级前端面试，new的原理都是必考内容。亲手实现一遍，胜过死记硬背十遍，还能轻松应对各种变形问题（比如「如果构造函数返回 null 会怎样？」）。

3. 更好地使用 class 语法

ES6 的class语法糖背后，本质上还是基于new操作符。理解了底层原理，才能更规范地使用class，避免写出「反模式」代码。

六、总结：从模仿到创造，掌握 JS 对象创建的核心逻辑

手写new函数的过程，就像拆解一个精密的机械装置：

创建空对象是起点，所有对象都从「无」开始
原型链绑定是桥梁，连接了实例与构造函数的「原型世界」
this 绑定是粘合剂，让构造函数的属性能正确赋值给实例
返回值处理是调节器，决定了最终呈现的是「定制对象」还是「默认对象」

通过这个过程，我们不仅掌握了一个具体的函数实现，更理解了 JS 中对象创建的核心机制。下次再遇到原型链、继承相关的问题，就能从「源头」分析，而不是靠记忆答题啦～