JS - 以工厂模式和原型模式方式建造对象、JS的垃级回收机制、数组的使用

创建对象的方式

使用工厂方法来建造对象

在JS中我们可以通过以下方式进行创建对象:

var obj ={name:"孙悟空",age:18,gender:"男",sayName:function(){alert(this.name);}};var obj2 ={name:"猪八戒",age:28,gender:"男",sayName:function(){alert(this.name);}};var obj3 ={name:"沙和尚",age:38,gender:"男",sayName:function(){alert(this.name);}};obj.sayName();obj2.sayName();obj3.sayName();

但是这样去创建对象我们发现一个问题没有,那么假设我们每次去创建一个对象,都需要重复写很多代码,而我们开发中会有很多对象,当然这个需要后端的配合,但是假设我们纯纯在前端创建多个对象,而不调用后端的给我们的对象,那么我们应该如何操作呢?
这个时候我们可以通过工厂的方法创建对象,通过这种方式,我们可以大批量的创建对象。

//通过工厂方法创建对象//通过该方法可以大批量的创建对象function createPerson(name,age,gender){//在函数中创建一个新的对象var obj =new Object();//向对象中添加属性obj.name="孙悟空";obj.age=18;obj.gender="男";//将新的对象返回return obj;}var obj2 =createPerson("孙悟空",18,"男");                                                                                           console.log(obj2);function createDog(name,age){var obj=new Object();obj.name=name;obj.age=age;obj.sayHello=function(){alert(this.name);};return obj;}var obj3 =createDog("砖家",3);console.log(obj3);//使用工厂方法创建的对象,使用的构造函数都是Object//所以创建的对象都是Object这个类型//就导致我们无法区分出多种不同类型的对象

实际上就是对一个函数的重复利用,利用函数中我们定义的变量,我们只需要把我们需要的条件塞进工厂,工厂按照他内部的逻辑给我们处理达到我们想要的功能或者数据。

在JS中创建一个构造函数

构造函数是一种特殊的函数,用于初始化对象的属性和方法。但创建方式和普通函数没有区别**,不同的是构造函数习惯上首字母大写

  • 构造函数和普通函数的区别就是调用方式的不同
  • 普通函数是直接调用,而构造函数需要使用new关键字来调用

构造函数的执行流程

  1. 立刻创建一个新的对象
  2. 将新建的对象设置为函数中的this
  3. 逐行执行函数中的代码
  4. 将新建的对象作为返回值返回

使用同一个构造函数创建的对象,称之为一类对象,也将一个构造函数称为一个类
我们将通过一个构造函数创建的对象,称为是该类的实例

function Person(name,age,gender){this.name=name;this.age=age;this.gender=gender;}var per=new Person("砖家",18,"男");console.log(per);//使用instanceof可以检查一个对象是否是一个类的实例//如果是,则返回true,如果不是,则返回false//所有的对象都是Object的后代,所以任何对象和Object做instanceof检查时都会返回true

在这里插入图片描述

在构造函数中进行数值修改

创建一个Person构造函数,在Person构造函数中,为每一个对象添加了一个sayName方法,目前我们的方法是在构造函数内部创建的,也就是构造函数每执行一次就会创建一个新的SayName方法,也就是所有实例的sayName都是唯一的
,这样就导致了构造函数执行一次就会创建一个新的方法,执行10000次就会创建10000个新的方法,而10000个方法都是一模一样的,这是完全没有必要的,完全可以是所有的对象共享一个同一个方法,将方法提取出来,然后用赋值方法来引用。

