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();

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

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

相关文章

【第4讲】XTuner 微调 LLM:1.8B、多模态、Agent

目录 1 简介2 基础知识2.1 finetune简介2.2 xtuner简介2.2.1 技术架构2.2.2 快速上手xtuner 2.3 8GB显存玩转LLM&#xff08;intern1.8b&#xff09;2.3.1 flash attention vs deepspeed zero2.3.2 相关版本更新和使用 2.4 多模态LLM2.4.1 多模态LLaVA基本原理简介2.4.2 快速上…

Linux的学习之路:18、进程间通信(2)

摘要 本章主要是说一下命名管道和共享内存 目录 摘要 一、命名管道 1、创建一个命名管道 2、匿名管道与命名管道的区别 3、命名管道的打开规则 4、代码实现 二、system V共享内存 1、共享内存 2、共享内存函数 三、代码 四、思维导图 一、命名管道 1、创建一个命…

24年做抖店,如何快速脱离“商家新手期”?

我是王路飞。 这个“新手期”不是你们理解的那种店铺新手期&#xff0c;现在抖店没有新手期这一说了。 主要说的是从商家角度来说&#xff0c;如何在最短时间内从一个没有电商经验的新手&#xff0c;蜕变成一个有经验、有流程、有操作、甚至有一定数据的“老玩家”&#xff1…

CentOS7配置固定ip

一、打开配置文件 vi /etc/sysconfig/network-scripts/ifcfg-ens33 二、更改配置文件的参数 将BOOTPROTO的属性值改为static 或者是直接注销原来的重新写更改为静态的 三、在配置文件中设置ip地址和网关 1、IP地址的前三段需要和主机的 VMnet8 网卡的ip保持一致&#xff08;主…

js 打印网页时没有背景色,window.print打印背景色丢失

页面效果 打印效果 需要在打印的容器里增加下面代码 /*webkit 为Google Chrome、Safari等浏览器内核*/ -webkit-print-color-adjust: exact; /*解决火狐浏览器打印*/ print-color-adjust: exact; color-adjust: exact; 完整写法 我为了方便直接写*&#xff0c;这样所有元素都…

IDEA 2024.1 配置 AspectJ环境

最近Java课设在学习AspectJ&#xff0c;做PPT顺便写一个博客 下载包 首先去AspectJ官网下载一个JAR包并安装 安装完最后可以按照他的建议配置一下 然后找到AspectJ的安装位置的lib目录&#xff0c;把三个包拷到自己项目中的lib目录下 由于最新版的IDEA已经不支持AspectJ了 所…

【Linux】在ubuntu快速搭建部署K8S(1.27)集群

ubuntu快速安装K8s1.27 &#xff08;一&#xff09;环境说明1.硬件环境2.Ubuntu环境设置 &#xff08;二&#xff09;安装配置containerd1.安装2.配置3.启动 &#xff08;三&#xff09;所有节点操作1.安装runc和cni2.节点系统设置、关闭临时分区3.修改内核参数4.安装 kubeadm、…

新手小白,在数学建模的过程中应该怎么分工?

大家知道&#xff0c;数学建模竞赛是需要一个团队的三个人在三天或四天的时间内&#xff0c;完成模型建立&#xff0c;编程实现和论文写作的任务&#xff0c;对许多第一次参加建模或者建模经验比较欠缺的团队来说&#xff0c;是时间紧任务重的&#xff0c;那么怎么办呢&#xf…

EelasticSearch的介绍和基于docker安装

1.概述 Elasticsearch 是一个基于 Apache Lucene 构建的开源分布式搜索引擎和分析引擎。它专为云计算环境设计&#xff0c;提供了一个分布式的、高可用的实时分析和搜索平台。Elasticsearch 可以处理大量数据&#xff0c;并且具备横向扩展能力&#xff0c;能够通过增加更多的硬…

程序设计语言—Python几种语言区别的总结

