首页 > 其他分享 >JS中关于为什么调用构造函数要使用new的详细解读

JS中关于为什么调用构造函数要使用new的详细解读

时间:2024-08-12 20:54:20浏览次数:13  
标签:name 对象 JS Person person1 new 构造函数

在 JavaScript 中,使用 new 关键字调用构造函数是创建新对象的关键步骤。本文将从以下几个方面解释为什么要这样做:

1. 创建一个新的对象

当你用 new 调用构造函数时,会自动创建一个新的空对象,这个对象会被赋值给 this,即构造函数内部的 this 关键字会引用这个新创建的对象。

function Person(name) {
  // this = {};  // 隐式地发生
  this.name = name;
  // return this;  // 隐式地发生
}

const person1 = new Person('Alice');
console.log(person1.name);  // 输出: Alice

2. 链接原型

新创建的对象会自动链接到构造函数的 prototype 对象。这意味着新对象会继承构造函数的原型对象上的所有属性和方法。

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

const person1 = new Person('Alice');
person1.greet();  // 输出: Hello, my name is Alice.

3. 绑定 this

在使用 new 调用构造函数时,构造函数内部的 this 会自动绑定到新创建的对象。如果不使用 newthis 将指向全局对象(在浏览器中是 window),或者在严格模式下会是 undefined

function Person(name) {
  this.name = name;
}

const person1 = new Person('Alice');
console.log(person1.name);  // 输出: Alice

// 不使用 `new`
const person2 = Person('Bob');
console.log(person2);  // 输出: undefined,因为函数没有返回值
console.log(window.name);  // 输出: Bob (非严格模式下)

4. 返回对象

通常情况下,构造函数不需要显式地 return 新创建的对象,因为它是隐式返回的。如果构造函数中有 return 语句,并且返回的是一个对象,那么该对象将会覆盖默认返回的新对象。

function Person(name) {
  this.name = name;
  return { name: 'Override' };  // 显式返回一个新对象
}

const person1 = new Person('Alice');
console.log(person1.name);  // 输出: Override

但是,如果返回的不是对象,而是一个基本类型(如字符串、数字),new 仍然会返回新创建的对象。

function Person(name) {
  this.name = name;
  return 'Override';  // 返回一个字符串,`this` 不会被覆盖
}

const person1 = new Person('Alice');
console.log(person1.name);  // 输出: Alice

总结

使用 new 调用构造函数能够确保以下几个重要步骤的发生:

  1. 创建一个新对象。
  2. 将新对象的原型链接到构造函数的原型对象。
  3. 绑定 this 到新创建的对象。
  4. 隐式地返回这个新对象。

这些特性使得构造函数可以方便地用于对象的创建和初始化。如果不使用 new 调用构造函数,以上步骤将不会自动发生,这可能导致意外的行为或错误。

标签:name,对象,JS,Person,person1,new,构造函数
From: https://blog.csdn.net/2301_79858914/article/details/141089368

相关文章

  • 鸿蒙-JS-第二周day01
    数组1什么是数组1)数组是值的有序集合。2)每个值叫做一个元素。3)每个元素在数组中有一个位置,以数字表示,称为索引(有时也称为下标)。4)数组的元素可以是任何类型。5)数组索引从0开始,数组最大能容纳4294967295个元素。2创建数组2.1使用数组直接量//......
  • C++类和对象(中):构造函数、析构函数、拷贝构造、赋值运算符重载
    文章目录C++类和对象4、类的默认成员函数5、构造函数5.1构造函数的特点5.2实例分析6、析构函数6.1析构函数的特点6.2实例分析7、拷贝构造函数7.1拷贝构造函数的特点7.2实例分析7.3浅拷贝和深拷贝8、赋值运算符重载8.1运算符重载8.1.1运算符重载的特点8.1.2实例分析8.......
  • ssm基于java web的商铺租赁管理系统的jsp管理系统|【源码+论文+PPT+部署视频】
    我们提供多元化的技术项目服务,涵盖Java、PHP、Python等编程语言,以及前端开发、人工智能、大数据、单片机开发、ASP.NET、物联网等领域。我们还提供简历模板、面试题库和学习资料,帮助用户提升技术能力和就业竞争力。我们的服务内容包括:免费功能设计、任务书和开题报告撰写、中......
  • ssm农产品预售平台的设计和实现jsp管理系统|【源码+论文+PPT+部署视频】
    我们提供多元化的技术项目服务,涵盖Java、PHP、Python等编程语言,以及前端开发、人工智能、大数据、单片机开发、ASP.NET、物联网等领域。我们还提供简历模板、面试题库和学习资料,帮助用户提升技术能力和就业竞争力。我们的服务内容包括:免费功能设计、任务书和开题报告撰写、中......
  • JS Promise 一分钟带你深度理解
    JSPromise一分钟带你深度理解文章目录JSPromise一分钟带你深度理解一、什么是Promise?二、为什么使用Promise?三、基础知识四、创建Promise五、Promise使用1、链式调用2、顺序执行3、处理多个Promise4、错误处理六、高级用法七、最佳实践八......
  • 牛客JS题(三十八)双向绑定
    注释很详细,直接上代码涉及知识点:浅度监听作用域链Object.defineProperty题干:我的答案<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/></head><body><style>ul{list-sty......
  • JSP广州中小学学校信息管理系统_j3o8r(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统功能:用户,区域分类,招生信息,机构活动,成绩排名,获奖排名,社团排名,特色排名开题报告内容一、项目背景与意义随着教育信息化步伐的加快,广州作为教育强市,对......
  • node.js 学习
    今天为大家推荐一款VSCode的插件FittenCode,FittenCode是由非十大模型驱动的AI编程助手,它可以自动生成代码,提升开发效率,帮您调试Bug,节省您的时间,另外还可以对话聊天,解决您编程碰到的问题。https://www.runoob.com/nodejs/fitten-code-nodejs.html#post-25998-10更改node......
  • CommonJS、AMD、CMD、UMD、ES6
    一、commonJs1、CommonJS的发扬光大和nodejs相关,CommonJS用同步的方式加载模块。在服务器端,读取快。限于网络原因,不适合在浏览器端使用;2、输出module.exports,加载require;//model1.jsvarage=11functionsay(){console.log(age);}module.exports={say}/......
  • 基于SpringBoot+MySQL+SSM+Vue.js的物业管理系统(附论文)
    获取见最下方名片信息获取见最下方名片信息获取见最下方名片信息演示视频基于SpringBoot+MySQL+SSM+Vue.js的物业管理系统(附论文)技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+Sprin......