function Person(name,age,gender){this.name=name;this.age=age;this.gender=gender;//向对象中添加一个方法this.sayName=fun;}//将sayName方法在全局作用域中定义//将函数定义在全局作用域,污染了全局作用域的命名空间function fun(){alert(this.name);}var per=new Person("鲁智深",18,"男");var per2=new Person("宋江",1,"男");per.sayName(); per2.sayName();console.log(per);console.log(per2);

上述代码就是根据创建的构造函数,依次弹窗展示名字。

使用原型模式举例

原型模式(Prototype Pattern)是一种常用的设计模式,用于创建对象的克隆副本。它通过使用原型对象作为模板,然后通过克隆来创建新的对象,避免了重复创建相似对象的开销。

// 原型对象
var personPrototype = {name: "Unknown",age: 0,greet: function() {console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");}
};// 使用原型对象创建新的对象
var person1 = Object.create(personPrototype);
person1.name = "Alice";
person1.age = 25;var person2 = Object.create(personPrototype);
person2.name = "鲍勃";
person2.age = 30;// 调用对象的方法
person1.greet(); // 输出 "Hello, my name is Alice and I am 25 years old."
person2.greet(); // 输出 "Hello, my name is 鲍勃 and I am 30 years old."

JS中的垃级回收机制

提到垃级回收机制,我们如果对后端语言有所了解的话,Java中的自动回收机制和C语言的手动回收机制都会有点印象。这里我们提及一下JS的垃级回收机制:

标记-清除算法:

  • JavaScript 使用标记-清除算法来进行垃圾回收。
  • 这个算法通过标记不再使用的对象,然后清除(回收)这些对象所占用的内存空间。
  • 当一个对象不再被引用时,垃圾回收器会将其标记为可回收的对象。

引用计数:

  • 引用计数是一种简单的垃圾回收算法,它通过计算对象被引用的次数来判断是否为垃圾对象。
  • 当一个对象被引用时,引用计数加一;当一个对象的引用被移除时,引用计数减一。
  • 当引用计数为零时,垃圾回收器会回收该对象。

循环引用:

  • 循环引用是指两个或多个对象之间相互引用,形成一个循环链表,导致无法通过引用计数算法判断是否为垃圾对象。
  • JavaScript 的垃圾回收器使用了其他技术,如可达性分析,来解决循环引用的问题。

垃圾回收器的触发时机:
垃圾回收器的触发时机是由 JavaScript 引擎决定的,通常在以下情况下触发:

  • 当内存达到一定阈值时。
  • 当页面处于空闲状态时。
  • 当 JavaScript 引擎认为是合适的时机。
  • obj=null;

数组

数组(Array)是一种用于存储多个值的有序集合。它是一种非常常用的数据结构,用于处理和操作一组相关的数据。

创建数组:

  • 使用方括号 [] 来创建一个空数组,或者在方括号中添加元素来创建一个包含初始值的数组。
  • 例如:let arr = []; 或 let arr = [1, 2, 3];

访问和修改数组元素:

  • 使用索引来访问和修改数组中的元素,索引从 0 开始。
  • 例如:let value = arr[0]; 或 arr[1] = 10;

数组长度:

  • 使用 length 属性来获取数组的长度,即数组中元素的个数。
  • 例如:let len = arr.length;

数组方法:

  • JavaScript 提供了许多内置的数组方法,用于对数组进行操作和转换,如 push()、pop()、shift()、unshift()、slice()、splice()、concat()、join()、sort()、reverse() 等。
  • 例如:arr.push(4); 或 let slicedArr = arr.slice(1, 3);

遍历数组:

  • 使用循环结构(如 for 循环、forEach() 方法)来遍历数组中的元素,对每个元素执行相应的操作。
    例如:
        for (let i = 0; i < arr.length; i++) {console.log(arr[i]);}arr.forEach(function(element) {console.log(element);});

多维数组:

  • JavaScript 中的数组可以是多维的,即数组中的元素也可以是数组。
    例如:let matrix = [[1, 2], [3, 4]];

数组方法的操作:
push():

push() 方法向数组的末尾添加一个或多个元素,并返回新数组的长度。
例如:arr.push(4);

pop():

pop() 方法从数组的末尾移除最后一个元素,并返回被移除的元素。
例如:let removedElement = arr.pop();

shift():

shift() 方法从数组的开头移除第一个元素,并返回被移除的元素。
例如:let removedElement = arr.shift();

unshift():

unshift() 方法向数组的开头添加一个或多个元素,并返回新数组的长度。
例如:arr.unshift(0);

slice():

slice() 方法返回一个新数组,其中包含从开始索引到结束索引(不包括结束索引)的元素。
例如:let slicedArr = arr.slice(1, 3);

splice():

splice() 方法可以用于删除、替换或插入数组中的元素,并返回被删除的元素。
例如:let removedElements =arr.splice(1, 2);

concat():

concat() 方法用于合并两个或多个数组,并返回一个新数组。
例如:let newArr = arr.concat([4, 5]);

join():

join() 方法将数组的所有元素连接成一个字符串,并返回该字符串。
例如:let str = arr.join(", ");

sort():

sort() 方法用于对数组进行排序,默认按照字符串的 Unicode 编码进行排序。
例如:arr.sort();

reverse():

reverse() 方法用于颠倒数组中元素的顺序。
例如:arr.reverse();

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

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

相关文章

【Java EE】总结12种锁策略以及synchronized的实现原理

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

基于yolov5实时实例分割

是一个结合了最新技术进展&#xff08;State-of-the-Art, SOTA&#xff09;的实时实例分割项目&#xff0c;基于著名的YOLOv5目标检测架构&#xff0c;并对其进行扩展以实现对图像中每个对象实例的精确像素级分割。以下是该项目的中文介绍&#xff1a; YOLOv5&#xff1a; YOL…

Java后端利用百度地图全球逆地理编码,获取地址

声明&#xff1a;本人是在实习项目的时候遇到的问题 一.使用Api分为四步骤全球逆地理编码 rgc 反geo检索 | 百度地图API SDK 步骤1,2自行完成 接下来去获取AK 二.申请AK 登录百度账号 点击创建应用&#xff0c;选择自己想用的服务&#xff0c;我只单选了逆地理编码&#xff…

go语言实现简单认证样例

目录 1、代码实现样例 2、postman调用 1、代码实现样例 package mainimport ("net/http""strings""github.com/dgrijalva/jwt-go""github.com/gin-gonic/gin" )var (// 密钥&#xff0c;用于验证 JWT 令牌signingKey []byte("…

【1762】java校园单车投放系统Myeclipse开发mysql数据库web结构jsp编程servlet计算机网页项目

一、源码特点 java校园单车投放管理系统是一套完善的java web信息管理系统 采用serlvetdaobean&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S 模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#…

C语言基础知识笔记——万字学习记录

Hi&#xff0c;大家好&#xff0c;我是半亩花海。本文主要参考浙大翁恺老师的C语言讲解以及其他博主的C语言学习笔记&#xff0c;进而梳理C语言的基础知识&#xff0c;为后续系统性学习数据结构和其他语言等知识夯实一定的基础。&#xff08;其他博主学习笔记的链接包括&#x…

网络服务SSH-远程访问及控制

一.SSH远程管理 1.SSH介绍 SSH&#xff08;Secure Shell&#xff09;是一种安全通道协议&#xff0c;最早是由芬兰的一家公司开发出来&#xff0c;并且在IETF &#xff08;Internet Engineering Task Force&#xff09;的网络草案基础上制定而成的标准协议。主要用来实现字符…

案例-部门管理-删除

黑马程序员JavaWeb开发教程 文章目录 一、查看页面原型二、查看接口文档三、开发1、Controller2、Service&#xff08;1&#xff09;service接口层&#xff08;3&#xff09;service实现层 3、Mapper4、Postman 一、查看页面原型 二、查看接口文档 三、开发 1、Controller 因…

短视频账号“四部定位法”,让流量噌噌上涨 沈阳短视频剪辑培训

在当下短视频的风潮中&#xff0c;企业纷纷涉足这一领域&#xff0c;希望通过短视频平台吸引用户、提升品牌知名度、促进销售转化。 然而&#xff0c;面对海量的内容和激烈的竞争&#xff0c;企业如何才能在短视频领域脱颖而出&#xff1f; 在企业涉足短视频领域之前&#xf…

用友裁应届

下半年准备来用友的24应届生们&#xff0c;请三思&#xff01;&#xff01;&#xff01; 我是23届某9研究生&#xff0c;2月份用友以绩效低为由被裁&#xff08;我一个应届生跟老员工比绩效&#xff0c;搞笑呢&#xff09;。 半年被裁&#xff0c;找工作太难了&a…

# 使用 spring boot 时,@Autowired 注解 自动装配注入时,变量报红解决方法:

使用 spring boot 时&#xff0c;Autowired 注解 自动装配注入时&#xff0c;变量报红解决方法&#xff1a; 1、使用 Resource 代替 Autowired 注解&#xff0c;根据类型注入改为根据名称注入&#xff08;建议&#xff09;。 2、在 XXXMapper 上添加 Repository 注解&#xff0…

区块链技术:NFG元宇宙电商模式

大家好&#xff0c;我是微三云周丽 随着互联网技术的迅猛发展&#xff0c;电子商务行业逐渐崛起为现代经济的重要支柱。而在这一浪潮中&#xff0c;元宇宙电商以其独特的商业模式和巨大的发展潜力&#xff0c;成为行业的新宠。其中&#xff0c;NFG作为元宇宙电商模式的代表&am…

单链表-java

此次我们主要通过数组来模拟一下单链表&#xff0c;并完成一些基本的功能。 文章目录 前言 一、单链表 二、思路模拟 1.引入变量解释 2.链表初始化 3.在头结点后插入一个结点 4.表示在第k个数后面插入一个数 5. 把第k个数后面的一个数删除掉 三、代码如下 1.代码如下&#xff1…

NDK 入门(二)—— 调音小项目

NDK 入门系列主要介绍 JNI 的相关内容&#xff0c;目录如下&#xff1a; NDK 入门&#xff08;一&#xff09;—— JNI 初探 NDK 入门&#xff08;二&#xff09;—— 调音小项目 NDK 入门&#xff08;三&#xff09;—— JNI 注册与 JNI 线程 NDK 入门&#xff08;四&#xff…

数字滤波器设计笔记1

系统结构 1.先利用matlab的simulink和FDA进行滤波器建模设计&#xff0c;通过仿真后&#xff0c;确定模型达到相应的性能要求&#xff0c;再利用verilog进行电路设计。最后使用modelsim进行功能验证。其中testbench的输入数据&#xff0c;利用matlab模型的输入数据。 2.Matlab…

最最普通程序员,如何利用工资攒够彩礼,成为人生赢家

今天我们不讲如何提升你的专业技能去涨工资&#xff0c;不讲面试技巧如何跳槽涨工资&#xff0c;不讲如何干兼职赚人生第一桶金&#xff0c;就讲一个最最普通的程序员&#xff0c;如何在工作几年后&#xff0c;可以攒够彩礼钱&#xff0c;婚礼酒席钱&#xff0c;在自己人生大事…

pytho爬取南京房源成交价信息并导入到excel

# encoding: utf-8 # File_name: import requests from bs4 import BeautifulSoup import xlrd #导入xlrd库 import pandas as pd import openpyxl# 定义函数来获取南京最新的二手房房子成交价 def get_nanjing_latest_second_hand_prices():cookies {select_city: 320100,li…

信息系统项目管理师——第5章信息系统工程(一)

近几期的考情来看&#xff0c;本章选择题稳定考4分&#xff0c;考案例的可能性有&#xff0c;需要重点学习。本章节专业知识点特别多。但是&#xff0c;只考课本原话&#xff0c;大家一定要把本章至少通读一遍&#xff0c;还要多刷题&#xff0c;巩固重点知识。 1 软件工程 软…

deepin 开源之夏重磅来袭!超优质项目已上线,欢迎来战

内容来源&#xff1a;deepin 社区 「开源之夏」是由中国科学院软件研究所“开源软件供应链点亮计划”发起并长期支持的一项暑期开源活动&#xff0c;旨在鼓励在校学生积极参与开源软件的开发维护&#xff0c;培养和发掘更多优秀的开发者&#xff0c;促进优秀开源软件社区的蓬勃…

javamail发送qq邮箱失败案例分析

文章目录 javaMail报错:Unsupported or unrecognized SSL message原因分析: ssl与tls端口总结 javaMail报错:Unsupported or unrecognized SSL message c.n.m.service.impl.EmailServiceImpl : 邮件发送异常, Mail server connection failed; nested exception is javax.m…