0

0

JavaScript对象的构造函数和new操作符(实例详解)

WBOY

WBOY

发布时间:2022-05-10 18:16:45

|

3186人浏览过

|

来源于CSDN

转载

本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript对象的构造函数和new操作符(实例详解)

【相关推荐:javascript视频教程web前端

23.JavaScript对象的构造函数和操作符new

一、前言

前文讲到的对象创建方法都是直接使用let obj = {...}语法,具体方法如下:

let user = {
    name:'xiaoming',
    ...}

这样的对象创建方法虽然简单又直接,但是对象的代码无法重用,在创建很多类似对象时,代码量会很高。

立即学习Java免费学习笔记(深入)”;

此时,就需要使用构造函数,和new操作符实现相似对象的构建。

二、构造函数

如果学习过其他面向对象语言的童鞋对构造方法应该都不陌生,尤其是学习C++的童鞋应该印象会非常深刻。

构造函数概念和用途

在其他面向对象的语言中,构造函数通常是这样定义的:

构造函数是一个特殊的成员函数,名字与类名相同,创建类类型对象时由编译器自动调用,保证每个数据成员都有一个合适的初始值,并且在对象的生命周期内只调用一次。

我们可以简单的理解为,构造函数是所有对象的成员方法中,最早被调用的那个。常用于初始化对象的状态,例如人的名字、火车的节数等。

和构造函数对应的是析构函数,析构函数是所有对象的成员方法中,最后被调用的那个,常常是对象失去存在价值,用于回收对象资源。

对象的生命周期

一个对象从创建到回收,总共可以划分为3个阶段,如下图:

image-20220509094804084

其中,对象创建阶段的主要工作由构造函数完成,包括对象的初始化,关系的连接等。执行阶段主要是对象功能的调用,用于配合整个项目的执行,通常由普通函数(对象的成员函数)完成。销毁阶段由析构函数接手,用于清除对象占用的内存空间,防止内存泄漏的发生。

JavaScript构造函数

相比于其他面向对象语言,JavaScript对象的构造函数比较特殊,它可以是任何一个普通的函数,而且无需在对象中定义。只有两个约定:

  1. 构造函数的命名通常以大写开头;
  2. 构造函数智能由new操作符执行;

例如:

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

以上代码中的People函数就可以当作构造函数使用,同时它也是一个普通的函数。对象的this指针章节,我们介绍过,如果一个普通函数中使用thisthis的内容取决于调用它的对象(obj.func()),如果不使用对象调用函数,那么this在非严格模式下就是Window,严格模式下就是undefined

通常情况下,直接调用构造函数会得到不正确的结果,如果我们希望把函数当作构造函数调用,就需要使用一个新的关键字new

以下代码使用new关键字创建了两个People对象:

let xiaoming = new People('xiaoming');
let xiaohong = new People('xiaohong');
console.log(xiaoming.name);
console.log(xiaohong.name);

以下是代码的执行结果:

image-20220509101014388

三、new 关键字

当使用new调用一个函数时,这个函数就会变成构造函数,此时,引擎就会执行以下动作:

  1. 创建一个新的空对象{ },并把空对象赋值给this
  2. 执行构造函数体,通常会通过this构造对象的内部结构;
  3. 返回this的值;

你没有看错,使用new调用函数后,函数是有返回值的,即使在定义函数时没有return语句。

代码new People('xiaoming')所做的事情大概类似以下代码:

