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

ops/2024/10/19 1:28:44/

创建对象的方式

使用工厂方法来建造对象

在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() 方法)来遍历数组中的元素,对每个元素执行相应的操作。
    例如:
javascript">        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.ppmy.cn/ops/15770.html

相关文章

STM32之HAL开发—— SRAM控制原理

SRAM&#xff08;Static Random-Access Memory&#xff09; 静态随机存取存储器&#xff08;Static Random-Access Memory&#xff0c;SRAM&#xff09;是随机存取存储器的一种。所谓的“静态”&#xff0c;是指这种存储器只要保持通电&#xff0c;里面储存的数据就可以恒常保…

Baumer工业相机堡盟工业相机如何通过NEOAPISDK使用PnPEventHandler实现相机掉线自动重连 (C#)

Baumer工业相机堡盟工业相机如何通过NEOAPISDK使用PnPEventHandler实现相机掉线自动重连 &#xff08;C#&#xff09; Baumer工业相机Baumer工业相机NEOAPI SDK和PnPEventHandler事件函数的技术背景Baumer工业相机通过NEOAPISDK使用PnPEventHandler实现相机掉线自动重连功能1.引…

Flink容错机制

Flink的容错机制是一个复杂而精细的系统&#xff0c;旨在确保在分布式流处理过程中&#xff0c;即使在发生故障的情况下&#xff0c;也能保持数据的一致性和计算的正确性。以下是对Flink容错机制的详细阐述&#xff1a; 首先&#xff0c;Flink的容错机制建立在状态一致性的基础…

说说2024年暑期三下乡社会实践工作新闻投稿经验

作为一名在校大学生,我有幸自去年起参与学院组织的暑期大学生三下乡社会实践团活动。这项活动不仅是我们深入基层、服务社会的重要平台,也是展现当代大学生风采、传递青春正能量的有效途径。然而,如何将这些生动鲜活的实践故事、感人至深的瞬间传播出去,让更多人了解并受到启发…

Linux安装Docker的多版本PHP和多版本MySQL共存

1: 先安装docker 安装完后执行,权限设置 sudo usermod -aG docker $USER或者sudo usermod -aG docker kentrl#添加当前用户到Docker用户组中 sudo newgrp docker#更新用户组数据,必须执行否则无效 sudo systemctl restart docker 先看目录结构: 2:按照目录结构挂载磁盘,…

代码随想录学习Day 29

1005.K次取反后最大化的数组和 题目链接 讲解链接 思路&#xff1a;先对数组进行排序&#xff0c;保证数组中最小的值&#xff08;也就是取反后损失最小的值&#xff09;位于数组最前端。然后对数组进行遍历&#xff0c;在k次内尽可能将负数全部取反。当数组中元素全部>0…

Laravel 6 - 第八章 门面

​ 文章目录 Laravel 6 - 第一章 简介 Laravel 6 - 第二章 项目搭建 Laravel 6 - 第三章 文件夹结构 Laravel 6 - 第四章 生命周期 Laravel 6 - 第五章 控制反转和依赖注入 Laravel 6 - 第六章 服务容器 Laravel 6 - 第七章 服务提供者 Laravel 6 - 第八章 门面 Laravel 6 - …

TiDB 6.x 新特性解读 | Collation 规则

对数据库而言&#xff0c;合适的字符集和 collation 规则能够大大提升使用者运维和分析的效率。TiDB 从 v4.0 开始支持新 collation 规则&#xff0c;并于 TiDB 6.0 版本进行了更新。本文将深入解读 Collation 规则在 TiDB 6.0 中的变更和应用。 引 这里的“引”&#xff0c;…