🧠在 JavaScript 的世界中，new 运算符是创建对象实例的核心工具之一。它不仅与构造函数紧密相关，还涉及原型链、this 绑定、返回值处理等关键概念。面试中常被问到“手写 new”的问题，其实质是考察你是否真正理解了 JavaScript 面向对象的底层机制。本文将从基础出发，详细拆解 new 的执行过程，并扩展讲解类数组（如 arguments）、函数参数动态性、以及如何将类数组转换为真正的数组等内容。
🔨 new 运算符做了什么？
当你使用 new 调用一个函数时，JavaScript 引擎会按以下步骤执行：
-
创建一个全新的空对象
这个对象没有任何属性或方法，是一个纯粹的{}。 -
设置新对象的
[[Prototype]]（即__proto__）
将该对象的内部原型链接（[[Prototype]]）指向构造函数的prototype属性。
也就是说：obj.__proto__ === Constructor.prototype -
将构造函数内的
this绑定到这个新对象
在构造函数执行期间，所有对this的操作都会作用于这个新创建的对象。 -
执行构造函数中的代码
构造函数体内的语句会被运行，通常用于给新对象添加属性或方法。 -
决定返回值
- 如果构造函数显式返回一个对象（包括数组、函数、日期等），则
new表达式返回该对象； - 如果构造函数返回的是原始值（如
number、string、boolean、null、undefined），或者没有 return 语句，则new表达式返回第 1 步创建的那个新对象。
- 如果构造函数显式返回一个对象（包括数组、函数、日期等），则
⚠️ 注意：
new的行为与普通函数调用完全不同。普通调用时this指向全局对象（非严格模式）或undefined（严格模式），而new调用时this指向新实例。
✍️ 手写 myNew：模拟原生 new 行为
基于上述五步，我们可以手动实现一个 myNew 函数：
function myNew(Constructor, ...args) {
// 1. 创建一个空对象，其 [[Prototype]] 指向 Constructor.prototype
const obj = Object.create(Constructor.prototype);
// 2. 执行构造函数，并将 this 绑定到 obj
const result = Constructor.apply(obj, args);
// 3. 判断构造函数返回值：如果是对象，则返回它；否则返回 obj
return (result !== null && typeof result === 'object') ? result : obj;
}
🧪 使用示例：
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function() {
console.log(`Hello, I'm ${this.name}`);
};
const p1 = myNew(Person, 'Alice', 25);
console.log(p1.name); // "Alice"
p1.sayHello(); // "Hello, I'm Alice"
console.log(p1 instanceof Person); // true
这个 myNew 完全复现了原生 new 的行为，包括原型链继承和返回值逻辑。
🧬 原型式面向对象：不是“血缘”，而是“委托”
JavaScript 并不基于类（class-based），而是基于原型（prototype-based） 的面向对象系统。当我们说 obj.__proto__ === Constructor.prototype，这并非表示“继承”了父类的属性，而是建立了委托关系：当访问 obj 上不存在的属性时，JavaScript 引擎会沿着原型链向上查找，直到找到或到达 null。
这种机制使得多个实例可以共享同一个原型上的方法，节省内存。
📦 arguments：函数内部的类数组对象
在非箭头函数中，JavaScript 会自动提供一个名为 arguments 的特殊对象，它包含了调用时传入的所有实参。
特点如下：
- 具有
length属性：表示实际传入的参数个数。 - 可通过索引访问：如
arguments[0],arguments[1]。 - 不是真正的数组：虽然看起来像数组，但它不具备数组的方法，如
.map(),.reduce(),.join()等。 - 属于“类数组对象”（Array-like Object） ：即拥有
length和数字索引，但不是Array实例。
示例：
function add() {
console.log(arguments); // [Arguments] { '0': 1, '1': 2, '2': 3 }
console.log(arguments.length); // 3
console.log(arguments[0]); // 1
// arguments.map(x => x * 2); // ❌ TypeError: arguments.map is not a function
}
add(1, 2, 3);
🔄 将 arguments 转换为真正的数组
由于 arguments 缺少数组方法，通常需要将其转换为真实数组才能使用高阶函数。
方法一：展开运算符（ES6+）
const args = [...arguments];
方法二：Array.from()
js
const args = Array.from(arguments);
方法三：Array.prototype.slice.call()
const args = Array.prototype.slice.call(arguments);
转换后即可安全使用 .reduce(), .map() 等方法：
function add() {
const args = [...arguments];
return args.reduce((prev, cur) => prev + cur, 0);
}
console.log(add(1, 2, 3)); // 6
console.log(add(1, 2, 3, 4, 5)); // 15
💡 注意：箭头函数没有自己的
arguments对象！如果在箭头函数中使用arguments，它会捕获外层作用域的arguments（如果存在）。
🧮 动态参数：JavaScript 函数的灵活性
JavaScript 函数的参数是完全动态的。你可以在定义时不声明任何形参，但在调用时传入任意数量的实参，这些实参都会被 arguments 捕获。
function logAll() {
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
logAll('a', 'b', 'c'); // 依次输出 'a', 'b', 'c'
这种特性使得 JavaScript 函数天然支持可变参数（variadic functions） ，也是早期实现函数重载的一种方式（尽管 ES6 后推荐使用默认参数或剩余参数 ...args）。
🧩 剩余参数 vs arguments
ES6 引入了剩余参数（rest parameters） ，语法为 ...args，它直接生成一个真正的数组：
function add(...nums) {
return nums.reduce((a, b) => a + b, 0);
}
相比 arguments，剩余参数更清晰、类型安全，且是真正的数组。因此，在现代 JavaScript 中，优先使用剩余参数而非 arguments。
但理解 arguments 仍然重要，尤其在阅读旧代码或处理 callee、caller（已废弃）等历史特性时。
🧱 总结：核心知识点全景图
| 概念 | 说明 |
|---|---|
new 运算符 | 创建实例，绑定 this，链接原型，处理返回值 |
手写 new | 用 Object.create() + apply() + 返回值判断实现 |
| 原型链 | obj.__proto__ === Constructor.prototype，实现方法共享 |
arguments | 类数组对象，有 length 和索引，无数组方法 |
| 类数组转数组 | [...arguments]、Array.from()、slice.call() |
| 动态参数 | 函数调用时参数数量可变，由 arguments 捕获 |
| 剩余参数 | ES6 的 ...args 是真正的数组，优于 arguments |
🌟 结语
掌握 new 的内部机制，不仅是应对面试题的关键，更是深入理解 JavaScript 面向对象编程的基石。而 arguments 作为语言早期设计的产物，虽逐渐被剩余参数取代，但其背后的“类数组”概念仍广泛存在于 DOM NodeList、jQuery 对象等场景中。理解这些细节，能让你写出更健壮、更高效的代码。
下次当你写下 new MyClass() 时，不妨想一想：此刻，一个空对象正在诞生，它的 __proto__ 正悄悄指向某个 prototype，而 this 已悄然就位——这就是 JavaScript 对象世界的起点。🚀