function People(name){
    this = {};//隐式的创建一个空对象
    this.name = name;
    return this;//把创建的对象返回}

所以使用new调用构造函数后,得到的是一个由构造函数塑造过的对象。

使用new关键字的好处是,我们可以书写一次构造函数代码,然后在任意的地方创建类似的对象。

例如:

let xiaoming = new People('xiaoming');let xiaohong = new People('xiaohong');let mingming = new People('mingming');

想象一下,如果对象的代码有上百行,这么做是不是比{...}方式要简便很多呢?这就是面向对象中的代码服用,可以极大程度上降低代码量,提高开发速度。

如果构造函数没有参数,我们可以省略调用时的括号:

let xiaoming = new People;//类似于这样let xiaoming = new People();//等价于这样

但是个人推荐不要使用这种特性,仅仅是告知在规范中存在这种语法。

动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版
动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包

下载

强调:

从技术上讲,任何函数(除了箭头函数,它没有自己的 this)都可以用作构造器。即可以通过 new 来运行,它会执行上面的算法。“首字母大写”是一个共同的约定,以明确表示一个函数将被使用 new 来运行。

四、匿名构造函数

如果我们只希望对象被创建一次,那么就可以简化构造函数的定义,使用new直接调用匿名函数,创建一个对象:

let xiaoming = new function(){
    this.name = 'xiaoming';}console.log(xiaoming.name);

代码的执行结果如下:

image-20220509103028104

使用匿名函数当作构造函数的结果和常规构造函数没有任何区别,唯一的区别是匿名构造函数不能重复调用(因为没有名字)。这种使用方法常用在无需复用代码的场景中。

五、构造函数的返回值

常规情况下,构造函数不需要使用return语句,它的唯一用途就是把对象的属性写入this,然后直接默认返回this对象就好了。

但是,由于JavaScript对构造函数几乎没有任何约束,如果我们在一个普通函数中写了返回语句,会发生什么呢?引擎会做下面两个选择:

  1. 如果return返回的是一个对象,就返回这个对象,不再返回this
  2. 如果return返回的是一个基础类型,则忽略返回语句,继续返回this

从引擎的处理方式中不难看出,构造函数的主要任务就是创建对象,处理并返回,如果使用构造函数返回一个基础类型,是没有意义的。

举个栗子:

function People(name){
    this.name = name;
	return {name:'Nobody'};}console.log(new People('xiaoming').name);

代码执行结果如下:

image-20220509104829230

可以看出,name为’xiaoming’的对象没有被返回,而是Nobody对象代替了xiaoming

如果使用return返回一个基础类型,案例如下:

function Dog(){
    this.name = 'hashiqi';
	return 666;}console.log(new Dog().name);

代码执行结果如下:

image-20220509114432485

可见,在返回基础类型时,return语句是不生效的。

强调:

通常对象的构造函数没有返回值,我们也没有必要利用引擎对构造函数返回值的特殊处理,编写特别的构造函数。

六、利用构造函数为对象添加方法

在构造函数中不仅可以添加对象的属性,由于JavaScript的函数同样可以赋值给变量,我们还可以用构造函数初始化对象的成员方法。

例如,我们可以给People对象增加一个sing方法:

function People(name){
    this.name = name;
    this.sing = function(){
        console.log(`${name} is a happy boy.`);
    }}let xiaoming = new People('xiaoming');xiaoming.sing();

以上代码在构造函数中为对象添加了一个方法,代码执行结果如下:

image-20220509115253349

结语

截止到目前,我们介绍的对象都只是以JavaScript的一个特殊数据类型(数据结构)角度出发的,实际上,在面向对象领域,类才是绝对的主角。

我们会在后文逐步深入介绍JavaScript的各种特性,包括面向对象知识,类、继承等。

总结

本文主要介绍了JavaScript对象的构造方法和new关键字,需要掌握并注意的点包括:

  1. 构造函数是一个常规函数,但是有一些首字母大写的约定;
  2. 箭头函数由于没有this,因此不能作为构造函数;
  3. 构造函数需要使用new关键字调用,并返回一个对象;
  4. 当构造函数本身拥有返回语句时,引擎会做特殊处理;

【相关推荐:javascript视频教程web前端

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
数据类型有哪几种
数据类型有哪几种

数据类型有整型、浮点型、字符型、字符串型、布尔型、数组、结构体和枚举等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

309

2023.10.31

php数据类型
php数据类型

本专题整合了php数据类型相关内容,阅读专题下面的文章了解更多详细内容。

222

2025.10.31

go语言 面向对象
go语言 面向对象

本专题整合了go语言面向对象相关内容,阅读专题下面的文章了解更多详细内容。

56

2025.09.05

java面向对象
java面向对象

本专题整合了java面向对象相关内容,阅读专题下面的文章了解更多详细内容。

52

2025.11.27

treenode的用法
treenode的用法

​在计算机编程领域,TreeNode是一种常见的数据结构,通常用于构建树形结构。在不同的编程语言中,TreeNode可能有不同的实现方式和用法,通常用于表示树的节点信息。更多关于treenode相关问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

539

2023.12.01

C++ 高效算法与数据结构
C++ 高效算法与数据结构

本专题讲解 C++ 中常用算法与数据结构的实现与优化,涵盖排序算法(快速排序、归并排序)、查找算法、图算法、动态规划、贪心算法等,并结合实际案例分析如何选择最优算法来提高程序效率。通过深入理解数据结构(链表、树、堆、哈希表等),帮助开发者提升 在复杂应用中的算法设计与性能优化能力。

21

2025.12.22

深入理解算法:高效算法与数据结构专题
深入理解算法:高效算法与数据结构专题

本专题专注于算法与数据结构的核心概念,适合想深入理解并提升编程能力的开发者。专题内容包括常见数据结构的实现与应用,如数组、链表、栈、队列、哈希表、树、图等;以及高效的排序算法、搜索算法、动态规划等经典算法。通过详细的讲解与复杂度分析,帮助开发者不仅能熟练运用这些基础知识,还能在实际编程中优化性能,提高代码的执行效率。本专题适合准备面试的开发者,也适合希望提高算法思维的编程爱好者。

28

2026.01.06

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

5393

2023.07.31

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

1

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号