【Web 前端】new操作符具体都干了什么?

简介: 【4月更文挑战第22天】【Web 前端】new操作符具体都干了什么?

image.png

当使用 new 操作符来创建一个对象时,JavaScript 引擎会执行一系列操作,以确保正确地创建并初始化一个新的对象。new 操作符背后的过程可以分为以下几个步骤:

1. 创建一个新对象

首先,new 操作符会创建一个新的空对象,这个对象将会成为将要实例化的构造函数的实例。

2. 将构造函数的作用域赋给新对象

接下来,new 操作符会将新创建的对象的 __proto__ 属性(内部属性)指向构造函数的原型对象,从而建立起原型链关系。这样新对象就可以访问到构造函数原型对象上的属性和方法。

3. 执行构造函数代码

然后,new 操作符会将构造函数的作用域赋给新对象,使得 this 关键字指向新对象。这样构造函数内部的代码就可以操作新对象,并对其进行初始化。

4. 返回新对象

最后,如果构造函数没有显式地返回一个对象,则 new 操作符会隐式地返回新创建的对象;如果构造函数显式地返回一个对象,则返回该对象。

示例代码

为了更好地理解 new 操作符的过程,以下是一个简单的示例代码:

// 构造函数
function Person(name, age) {
   
   
    this.name = name;
    this.age = age;
}

// 使用 new 操作符创建实例
let person1 = new Person('Alice', 30);

// 相当于以下操作:
let person2 = {
   
   };
Person.call(person2, 'Bob', 25); // 将构造函数作用域赋给新对象
person2.__proto__ = Person.prototype; // 将新对象的 __proto__ 指向构造函数的原型对象

在这个示例中,Person 是一个构造函数,person1person2 分别是通过 new 操作符创建的实例。实际上,new Person('Alice', 30) 执行的过程等价于 Person.call(person2, 'Bob', 25),其中 person2 是一个空对象,最后返回的就是 person2

相关文章
|
2天前
|
Web App开发 前端开发 JavaScript
什么是 Web 应用开发领域的 Frontend Fragmentation(前端碎片化)现象
什么是 Web 应用开发领域的 Frontend Fragmentation(前端碎片化)现象
10 0
|
2天前
|
前端开发
|
2天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
2天前
|
前端开发 JavaScript 开发者
新一代前端框架:革命性的Web开发利器
传统的前端框架在满足日益复杂的Web开发需求上逐渐显露出局限性,而新一代前端框架的出现,以其革命性的设计和功能,重新定义了Web开发的标准。本文将介绍这些新一代前端框架的特点和优势,并探讨它们在实际项目中的应用。
|
2天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
2天前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
|
2天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
2天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
2天前
|
前端开发 JavaScript
【Web 前端】$(document).ready() 是个什么函数?为什么要用它?
【5月更文挑战第2天】【Web 前端】$(document).ready() 是个什么函数?为什么要用它?
|
2天前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?