前端:new关键字的作用

本文涉及的产品
资源编排,不限时长
无影云电脑企业版,4核8GB 120小时 1个月
无影云电脑个人版,1个月黄金款+200核时
简介: 在JavaScript中,`new`关键字用于创建构造函数或类的新实例。使用`new`时,会自动创建一个空对象,并将其绑定到函数内的`this`,执行构造函数中的代码后返回该对象。这使得对象可以继承构造函数的属性和方法。
  1. 创建对象实例

    • 基本概念:在JavaScript前端开发中,new关键字主要用于创建一个构造函数的实例。构造函数是一种特殊的函数,用于初始化新创建的对象。例如,定义一个简单的构造函数来创建一个Person对象:
      function Person(name, age) {
             
      this.name = name;
      this.age = age;
      }
      
    • 使用方式:当使用new Person('Alice', 25)时,就会创建一个Person类型的新对象。这个新对象包含了nameage两个属性,其值分别为'Alice'25。在内存中,会开辟一块新的空间来存储这个对象,并且这个对象是独立于其他对象存在的,每个通过new关键字创建的Person对象都有自己的一套nameage属性。
  2. 建立对象的原型链

    • 原型链关联new关键字在创建对象的同时,会将新对象的原型(__proto__)指向构造函数的原型对象(prototype)。例如,继续在Person构造函数的原型对象上添加一个方法:
      Person.prototype.sayHello = function () {
             
      console.log(`Hello, my name is ${
               this.name}`);
      };
      
    • 继承机制:当通过new Person('Alice', 25)创建一个对象后,这个新对象可以访问sayHello方法。这是因为new操作使得新对象的原型链与构造函数的原型对象建立了关联。在查找对象的属性和方法时,如果对象本身没有该属性或方法,JavaScript会沿着原型链向上查找,直到找到对应的属性或方法或者到达原型链的顶端(Object.prototype)。所以,新创建的Person对象可以通过原型链继承Person.prototype上的方法,这是实现JavaScript对象继承的一种重要方式。
  3. 自动执行构造函数并绑定this

    • 构造函数执行new关键字会自动调用构造函数,并且在构造函数内部,this关键字会自动绑定到新创建的对象上。例如,在Person构造函数中,this.name = namethis.age = age这两行代码,this指代的就是通过new关键字新创建的那个对象。这样就可以方便地在构造函数中初始化对象的属性,将传入的参数赋值给对象的相应属性。
    • 返回值规则:一般情况下,构造函数如果没有显式地返回一个对象,new操作会返回新创建的对象。但如果构造函数返回了一个对象,则new操作会返回这个返回的对象。例如:
      function AnotherPerson(name, age) {
             
      this.name = name;
      this.age = age;
      return {
             
         otherName: 'Other Name'
      };
      }
      let anotherPerson = new AnotherPerson('Bob', 30);
      // anotherPerson是{ otherName: 'Other Name' },而不是包含name和age属性的对象
      
      这种返回值规则在某些特殊情况下可以用于改变new操作的默认行为,不过在大多数常规的构造函数中,通常不会返回一个新的对象,而是通过this来初始化并返回新创建的对象。
相关文章
|
前端开发 JavaScript
前端基础 - JavaScript之this关键字
前端基础 - JavaScript之this关键字
48 0
|
5月前
|
前端开发 开发者
new操作符背后的秘密:揭开Web前端对象创建的神秘面纱!
【8月更文挑战第23天】在Web前端开发中,`new`操作符是创建对象实例的核心。本文以`Person`构造函数为例,通过四个步骤解析`new`操作符的工作原理:创建空对象、设置新对象原型、执行构造函数并调整`this`指向、判断并返回最终对象。了解这些有助于开发者更好地理解对象实例化过程,从而编写出更规范、易维护的代码。
46 0
|
8月前
|
前端开发 JavaScript
【Web 前端】new操作符具体都干了什么?
【4月更文挑战第22天】【Web 前端】new操作符具体都干了什么?
|
8月前
|
前端开发 JavaScript
前端 JS 经典: 富文本高亮关键字
前端 JS 经典: 富文本高亮关键字
143 0
|
前端开发
前端学习笔记202306学习笔记第三十七天-手写new得实现4
前端学习笔记202306学习笔记第三十七天-手写new得实现4
41 0
|
前端开发 JavaScript
前端开发领域中,require和import这两个重要的关键字到底有啥区别?
前端开发领域中,require和import这两个重要的关键字到底有啥区别?
172 3
|
前端开发
前端经典面试题 | New操作符的原理
前端经典面试题 | New操作符的原理
|
监控 JavaScript 前端开发
前端监控实战之 New Relic
前端监控实战之 New Relic
276 0
|
前端开发
前端学习笔记202306学习笔记第三十七天-手写new得实现5
前端学习笔记202306学习笔记第三十七天-手写new得实现5
63 0
|
前端开发
前端学习笔记202306学习笔记第四十三天-await关键字2
前端学习笔记202306学习笔记第四十三天-await关键字2
68 0