前端JavaScript篇之对象创建的方式有哪些?

目录

  • 对象创建的方式有哪些?
    • 1. 工厂模式:
    • 2. 构造函数模式:
    • 3. 原型模式:
    • 4. 混合模式:
    • 5. 动态原型模式:
    • 6. 寄生构造函数模式:
    • 7. 字面量方式:


对象创建的方式有哪些?

JavaScript中创建对象的方式有多种,其中常用的有工厂模式、构造函数模式、原型模式、混合模式、动态原型模式和寄生构造函数模式。

1. 工厂模式:

使用一个函数封装创建对象的细节,通过调用函数来创建对象。但是对象无法和某个类型联系起来,缺乏类型识别。

function createPerson(name, age) {
  let person = {} // 创建一个空对象
  person.name = name // 给对象添加属性
  person.age = age
  person.sayHello = function () {
    // 给对象添加方法
    console.log("Hello, I'm " + this.name + '!')
  }
  return person // 返回对象
}

let person1 = createPerson('张三', 18) // 创建对象
let person2 = createPerson('李四', 20)

person1.sayHello() // 调用对象的方法
person2.sayHello()

请添加图片描述

在这个例子中,我们定义了一个 createPerson 函数,它接受两个参数 nameage。在函数内部,我们创建了一个空对象 person,并给它添加了两个属性 nameage,以及一个方法 sayHello。最后,我们返回这个对象。通过调用 createPerson 函数,我们可以创建多个对象,每个对象都有自己的 nameagesayHello 方法。

工厂模式的优点在于可以很好地封装对象的创建过程,从而提高代码的可维护性和可读性。但是,工厂模式无法识别对象的类型,因此无法使用 instanceof 运算符来判断对象的类型。另外,如果要添加新的方法或属性,需要修改工厂函数的代码,这可能会导致代码的不稳定性。

2. 构造函数模式:

使用构造函数模式创建对象,定义一个函数,通过 new 关键字调用函数,将 this 指向新建的对象,从而达到复用的目的。这种方式可以识别对象的类型。

function Person(name, age) {
  this.name = name
  this.age = age
  this.sayHello = function () {
    console.log("Hello, I'm " + this.name + '!')
  }
}

let person1 = new Person('张三', 18) // 创建对象
let person2 = new Person('李四', 20)

person1.sayHello() // 调用对象的方法
person2.sayHello()

请添加图片描述

在这个例子中,我们定义了一个 Person 构造函数,它接受两个参数 nameage。在函数内部,我们使用 this 关键字给对象添加了两个属性 nameage,以及一个方法 sayHello。使用 new 关键字调用构造函数时,会创建一个新的对象,并将 this 关键字指向这个新对象。最后,构造函数会返回这个新对象。通过调用 Person 构造函数,我们可以创建多个对象,每个对象都有自己的 nameagesayHello 方法。

构造函数模式的优点在于可以识别对象的类型,因此可以使用 instanceof 运算符来判断对象的类型。另外,如果要添加新的方法或属性,只需要在构造函数内部添加即可,这样更加灵活。但是,由于每个对象都会创建自己的方法,因此会占用更多的内存空间。

3. 原型模式:

使用原型对象来添加公用属性和方法,实现代码复用。每个函数都有一个 prototype 属性,使用原型模式创建对象,定义一个构造函数,将对象的属性和方法添加到构造函数的原型对象上。这种方式可以实现属性和方法的共享,从而节省内存空间。

function Person(name, age) {
  this.name = name
  this.age = age
}

Person.prototype.sayHello = function () {
  console.log("Hello, I'm " + this.name + '!')
}

let person1 = new Person('张三', 18) // 创建对象
let person2 = new Person('李四', 20)

person1.sayHello() // 调用对象的方法
person2.sayHello()

请添加图片描述

在这个例子中,我们定义了一个 Person 构造函数,它接受两个参数 nameage。在函数内部,我们使用 this 关键字给对象添加了两个属性 nameage。然后,我们将 sayHello 方法添加到构造函数的原型对象上。使用 new 关键字调用构造函数时,会创建一个新的对象,并将 this 关键字指向这个新对象。最后,构造函数会返回这个新对象。通过调用 Person 构造函数,我们可以创建多个对象,每个对象都有自己的 nameage 属性,以及共享的 sayHello 方法。

原型模式的优点在于可以实现属性和方法的共享,从而节省内存空间。由于每个对象共享同一个原型对象上的方法,因此不会占用额外的内存空间。另外,如果要添加新的方法或属性,只需要在原型对象上添加即可,这样更加灵活。但是,由于所有对象共享同一个原型对象,因此如果一个对象修改了原型对象上的属性或方法,会影响到其他对象。

4. 混合模式:

组合使用构造函数模式和原型模式,通过构造函数来初始化对象的属性,通过原型对象来实现函数方法的复用。结合构造函数模式和原型模式的优点,既可以识别对象的类型,又可以实现属性和方法的共享。

function Person(name, age) {
  this.name = name
  this.age = age
}

Person.prototype.sayHello = function () {
  console.log("Hello, I'm " + this.name + '!')
}

let person1 = new Person('张三', 18) // 创建对象
let person2 = new Person('李四', 20)

person1.sayHello() // 调用对象的方法
person2.sayHello()

function Student(name, age, grade) {
  Person.call(this, name, age) // 继承属性
  this.grade = grade
}

Student.prototype = Object.create(Person.prototype) // 继承方法
Student.prototype.constructor = Student // 修复 constructor

Student.prototype.study = function () {
  console.log(this.name + ' is studying in grade ' + this.grade + '.')
}

let student1 = new Student('王五', 16, 10) // 创建对象
let student2 = new Student('赵六', 17, 11)

student1.sayHello() // 调用继承自 Person 的方法
student1.study() // 调用自己的方法
student2.sayHello()
student2.study()

请添加图片描述

在这个例子中,我们定义了一个 Person 构造函数,它接受两个参数 nameage。在函数内部,我们使用 this 关键字给对象添加了两个属性 nameage。然后,我们将 sayHello 方法添加到构造函数的原型对象上。使用 new 关键字调用构造函数时,会创建一个新的对象,并将 this 关键字指向这个新对象。最后,构造函数会返回这个新对象。通过调用 Person 构造函数,我们可以创建多个对象,每个对象都有自己的 nameage 属性,以及共享的 sayHello 方法。

接着,我们定义了一个 Student 构造函数,它继承自 Person 构造函数。使用 call 方法调用 Person 构造函数,将 this 关键字指向新建的 Student 对象,并传入 nameage 参数,从而继承了 Person 构造函数的属性。然后,我们将 Student 构造函数的原型对象指向一个新的 Person 构造函数的原型对象,从而继承了 Person 构造函数的方法。最后,我们添加了一个 study 方法,用于 Student 对象自己的行为。

使用 new 关键字调用 Student 构造函数时,会创建一个新的对象,并将 this 关键字指向这个新对象。最后,构造函数会返回这个新对象。通过调用 Student 构造函数,我们可以创建多个对象,每个对象都有自己的 nameagegrade 属性,以及继承自 Person 构造函数的 sayHello 方法和自己的 study 方法。

混合模式的优点在于既可以识别对象的类型,又可以实现属性和方法的共享。通过继承构造函数模式的属性和原型模式的方法,可以更加灵活地创建对象。但是,由于需要继承两个部分的内容,因此代码量较多。

5. 动态原型模式:

动态原型模式是一种设计模式,用于在JavaScript中创建对象。它的主要思路是在构造函数内部判断是否需要初始化原型,如果需要,则在构造函数内部定义原型方法。将原型方法赋值的创建过程移动到构造函数的内部,通过对属性是否存在的判断,实现仅在第一次调用函数时对原型对象赋值一次的效果。

function Person(name, age) {
  this.name = name
  this.age = age

  // 判断是否需要初始化原型
  if (typeof this.sayHello !== 'function') {
    // 定义原型方法
    Person.prototype.sayHello = function () {
      console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.')
    }
  }
}

// 创建两个Person对象
var person1 = new Person('Alice', 25)
var person2 = new Person('Bob', 30)

// 调用原型方法
person1.sayHello() // 输出: Hello, my name is Alice and I am 25 years old.
person2.sayHello() // 输出: Hello, my name is Bob and I am 30 years old.

请添加图片描述

在上述代码中,我们定义了一个Person构造函数,它接受nameage作为参数,并将它们赋值给实例变量。然后,我们使用动态原型模式来检查是否需要初始化原型方法sayHello。如果原型中不存在sayHello方法,那么我们就在构造函数内部定义该方法。

这样做的好处是,每次创建新的Person对象时,不会重复地定义原型方法。只有在第一次创建对象时,才会初始化原型方法。这样可以节省内存,并且避免了每个实例都拥有相同的原型方法的副本。

通过使用动态原型模式,我们可以灵活地定义构造函数和原型方法,并确保它们在需要的时候被正确地初始化。

6. 寄生构造函数模式:

寄生构造函数模式是一种设计模式,它通过在一个普通的构造函数内部创建并返回一个新对象,从而实现对构造函数的扩展。这个新对象通常被称为"寄生对象"。

function Person(name, age) {
  var obj = {} // 创建一个空对象

  // 对空对象进行属性和方法的添加
  obj.name = name
  obj.age = age
  obj.sayHello = function () {
    console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.')
  }

  return obj // 返回新创建的对象
}

// 创建一个Person对象
var person = new Person('Alice', 25)

