JS宏进阶: 工厂函数与构造函数

一、构造函数

在JavaScript中,构造函数是一种用于创建和初始化对象的特殊函数。构造函数的名字通常以大写字母开头,以区分于普通函数。通过new关键字调用构造函数,可以创建一个新的实例对象,并自动执行构造函数内部的代码来初始化这个对象。

1、构造函数的定义

function Person(name, age) {this.name = name;this.age = age;this.sayHello = function() {console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);};
}

上述示例,是一个似曾相识的示例。因为在“函数、对象和类(一)”这一章节中简单讲解this关键字时的一个示例。在这个例子中,Person是一个构造函数,它接受两个参数name和age,并将它们赋值给新对象的属性。同时,它还定义了一个方法sayHello。

2、使用new关键字创建实例

const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);person1.sayHello(); // 输出: Hello, my name is Alice and I am 30 years old.
person2.sayHello(); // 输出: Hello, my name is Bob and I am 25 years old.

使用new关键字调用Person构造函数,会创建两个新的Person对象person1和person2,它们分别有自己的name和age属性,以及sayHello方法。

3、只能使用new关键字进行实例化

function Person(name, age) {this.name = name;this.age = age;this.sayHello = function() {console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);};
}function Person1(name, age) {if (!(this instanceof Person1)) throw new Error("只能通过new实例化");this.name = name;this.age = age;this.sayHello = function() {console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);};
}let p = Person(); //不报错
let p1 = Person1(); //抛出异常

效果图如下所示:

4、构造函数执行过程

创建一个新的空对象。

将这个新对象的__proto__属性指向构造函数的prototype对象。

在新对象的上下文中执行构造函数的代码(即this指向新对象)。

如果构造函数没有显式返回对象,则默认返回新对象。

4.1、prototype属性

每个构造函数都有一个prototype属性,这是一个对象,包含应该由构造函数的所有实例共享的属性和方法。

function Person(name, age) {this.name = name;this.age = age;
}Person.prototype.greet = function() {console.log(`Hi, I'm ${this.name}.`);
};const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);person1.greet(); // 输出: Hi, I'm Alice.
person2.greet(); // 输出: Hi, I'm Bob.

在构造函数外部,可以通过prototype属性在构造函数的原型链添加新的方法,如上述示例中,使用Person.prototype.greet = function(){} 的形式为Person对象添加了一个新的方法greet。

4.2、this关键字的用途

this是引用当前对象的属性或方法的关键字,在ES6类中,指向的是类的实例。上述每一个示例中都使用到了this关键字。

5、优点和缺点

优点:

  • 构造函数提供了一种方便的方式来创建和初始化对象。
  • 通过prototype可以实现方法和属性的共享,节省内存。

缺点

  • 每个实例上的方法(如果不在prototype上定义)不会共享,会浪费内存。
  • 使用构造函数创建对象相对于使用对象字面量或类(ES6引入)来说,语法上稍显繁琐。

二、工厂函数

在JavaScript中,工厂函数是一种创建对象的模式,它不同于使用构造函数或类的方式。工厂函数是一个普通的函数或者说是一个高阶函数,它返回一个新对象,而不是使用new关键字来实例化对象。这种模式在需要创建多个相似对象时非常有用,尤其是在不需要使用原型链继承或类的复杂结构时。

1、特点

简单性和灵活性

工厂函数是普通的函数,因此它们比使用class或构造函数更简单和灵活。你可以轻松地返回不同类型的对象,或者根据需要添加额外的逻辑来创建对象。

不依赖new关键字:使用工厂函数时,不需要使用new关键字来创建对象,这减少了错误的可能性(例如忘记使用new)。

无原型链继承的复杂性:工厂函数创建的对象不会自动共享方法或属性通过原型链,这有时可以简化代码,尤其是当不需要这种共享时。

易于理解和使用:工厂函数的代码通常更易于理解和维护,特别是对于不熟悉JavaScript原型链和构造函数的人来说。

2、示例

function createPerson(name, age) {return {name: name,age: age,greet: function() {console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);}};
}const alice = createPerson('Alice', 30);
const bob = createPerson('Bob', 25);alice.greet(); // 输出: Hello, my name is Alice and I am 30 years old.
bob.greet();   // 输出: Hello, my name is Bob and I am 25 years old.

