前端百题斩【018】——逐层拆解new操作符的幕后机制
2024-02-03 12:56:53
从验证点到手撕 new 操作符
JavaScript 的 new 操作符是创建对象的神奇工具，它不仅可以创建基本包装对象（Boolean、Number、String），还可以创建自定义对象。深入了解其背后的机制，让我们一起手撕 new 操作符！
内存分配：为对象预留空间
当你使用 new 操作符时，JavaScript 会先进行内存分配，为即将创建的对象预留空间。这就像在停车场寻找一个空位，为你的新车腾出空间。内存分配的大小取决于对象的结构和需要存储的数据量。
原型继承：继承构造函数属性
每个对象都有一个原型对象，就像它的一位资深导师。当使用 new 操作符创建对象时，这个对象会自动继承构造函数原型对象的属性和方法。这意味着你可以通过对象访问构造函数原型对象的所有宝贵知识。
构造函数：对象工厂
构造函数是创建对象的工厂，负责初始化对象并设置其属性和方法。当使用 new 操作符调用构造函数时，就像按下工厂的启动按钮。构造函数的代码会被执行，根据提供的参数创建一个新对象。
实例对象：个性化定制
构造函数执行完毕后，会创建一个新的实例对象。这个对象继承了构造函数原型对象的属性和方法，就像一个小宝宝从父母那里继承了基因。同时，它也有自己的独立属性和方法，就像一个独一无二的小个体。实例对象可以通过 new 操作符返回的指针来访问。
示例代码：创建人物对象
function Person(name, age) {
this.name = name;
this.age = age;
}
const person1 = new Person('John', 30);
console.log(person1.name); // John
console.log(person1.age); // 30
在上面的示例中，我们定义了一个 Person 构造函数，它接收两个参数：name 和 age 。当使用 new 操作符调用 Person 构造函数时，会创建一个新的人员对象，并根据构造函数的参数设置其属性和方法。然后，我们可以通过对象访问这些属性和方法。
总结：new 操作符的运作原理
new 操作符通过以下步骤运作：
- 内存分配： 为对象预留空间。
- 原型继承： 继承构造函数原型对象的属性和方法。
- 构造函数： 执行代码，初始化对象属性和方法。
- 实例对象： 创建一个新对象，继承原型属性，并具有自己的属性和方法。
掌握了这些原理，你就能更加熟练地使用 new 操作符，创建各种各样的对象，为你的 JavaScript 编程增添无限可能。
常见问题解答
-
什么是原型继承？
原型继承是指对象继承其构造函数原型对象的属性和方法的能力。 -
构造函数有什么作用？
构造函数负责初始化对象并设置其属性和方法。 -
实例对象和原型对象有什么区别？
实例对象是通过 new 操作符创建的特定对象，而原型对象是构造函数的属性，为所有实例对象提供共享的属性和方法。 -
为什么使用 ** new 操作符？**
使用 new 操作符可以创建自定义对象，这些对象可以继承构造函数原型对象的属性和方法，从而实现代码重用和维护。 -
什么时候不使用 ** new 操作符？**
如果要创建基本包装对象（Boolean、Number、String），则无需使用 new 操作符。