// 调用对象的方法
person.sayHello() // 输出: Hello, my name is Alice and I am 25 years old.

请添加图片描述

在上述代码中,我们定义了一个Person构造函数,它接受nameage作为参数。在构造函数内部,我们创建了一个空对象obj,并向其添加了nameage属性以及sayHello方法。

最后,我们将新创建的对象obj返回,作为构造函数的结果。这样,在调用new Person()时,会得到一个包含了指定属性和方法的新对象。

使用寄生构造函数模式可以在不改变原始构造函数的情况下,对其进行扩展。这种模式常用于需要在原始构造函数的基础上添加额外功能或修改返回对象的情况下。然而,需要注意的是,寄生构造函数模式会导致每个新对象都拥有自己的方法副本,可能会造成内存浪费。因此,在使用该模式时要谨慎考虑其适用性和性能影响。

7. 字面量方式:

字面量方式是一种直接使用花括号{}来定义对象的方式。

// 创建一个对象并定义属性和方法
var person = {
  name: 'Alice',
  age: 25,
  sayHello: function () {
    console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.')
  }
}

// 访问对象的属性和调用方法
console.log(person.name) // 输出: Alice
console.log(person.age) // 输出: 25
person.sayHello() // 输出: Hello, my name is Alice and I am 25 years old.![请添加图片描述](https://img-blog.csdnimg.cn/direct/89a64e636e56468bb8d122c13b5c64d7.png)

在上述代码中,我们使用字面量方式创建了一个名为person的对象。通过花括号{},我们直接在对象内部定义了属性nameage,以及方法sayHello

然后,我们可以通过点号.来访问对象的属性,例如person.nameperson.age。同时,我们也可以使用person.sayHello()来调用对象的方法。

字面量方式创建对象简单明了,适合创建单个对象或者只需要临时使用的对象。它不需要使用构造函数或原型,并且可以直接在对象内部定义属性和方法,非常方便。然而,由于每次创建对象都需要重新定义属性和方法,所以不适合创建大量相似的对象,这种情况下可以考虑使用其他方式,如构造函数或工厂模式。

总结:JavaScript中创建对象的方式有多种,每种方式都有其特点和适用场景,根据实际情况选择合适的方式来创建对象。工厂模式、构造函数模式、原型模式、混合模式、动态原型模式和寄生构造函数模式都是常用的创建对象的方式。在选择创建对象的方式时,需要注意代码的可读性、可维护性和性能等方面。

持续学习总结记录中,回顾一下上面的内容:
对象创建的方式有很多种。比较常见的包括工厂模式(像工厂一样创建对象)、构造函数模式(使用函数初始化对象)、原型模式(通过原型克隆对象)、混合模式(结合多种方式创建对象)、动态原型模式(在运行时扩展对象功能)、寄生构造函数模式(在构造函数内部创建对象并返回)、字面量方式(直接使用{}创建对象)。这些方式各有特点,可以根据具体需求选择最适合的方式来创建对象。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

elasticsearch增删改查