3、工厂函数的优势

  • 语法简洁性:工厂函数通常比构造函数更简洁,因为它们不需要使用new关键字。
  • 原型链继承:构造函数允许通过原型链共享方法和属性,这在需要节省内存或实现继承时很有用。工厂函数创建的对象不会自动共享这些方法或属性,但你可以通过其他方式(如使用Object.create或手动复制方法)来实现共享。
  • 实例识别:使用构造函数创建的对象可以通过instanceof操作符识别为特定构造函数的实例。工厂函数创建的对象没有这种内置的实例识别机制。

三、工厂函数与构造函数的比较

工厂函数构造函数
定义普通的函数,用于创建并返回一个对象特殊的函数,用于创建对象,需要使用new关键字
灵活性高,可以创建不同类型或结构的对象较低,通常用于创建具有相同结构和行为的对象
代码简洁性简洁,不需要使用new关键字复杂,需要使用new关键字,并注意this的指向
实例识别无法通过instanceof识别对象类型可以通过instanceof识别对象类型
原型链继承无法自动通过原型链共享方法和属性可以通过原型链共享方法和属性
使用场景适用于需要创建不同类型或结构对象的场景适用于需要创建具有相同结构和行为对象的场景

四、总结

工厂函数和构造函数都是JavaScript中用于创建对象的常见模式。它们各有特点,适用于不同的场景。选择哪种模式主要取决于项目的具体需求和代码的复杂性。在实际开发中,可以根据需要灵活选择使用哪种模式来创建对象。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/67669.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

03_UI自适应

因为Canvas大小是始终和屏幕一致的 所以设置Canvas的屏幕大小 通常设置为1920 * 1080 又因为屏幕的图像及按钮如果想适配各种显示屏需要锁定长或者宽, 之后利用钉子将其他图像利用创建空节点定在左右或者上下两侧 比如unity编辑器通常是锁定宽的,那我…

网络安全——常用语及linux系统

一、网络安全概念及法规 网络安全:网络空间安全 cyber security 信息系统:由计算机硬件、网络和通信设备、计算机软件、信息资源、信息用户和规章制度组成的已处理信息流为目的的人机一体化系统 信息系统安全三要素(CIA) 保密…

算法日记6.StarryCoding P52:我们都需要0(异或)

一、题目 二、题解: 1、对于这道题,题意为让我们寻找一个数x使得 b[i]a[i]^x, 并且b[1]^b[2]^b[3]^ b[4]^b[5]....0 2、我们把b[i]给拆开,可以得到 3、又因为^满足结合律,因此,可以把括号给拆开 4、接着…

机试准备第二天

第一题是长度最小的子数组&#xff0c;初次接触滑动窗口&#xff0c;先调节窗口末端即符合要求的子数组的最后一位&#xff0c;再依次缩小窗口初始位置从而找到最小满足题意的子数组。 class Solution { public:int minSubArrayLen(int target, vector<int>& nums) …

提问:玩游戏输入法总弹出来咋回事哎

玩游戏时输入法总弹出来的问题&#xff0c;通常与电脑的输入法设置、操作系统配置以及游戏程序的兼容性有关。以下是一些常见的解决方法&#xff1a; 一、修改输入法快捷键 禁用不必要的输入法&#xff1a; 在系统的语言设置中&#xff0c;暂时禁用非活动的输入法&#xff0c;…

团体程序设计天梯赛-练习集——L1-012 计算指数

前言 这道题简单至极&#xff0c;几行代码就全都解决了。这次多来几个写法&#xff1b; L1-012 计算指数 真的没骗你&#xff0c;这道才是简单题 —— 对任意给定的不超过 10 的正整数 n&#xff0c;要求你输出 2 的n次方 。不难吧&#xff1f; 输入格式&#xff1a; 输入…

通过内核模块按fd强制tcp的quickack方法

一、背景 tcp的quickack功能是为了让ack迅速回发&#xff0c;快速响应&#xff0c;减少网络通讯时延&#xff0c;属于一个优化项&#xff0c;但是tcp的quickack是有配额限制的&#xff0c;配置是16个quick&#xff0c;也就是短时间内quickack了16次以后&#xff0c;这个配额为…

nginx实现TCP反向代理

当前实验环境&#xff1a; nginx已安装版本1.11.13 需要动态扩展安装模块nginx_tcp_proxy_module&#xff0c;实现tcp反向代理 实验步骤&#xff1a; 1、nginx当前版本1.11.13&#xff08;nginx已安装&#xff09; # /alidata/nginx/sbin/nginx -v nginx version: nginx/1.1…

