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

news2024/11/15 5:10:05

创建对象的方式

使用工厂方法来建造对象

在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.coloradmin.cn/o/1616149.html

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

相关文章

学习ArkTS -- 状态管理

装饰器 State 在声明式UI中&#xff0c;是以状态驱动试图更新&#xff1a; 状态&#xff08;State&#xff09;&#xff1a;指驱动视图更新的数据&#xff08;被装饰器标记的变量&#xff09; 视图&#xff08;View&#xff09;&#xff1a;基于UI描述渲染得到用户界面 说明…

Next.js+React+Node系统实战,搞定SSR服务器渲染

Next.jsReactNode系统实战&#xff0c;搞定SSR服务器渲染 Next.js React Node.js 实战&#xff1a;实现服务器端渲染&#xff08;SSR&#xff09; 项目概述 在这个项目中&#xff0c;我们将探讨如何使用 Next.js、React 和 Node.js 来构建一个服务器渲染的 web 应用程序。通…

无人驾驶 自动驾驶汽车 环境感知 精准定位 决策与规划 控制与执行 高精地图与车联网V2X 深度神经网络学习 深度强化学习 Apollo

无人驾驶 百度apollo课程 1-5 百度apollo课程 6-8 七月在线 无人驾驶系列知识入门到提高 当今,自动驾驶技术已经成为整个汽车产业的最新发展方向。应用自动驾驶技术可以全面提升汽车驾驶的安全性、舒适性,满足更高层次的市场需求等。自动驾驶技术得益于人工智能技术的应用…

unity读写本地excel_2024.4.22

using System.Collections; using System.Collections.Generic; using UnityEngine; using OfficeOpenXml; using System.IO; using Excel; using System.Data; using System; /// <summary> /// https://blog.csdn.net/Xz616/article/details/128893023 /// Unity3D操作…

【入门篇】本章包括创建云项目、数据库的使用、云存储管理、云函数的基本使用、实战举例(小程序之云函数开发入门到使用发布上线实操)

云函数 云函数相当于服务器接口的概念,它并属于小程序端代码。它是以函数的形式运行后端代码来响应事件以及调用其他服务。运行环境是Node.js。 一、基创建云函数项目 打开微信开发者工具: 打开微信开发者工具,并登录你的微信开发者账号。 创建项目: 如果还没有创建项目,你…

给字符串添加加粗标签(AC自动机+Python)

可以暴力解决&#xff0c;但是为了锻炼一下ac自动机的编程&#xff0c;我们使用ac自动机。 ac自动机主要维护两个列表&#xff0c;一个列表ch&#xff0c;ch[f][idx]表示从父节点f向idx这个方向走&#xff0c;走到的节点。另一个列表nex&#xff0c;nex[i]表示节点i回跳边的节…

机器学习 -- 分类问题

场景 探讨了一个回归任务——预测住房价格&#xff0c;用到了线性回归、决策树以及随机森林等各种算法。本次中我们将把注意力转向分类系统。我们曾经对MNIST进行了分类任务&#xff0c;这次我们重新回到这里&#xff0c;细致的再来一次。 开始 获取数据 Scikit-Learn提供了…

BFS解决FloodFill算法:(Leetcode:200. 岛屿数量)

题目链接&#xff1a;200. 岛屿数量 - 力扣&#xff08;LeetCode&#xff09; 本题由于没有给出开始搜索的位置&#xff0c;所以每一个位置都要进行一次广度优先搜索 另外为了不修改原数组数据&#xff0c;需要设置一个bool类型的二维数组vis来判断某个位置是否被搜索过 cl…

负载均衡的原理及算法

一、定义 负载均衡&#xff08;Load Balancing&#xff09;是一种计算机网络和服务器管理技术&#xff0c;旨在分配网络流量、请求或工作负载到多个服务器或资源&#xff0c;以确保这些服务器能够高效、均匀地处理负载&#xff0c;并且能够提供更高的性能、可用性和可扩展性。…

【链表】Leetcode 两两交换链表中的结点

题目讲解 24. 两两交换链表中的节点 算法讲解 只需要模拟这个过程就行了&#xff0c;但是需要注意空指针的问题&#xff0c;特别是nnext指针 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), ne…

