当前位置: 首页 > news >正文

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中用于创建对象的常见模式。它们各有特点,适用于不同的场景。选择哪种模式主要取决于项目的具体需求和代码的复杂性。在实际开发中,可以根据需要灵活选择使用哪种模式来创建对象。

相关文章:

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

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

【Linux】线程全解:概念、操作、互斥与同步机制、线程池实现

🎬 个人主页:谁在夜里看海. 📖 个人专栏:《C系列》《Linux系列》《算法系列》 ⛰️ 道阻且长,行则将至 目录 📚一、线程概念 📖 回顾进程 📖 引入线程 📖 总结 &a…...

关于ubuntu命令行连接github失败解决办法

如果发现ping github.com有问题 使用sudo gedit /ect/hosts 打开host文件 添加 140.82.114.4 github.com 发现使用git 克隆失败,出现 aliaubuntu:~/文档/ctest$ git clone https://github.com/LearningInfiniTensor/learning-cxx.git 正克隆到 ‘learning-cxx’… …...

# [游戏开发] [Unity游戏开发]3D滚球游戏设计与实现教程

在这篇文章中,我们将通过一个简单的3D滚球游戏的设计与实现,讲解游戏开发中的一些关键概念和技术。游戏的核心目标是让玩家控制一个小球在跑道上左右移动,躲避障碍物并尽量向前跑,直到成功或失败。通过这一过程,我们会涉及到功能点分析、场景搭建、主体控制、游戏机制等多…...

强推未发表!3D图!Transformer-LSTM+NSGAII工艺参数优化、工程设计优化!

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Transformer-LSTMNSGAII多目标优化算法,工艺参数优化、工程设计优化!(Matlab完整源码和数据) Transformer-LSTM模型的架构:输入层:多个变量作…...

Flutter中的事件冒泡处理

在 Flutter 中,GestureDetector 的点击事件默认是冒泡的,即如果嵌套了多个 GestureDetector,点击事件会从最内层的 GestureDetector 开始触发,然后依次向外层传递。如果你希望控制事件的优先级或阻止事件冒泡,可以使用…...

昇腾环境ppstreuct部署问题记录

测试代码 我是在华为昇腾910B3上测试的PPStructure。 import os import cv2 from PIL import Image #from paddleocr import PPStructure,draw_structure_result,save_structure_res from paddleocr_asyncio import PPStructuretable_engine PPStructure(show_logTrue, imag…...

基于 Python 的财经数据接口库:AKShare

AKShare 是基于 Python 的财经数据接口库,目的是实现对股票、期货、期权、基金、外汇、债券、指数、加密货币等金融产品的基本面数据、实时和历史行情数据、衍生数据从数据采集、数据清洗到数据落地的一套工具,主要用于学术研究目的。 安装 安装手册见…...

电力场景红外测温图像绝缘套管分割数据集labelme格式2436张1类别

数据集格式:labelme格式(不包含mask文件,仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数):2436 标注数量(json文件个数):2436 标注类别数:1 标注类别名称:["arrester"] 每个类别标注的框数&am…...

数字艺术类专业人才供需数据获取和分析研究

本文章所用数据集:数据集 本文章所用源代码:源代码和训练好的模型 第1章 绪论 1.1研究背景及意义 随着社会经济的迅速发展和科技的飞速进步,数字艺术类专业正逐渐崛起,并呈现出蓬勃发展的势头。数字艺术作为创作、设计和表现形式的…...

Java中json的一点理解

一、Java中json字符串与json对象 1、json本质 json是一种数据交换格式。 常说的json格式的字符串 > 发送和接收时都只是一个字符串,它遵循json这种格式。 2、前后端交互传输的json是什么? 前后端交互传输的json都是json字符串 比如:…...

Vue项目搭建教程超详细

目录 一. 环境准备 1. 安装node.js 2. 安装Vue cli 二. 创建 Vue 2 项目 1. 命令行方式 2. vue ui方式 一. 环境准备 1. 安装node.js 可参考node.js卸载与安装超详细教程-CSDN博客 2. 安装Vue cli npm install -g vue/cli检查是否安装成功 vue --version Vue CLI …...

2025年01月蓝桥杯Scratch1月stema选拔赛真题—美丽的图形

美丽的图形 编程实现美丽的图形具体要求: 1)点击绿旗,角色在舞台中心,如图所示; 2)1秒后,绘制一个边长为 140的红色大正方形,线条粗细为 3,正方形的中心为舞台中心,如图所示; 完整题目可点击下…...

【React】插槽渲染机制

目录 通过 children 属性结合条件渲染通过 children 和 slot 属性实现具名插槽通过 props 实现具名插槽 在 React 中,并没有直接类似于 Vue 中的“插槽”机制(slot)。但是,React 可以通过 props和 children 来实现类似插槽的功能…...

计算机网络 | 什么是公网、私网、NAT?

关注:CodingTechWork 引言 计算机网络是现代信息社会的基石,而网络通信的顺畅性和安全性依赖于有效的IP地址管理和网络转换机制。在网络中,IP地址起到了标识设备和进行数据传输的核心作用。本文将详细讨论公网IP、私网IP以及NAT转换等网络技…...

如何解决Outlook无法连接到服务器的问题

Microsoft Outlook 是一款广泛使用的电子邮件客户端,它能够帮助用户高效地管理邮箱、日历和任务。然而,尽管其功能强大,用户有时会遇到“Outlook无法连接到服务器”的问题。这种问题通常会让用户无法接收或发送电子邮件,甚至可能导…...

vue2 web 多标签输入框 elinput是否当前焦点

又来分享一点点工作积累及解决方案 产品中需要用户输入一些文字后按下回车键生成标签来显示在页面上&#xff0c;经过尝试与改造完成如下&#xff1a; <template><div class"tags-view" click"beginInput"><el-tag :key"index" …...

32单片机综合应用案例——物联网(IoT)环境监测站(四)(内附详细代码讲解!!!)

无论你身处何种困境&#xff0c;都要坚持下去&#xff0c;因为勇气和毅力是成功的基石。不要害怕失败&#xff0c;因为失败并不代表终结&#xff0c;而是为了成长和进步。相信自己的能力&#xff0c;相信自己的潜力&#xff0c;相信自己可以克服一切困难。成功需要付出努力和坚…...

LabVIEW与WPS文件格式的兼容性

LabVIEW 本身并不原生支持将文件直接保存为 WPS 格式&#xff08;如 WPS 文档或表格&#xff09;。然而&#xff0c;可以通过几种间接的方式实现这一目标&#xff0c;确保您能将 LabVIEW 中的数据或报告转换为 WPS 可兼容的格式。以下是几种常见的解决方案&#xff1a; ​ 导出…...

小结: 路由协议的演进和分类

路由协议的演进和分类&#xff0c;包括其发展历史及主要应用场景。路由协议用于在网络中确定数据传输的最佳路径&#xff0c;主要分为内部网关协议&#xff08;IGP&#xff09;和外部网关协议&#xff08;EGP&#xff09; AS-AS 之间的。 路由协议的演进 1982年&#xff1a;出…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

如何在Windows本机安装Python并确保与Python.NET兼容

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

数据结构第5章:树和二叉树完全指南(自整理详细图文笔记)

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 原创笔记&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 上一篇&#xff1a;《数据结构第4章 数组和广义表》…...