csp22前2题

一幅长宽分别为 nn 个像素和 mm 个像素的灰度图像可以表示为一个 nmnm 大小的矩阵 AA。 其中每个元素 AijAij&#xff08;0≤i<n0≤i<n、0≤j<m0≤j<m&#xff09;是一个 [0,L)[0,L) 范围内的整数&#xff0c;表示对应位置像素的灰度值。 具体来说&#xff0c;一…

《汽车与驾驶维修》是什么级别的期刊?是正规期刊吗?能评职称吗?

​问题解答&#xff1a; 问&#xff1a;《汽车与驾驶维修》是不是核心期刊&#xff1f; 答&#xff1a;不是&#xff0c;是知网收录的第二批认定学术期刊。 问&#xff1a;《汽车与驾驶维修》级别&#xff1f; 答&#xff1a;省级。主管单位&#xff1a;中国机械工业联合会…

web前端1--基础

&#xff08;时隔数月我又来写笔记啦~&#xff09; 1、下载vscode 1、官网下载&#xff1a;Visual Studio Code - Code Editing. Redefined 2、步骤&#xff1a; 1、点击同意 一直下一步 勾一个创建桌面快捷方式 在一直下一步 2、在桌面新建文件夹 拖到vscode图标上 打开v…

MySQL面试题2025 每日20道【其一】

1、MySQL 中的数据排序是怎么实现的&#xff1f; 简单 在 MySQL 中&#xff0c;数据排序是通过 ORDER BY 子句来实现的。当你执行一个查询语句时&#xff0c;可以在 SELECT 语句的末尾添加 ORDER BY 来指定按照哪个列进行排序&#xff0c;以及升序&#xff08;ASC&#xff09;…

vue 学习笔记 - 创建第一个项目 idea

1、安装Vue CLI 查看npm版本号 &#xff08;可跳过&#xff09; % npm -v 11.0.0安装Vue CLI % npm install -g vue/cli2、创建项目 进入工程文件目录 % cd /Users/ruizhifeng/work/aina-client查看vue 版本号 &#xff08;可跳过&#xff09; % vue --version vue/cli 5…

网络安全---CMS指纹信息实战

CMS简介 CMS&#xff08;Content Management System&#xff09;指的是内容管理系统&#xff0c;如WordPress、Joomla等。CMS系统非常常见&#xff0c;几乎所有大型网站都使用CMS来管理其网站的内容。由于常见CMS的漏洞较多&#xff0c;因此黑客将不断尝试利用这些漏洞攻击CMS…

基于SSM的自助购药小程序设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…

anaconda安装和环境配置

文章目录 一、Anaconda下载1.从官网直接下载&#xff1a;2.从镜像站中下载&#xff1a; 二、Anaconda安装三、检测是否有Anaconda配置anaconda环境 四、 Anaconda创建多个python环境&#xff08;方便管理项目环境&#xff09;1.查看conda有哪些环境2.创建python3.6的环境3.激活…

DDD - 如何设计支持快速交付的DDD技术中台

文章目录 Pre概述打造快速交付团队烟囱式的开发团队(BAD)大前端技术中台(GOOD) 技术中台的特征简单易用的技术中台建设总结 Pre DDD - 软件退化原因及案例分析 DDD - 如何运用 DDD 进行软件设计 DDD - 如何运用 DDD 进行数据库设计 DDD - 服务、实体与值对象的两种设计思路…

Agent AI: 强化学习,模仿学习,大型语言模型和VLMs在智能体中的应用

Agent AI: 强化学习,模仿学习,大型语言模型和VLMs在智能体中的应用 “Agent AI: Surveying the Horizons of Multimodal Interaction”主要探讨了 Agent AI 技术,包括其在多模态交互中的应用、面临的问题及解决方案。Agent AI 是一种能在不同环境中感知和行动的智能体系统,…

二、模型训练与优化(5):验证优化后的模型

目录 一、在 PC 上使用 TFLite Python Interpreter 进行推理 1. 安装 TFLite Python Interpreter 2. 编写推理验证脚本 脚本说明&#xff1a; 3. 性能测试&#xff08;可选&#xff09; 二、在嵌入式平台&#xff08;STM32Cube.AI&#xff09;上验证 在嵌入式平台上对比…

【Golang 面试题】每日 3 题(三十六)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…