程序设计语言篇—Python&几种语言区别的总结 文章目录 程序设计语言篇—Python&几种语言区别的总结一、Python介绍&理解1.1 Python基础1.2 Python规范 二、标识符&变量&常量三、数据类型&运算符和表达式3.1 数据类型3.2 运算符&表达式 四、常用的函…

真实世界的密码学(三)

原文&#xff1a;annas-archive.org/md5/655c944001312f47533514408a1a919a 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第十一章&#xff1a;用户认证 本章涵盖了 认证人员和数据之间的区别 用户认证&#xff0c;根据密码或密钥对用户进行身份验证。 用户辅助认…

光伏仿真设计需要用到的工具有哪些?

随着全球能源结构的转型和可持续发展战略的深入实施&#xff0c;光伏发电作为一种清洁、可再生的能源形式&#xff0c;正日益受到广泛关注和应用。在光伏系统的设计和优化过程中&#xff0c;光伏仿真设计工具发挥着至关重要的作用。那么&#xff0c;光伏仿真设计需要用到的工具…

书生·浦语大模型实战营之微调 Llama 3 实践与教程 (XTuner 版)

书生浦语大模型实战营之微调 Llama 3 实践与教程 (XTuner 版) Llama 3 近期重磅发布,发布了 8B 和 70B 参数量的模型,XTuner 团队对 Llama 3 微调进行了光速支持!!!开源同时社区中涌现了 Llama3-XTuner-CN 手把手教大家使用 XTuner 微调 Llama 3 模型。 XTuner:http:/…

【InternLM 实战营第二期笔记04】XTuner微调LLM:1.8B、多模态、Agent

一、微调的原因 大模型微调&#xff08;Fine-tuning&#xff09;的原因主要有以下几点&#xff1a; 适应特定任务&#xff1a;预训练的大模型往往是在大量通用数据上训练的&#xff0c;虽然具有强大的表示学习能力&#xff0c;但可能并不直接适用于特定的下游任务。通过微调&…

京东商品详情数据采集API接口|附京东商品数据返回PHP多语言高并发

京东获得JD商品详情 API 返回值说明 item_get-获得JD商品详情 API测试 注册开通 jd.item_get 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址…

接收区块链的CCF会议--SecureComm 2024 截止5.10 附录用率

会议名称&#xff1a;SecureComm CCF等级&#xff1a;CCF C类会议 类别&#xff1a;网络与信息安全 录用率&#xff1a;2022年录用率33%&#xff08;43/130) Topics Security and privacy in computer networks (e.g., wired, wireless, mobile, hybrid, sensor, vehicular,…

【Flutter】自动生成图片资源索引插件二:FlutterAssetsGenerator

介绍 FlutterAssetsGenerator 插件 &#xff1a;没乱码&#xff0c;生成的图片索引命名是小驼峰 目录 介绍一、安装二、使用 一、安装 1.安装FlutterAssetsGenerator 插件 生成的资源索引类可以修改名字&#xff0c;我这里改成R 2. 根目录下创建assets/images 3. 点击image…

react学习(一)之初始化一个react项目

React 是一个用于构建用户界面&#xff08;UI&#xff09;的 JavaScript 库&#xff0c;用户界面由按钮、文本和图像等小单元内容构建而成。React 帮助你把它们组合成可重用、可嵌套的 组件。从 web 端网站到移动端应用&#xff0c;屏幕上的所有内容都可以被分解成组件&#xf…

JMeter性能测试系列一初识JMeter

1.JMeter介绍 Apache组织的Stefano Mazzocchi是JMeter项目的创始人。编写JMeter最初的目的是为了测试server的性能(后期被Tomcat替代)。随后&#xff0c;JMeter在Apache组织内部开始被其他项目所使用&#xff0c;并最终推广出来&#xff0c;成为独立的软件项目并不断更新&…

【vue3】插件@tsparticles/vue3、tsparticles实现粒子特效

文章目录 一、安装依赖二、全局引入三、使用 一、安装依赖 npm i tsparticles/vue3 npm i tsparticles二、全局引入 // main.js import Particles from tsparticles/vue3 import { loadFull } from tsparticlesconst app createApp(App) app.use(Particles, {init: async (e…