“AI 程序员入职系列”第二弹:如何利用通义灵码光速改写项目编程语言?

通义灵码入职阿里云云原生团队后&#xff0c;已经展示过 Ta 生成单元测试和自动生成代码的强大实力。今天&#xff0c;阿里云后端工程师云徊将从项目开发的实际需求出发&#xff0c;演示通义灵码在开发工作中可提供的帮助。 通义灵码在 Git 开发项目中起到了哪些作用&#xff…

IntelliJ IDEA - Lombok supports: OpenJDK javac, ECJ

问题描述 java: You arent using a compiler supported by lombok, so lombok will not work and has been disabled.Your processor is: com.sun.proxy.$Proxy26Lombok supports: OpenJDK javac, ECJ 解决方案 在 IDEA 设置中 File -> Settings 中找到配置如下&#xff1…

医学影像增强:空间域方法与频域方法等

医学影像图像增强是一项关键技术,旨在改善图像质量,以便更好地进行疾病诊断和评估。增强方法通常分为两大类:空间域方法和频域方法。 一、 空间域方法 空间域方法涉及直接对医学影像的像素值进行操作,以提高图像的视觉质量。以下是一些常用的空间域方法: 对比度调整:通过…

【Web】2022DASCTF MAY 出题人挑战赛 题解(全)

目录 Power Cookie 魔法浏览器 getme hackme fxxkgo ezcms Power Cookie 点击login in by guest后响应头给set了一个admin0的cookie 魔法浏览器 看到魔法UA 直接在console输出即可 改UA&#xff0c;拿到flag getme 右键查看源码 抓包看到响应头&#xff0c;Apache版本…

文旅IP孵化打造抖音宣传推广运营策划方案

【干货资料持续更新&#xff0c;以防走丢】 文旅IP孵化打造抖音宣传推广运营策划方案 部分资料预览 资料部分是网络整理&#xff0c;仅供学习参考。 PPT可编辑&#xff08;完整资料包含以下内容&#xff09; 目录 文旅IP抖音运营方案 1. 项目背景与目标 - 背景&#xff1a…

uniapp IOS上架AppStore因打开相机、相册提示不明确被拒

被拒原因&#xff1a; 提示说红框标识的权限说明不够明确&#xff0c;否则用户不知道问什么要访问这个权限。 解决方案&#xff1a; 只需要我们再次打包ios的时候在manifest.json文件里&#xff0c;所用到权限的地方重新填写一下使用说明&#xff0c;再次打包提交审核即可。

Jenkins CI/CD 持续集成专题一 Jenkins的安装和配置

一 jenkins 官方教程 安装Jenkins 二 安装 2.1 安装方式一 通过安装包的package方式安装 第一步下载链接&#xff1a; Download the latest package 第二步操作方式&#xff1a;打开包并按照说明操作即可安装 2.2 安装方式二 brew安装 第一 安装最新版本jenkins brew in…

【Spring进阶系列丨最终篇】一文详解Spring中的事务控制

0、说明 本篇文章是【Spring进阶系列】专栏的最后一篇文章&#xff0c;至此&#xff0c;我们对Spring的学习就告一段落&#xff0c;接下来我会持续更新【SpringSpringMVCMyBatis整合】专栏&#xff0c;欢迎免费订阅&#xff01; 文章目录 0、说明 一、Spring事务控制1、事务的环…

集创赛Robei杯——Robei八角板7020简介

官方介绍 若贝八角板是一款FPGA开发板&#xff0c;可以用于系统设计与教育教学、竞赛、IC验证、系统控制、挖矿、云计算等用途&#xff0c;板子整体呈现正八角形&#xff0c;尺寸非常小&#xff0c;68x68mm&#xff0c;手掌心大小。虽然板子很小&#xff0c;但是功能齐全&#…

数据结构(邓俊辉)学习笔记——向量vector_01_接口与实现

文章目录 0.意图1、概述2 从数组到向量3 向量ADT接口4 Vector 模板类5 构造与析构5.1默认构造方法5.2基于复制的构造方法5.3 析构方法 0.意图 一方面是将工作学习中零星的知识点串起来&#xff0c;另一方面向量是其他数据类型的基础&#xff0c;比如栈队列等&#xff0c;所以基…