一、数据类型 1、字符串类型 (1)text (2)keyword 2、数值类型 (1)long、integer、short、byte、float、double 3、日期类型 (1)date 4、布尔类型 (1&#xff0…

【Dubbo源码二:Dubbo服务导出】

入口 Dubbo服务导出的入口:服务导出是在DubboBootstrapApplicationListener在监听到ApplicationContextEvent的ContextRefreshedEvent事件后,会触发dubboBootstrap.start(), 在这个方法中最后会导出Dubbo服务 DubboBootstrapApplicationListener Dub…

指针的学习3

目录 字符指针变量 数组指针变量 二维数组传参的本质 函数指针变量 函数指针变量的创建 函数指针变量的使用 两段有趣的代码 typedef关键字 函数指针数组 转移表 回调函数: 字符指针变量 int main() {char arr[10] "abcdef";char* p1 arr;//…

机器学习2---逻辑回归(基础准备)

逻辑回归是基于线性回归是直线分的也可以做多分类 ## 数学基础 import numpy as np np.pi # 三角函数 np.sin() np.cos() np.tan() # 指数 y3**x # 对数 np.log10(10) np.log2(2) np.e np.log(np.e) #ln(e)# 对数运算 # log(AB) log(A) logB np.log(3*4)np.log(3)np.log(4) #…

vue electron 应用在windows系统上以管理员权限打开应用

打开package.json文件,在build下的win增加配置 "requestedExecutionLevel": "requireAdministrator",

前端JavaScript篇之对闭包的理解

目录 对闭包的理解用途循环中使用闭包解决 var 定义函数的问题 对闭包的理解 闭包是指一个函数能够访问并操作其词法作用域(定义时所在的作用域)之外的变量的能力。它可以通过在一个函数内部创建另一个函数来实现。内部函数可以访问外部函数的局部变量、…

6.0 Zookeeper session 基本原理详解教程

客户端与服务端之间的连接是基于 TCP 长连接,client 端连接 server 端默认的 2181 端口,也就 是 session 会话。 从第一次连接建立开始,客户端开始会话的生命周期,客户端向服务端的ping包请求,每个会话都可以设置一个…

HTML5+CSS3+移动web——HTML 基础

目录 一、标签语法 HTML的基本框架 1. 标题标签 2. 段落标签 3. 换行和水平线 4. 文本格式化标签 5. 图像标签 6. 路径 相对路径 绝对路径 7. 超链接标签 8. 音频 9. 视频 10. 注释 二、标签结构 一、标签语法 HTML 超文本标记语言——HyperText Markup Langua…

《动手学深度学习(PyTorch版)》笔记8.3

注:书中对代码的讲解并不详细,本文对很多细节做了详细注释。另外,书上的源代码是在Jupyter Notebook上运行的,较为分散,本文将代码集中起来,并加以完善,全部用vscode在python 3.9.18下测试通过&…

计算机网络——07协议层次及服务模型

协议层次及服务模型 协议层次 网络是一个复杂的系统 网络功能复杂:数字信号的物理信号承载、点到点、路由、rdt、进程区分、应用等现实来看,网络的许多构成元素和设备: 主机路由器各种媒体的链路应用协议硬件,软件 问题是&am…

单片机学习路线(简单介绍)

学习单片机对于电子爱好者和未来的嵌入式系统工程师来说是一段激动人心的旅程。单片机因其强大的功能、灵活性以及在各种智能设备中的广泛应用,成为了电子和计算机科学领域一个不可或缺的组成部分。如果你对如何开始这段旅程感到好奇,那么你来对地方了。…

Sqlite3安装步骤

1、Sqlite3以下载文件,配置环境变量的方式进行安装。 2、下方链接为官方的下载地址。 sqlite下载地址 2.1、需要两个下载文件,解压后将他们放在一起,假设解压后的路径为E:\sqlite。 sqlite-dll-win-x64-3450100.zip sqlite-tools-win-x6…

什么是CDR数字音频广播

一、什么是数字音频广播 CDR(China DigilalRadio),即中国数字音领广播,是运用广播数字化技术,通过对音领信号进行信源编码、信道编码和载波调制传输,来实现数字音频广播业务和数据业务的播出。CDR与传统的FM调频广播相比&#xff…

【蓝桥杯冲冲冲】k 短路 / [SDOI2010] 魔法猪学院

蓝桥杯备赛 | 洛谷做题打卡day33 文章目录 蓝桥杯备赛 | 洛谷做题打卡day33题目背景题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示数据规模数据更新日志 题解代码我的一些话 【模板】k 短路 / [SDOI2010] 魔法猪学院 题目背景 注:对于 k k k 短路问…

第9章 智能租房——详情页

学习目标 掌握详情页房源数据展示功能的逻辑,能够实现在详情页上展示基本信息和配套设施 了解数据可视化,能够说出数据可视化的概念和流程 熟悉ECharts的用法和配置项,能够通过ECharts绘制常用图表,并为图表添加配置项 掌握户型…

2024年 前端JavaScript入门到精通 第一天

主要讲解JavaScript核心知识,包含最新ES6语法,从基础到API再到高级。让你一边学习一边练习,重点知识及时实践,同时每天安排大量作业,加深记忆,巩固学习成果。 1.1 基本软件与准备工作 1.2 JavaScript 案例 …

前端开发_AJAX基本使用

AJAX概念 AJAX是异步的JavaScript和XML(Asynchronous JavaScript And XML)。 简单点说,就是使用XMLHttpRequest对象与服务器通信。 它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。 AJAX最吸引人的就是它的“异步"特性&am…

python-分享篇-GUI界面开发-PyQt5-对QListWidget表格进行数据绑定

代码 # -*- coding: utf-8 -*-# Form implementation generated from reading ui file bindtable.ui # # Created by: PyQt5 UI code generator 5.11.3 # # WARNING! All changes made in this file will be lost! 对QTableWidget表格进行数据绑定from PyQt5 import QtCore, Q…

Wireshark不显示Thrift协议

使用Wireshark对thrift协议进行抓包,但是只显示了传输层的tcp协议: "右键" -> "Decode As" 选择thrift的tcp端口 将“当前”修改为Thrift,然后点击“确定” 设置后,可以发现Wireshark里面显示的协议从Tcp变…

正版软件 - Proxyman:让网络调试变得更智能、更高效

在软件开发的世界里,网络调试一直是开发者和测试工程师的痛点。传统的调试工具往往操作复杂,界面不够直观,而且性能上也难以满足现代应用的需求。今天,我要向大家介绍一款名为Proxyman的网络调试工具,它以其简洁的界面…