【H2O2|全栈】JS进阶知识(八)ES6(4)

news/2024/11/24 11:15:50/

目录

前言

开篇语

准备工作

浅拷贝和深拷贝

浅拷贝

概念

常见方法

弊端

案例

深拷贝

概念

常见方法

弊端

逐层拷贝

原型

构造函数

概念

 形式

成员

弊端

显式原型和隐式原型

概念

形式

constructor

概念

形式

原型链

概念

形式

结束语


前言

开篇语

本系列博客主要分享JavaScript的进阶语法知识,本期为第八期,依然围绕ES6的语法进行展开。

本期内容为:拷贝和原型。

与基础部分的语法相比,ES6的语法进行了一些更加严谨的约束和优化,因此,在之后使用原生JS时,我们应该尽量使用ES6的语法进行代码编写。

准备工作

软件:【参考版本】Visual Studio Code

插件(扩展包):Open in browser, Live Preview, Live Server, Tencent Cloud AI Code Assistant, htmltagwrap

提示:在不熟练的阶段建议关闭AI助手

浏览器版本:Chrome

系统版本: Win10/11/其他非Windows版本

浅拷贝和深拷贝

浅拷贝

概念

对于基本数据类型,它们存储于栈内存中,浅拷贝直接就是把这份数据复制一份,依然存储在栈内存中。

而对于引用数据类型,在栈内存中存储的只是指向堆内存中数据的地址。浅拷贝只能复制这个地址,而不能真正复制里面的数据。

简而言之,浅拷贝只能实现复制一层

常见方法

ES6提供的浅拷贝的方式为Object.assign(),JQuery也为我们提供了$.clone()方法。 

弊端

由于浅拷贝只能复制引用类型数据的地址,所以复制之后的“所谓的新变量”实际上和原来的变量还是指向了堆内存中相同的数据

那么,当我们修改“新变量”中的数据时,原来的变量下存储的数据同样被改变了。

案例

来看下面的例子——

let obj1 = {name: 'aa', age: 18}

let obj2 = obj1;

obj2.age = 20;

console.log(obj1)

此时输出结果为:

很显然,我们的目的明明只是更改obj2的数据,最后却将obj1的数据更改了。 

深拷贝

概念

对于引用类型的数据,我们需要创建一个新的空对象,对数据内部的每一项都进行拷贝,并添加到空对象中,以此达到真正的意义上的拷贝。

有时,我们对象中的数据也可能是引用类型的,乃至在这些数据中,还有多层的引用类型数据嵌套。我们的深拷贝,应该不断深入至数据项的每一层,确保每一层都进行拷贝

简单来说,深拷贝就是多层拷贝,逐层进行拷贝。

常见方法

我们知道,JSON的stringify()方法可以按照对象原来的格式(结构)进行复制,而parse()方法又可以将它们转换回对象。

JSON.parse(JSON.stringify(obj))

在两次转换的过程中,parse()实际上返回了一个新的对象,由此,我们就实现了引用数据类型的深拷贝。

弊端

然而,使用JSON转化的方式实现深拷贝,会带来如下的问题——

  1. 对象属性的enumerable: false会失效
  2. Date数据类型会被转化为字符串
  3. RegExp,Error数据类型会被转换成空对象 {}
  4. undefined,function,symbol的属性会丢失
  5. NaN,-Infinity,Infinity将会被转化为null

这就会导致我们复制的新对象和原对象的数据可能会出现差异,造成拷贝失败的后果。

逐层拷贝

对此,我们处理上述问题的思路是不一次性全处理,而是分开应对各类情况。 

由于我们的数据项中可能依然有引用数据类型或多层的结构,所以我们要不断地向深层进行搜索,而递归方法就能很好的解决多层搜索的问题,即在遇到某些引用类型的数据时,重复搜索-拷贝的步骤。

假设我们的递归方法的名称为deep(ori),传入的参数ori为待拷贝变量,方法内部返回拷贝后的结果的变量res。

首先,判断这个变量是否为引用数据类型,即使用typeof运算符得到的结果为Object,如果不是,则为基本数据类型,直接使用赋值运算符=复制即可。

javascript">if (typeof ori == 'object') {} else {res = ori;
}

然后,利用构造器constructor判断数据是否为RegExp,Date和null中的一种,如是则依然直接使用=复制。

这三种情况下,数据不会是多层的结构,不需要再进入数据内部拷贝深层。

javascript">if (ori.constructor == RegExp || ori.constructor == Date || !ori) {res = ori
}

然后,判断数据是否为Array类型,这种类型的数据可以存储元素,所以需要对其进行遍历。

而Array的每一项,依然可能为Array或对象等可以存储元素的结构,因此还需要对遍历的每一项item再进行一次deep(item)(递归)。

javascript">else if (ori.constructor == Array) {res = []ori.forEach(item => res.push(deep(item)))
}

最后,剩下的情况就是对象类型,使用类似处理数组的方式处理即可。

javascript">else {res = {}for (let key in ori) {res[key] = deep(ori[key])}
}

最后,逐层拷贝的完整代码如下——

javascript">  function deep(ori) {let res;if (typeof ori == 'object') {if (ori.constructor == RegExp || ori.constructor == Date || !ori) {res = ori} else if (ori.constructor == Array) {res = []ori.forEach(item => res.push(deep(item)))} else {res = {}for (let key in ori) {res[key] = deep(ori[key])}}} else {res = ori}return res}

原型

构造函数

概念

构造函数是我们用来创建实例化对象的方法,它将传入的参数赋值给this中对应的属性。它的this指向为创建出来的实例化对象。

 形式

比方说,我们想要用构造函数Per来创建人对象,那么我们可以这样来写Per()方法——

javascript">  function Per(name, age, sex) {this.name = name;this.age = age;this.sex = sex;this.getMsg = function () {console.log(`姓名:${this.name};年龄:${this.age};性别:${this.sex}。`);}}

成员

构造函数的成员是指构造函数内部的属性,分为实例成员静态成员两种。

实例成员是构造函数内通过this创建的成员,这类成员的特点是可以被实例化,也就是可以使用下面的形式去访问——

实例.成员

静态成员是构造函数外通过构造函数名创建的成员,这类成员的特点是不可以被实例访问,但是只能使用下面的形式去访问——

构造函数名.成员

弊端

我们知道,方法也是可以作为构造函数的实例成员的。

比如,我们创建两个人对象——

javascript">let aa = Per('aa', 22, 'man');
let bb = Per('bb', 20, 'man');

对于它们的getMsg()成员,使用==进行比较,显然是不同的。

javascript">console.log(aa.getMsg == bb.getMsg); // false

因此,这种方式存在一个问题,就是我们每创建一个实例化对象调用一次方法,就需要开辟一块新的栈空间来完成一件重复的事,造成内存浪费的问题。

所以,我们需要使用一块公用的空间,来存储同一个构造函数创建出来的公用方法

如果使用静态成员方法,由于它不能被实例对象访问,所以方法的this将会失效

显式原型和隐式原型

概念

原型实际上就是一块空间,用来存储一些构造函数和实例化对象的公用方法与属性。

当我们使用到这些公用的内容时,就可以利用原型来访问,由此达到节省空间的目的。

对于构造函数,使用prototype来获取原型,这类原型就是显式原型

对于实例化对象,使用__proto__来获取原型(注意两边都有两个_哈),这类原型就是隐式原型

对于构造函数和它实例化的对象,它们的显式原型和隐式原型相同

形式

将上面的getMsg()方法添加到原型中,就像下面这样——

javascript">Per.prototype.getMsg = function () {console.log(`姓名:${this.name};年龄:${this.age};性别:${this.sex}。`);
}

那么,对于Per构造函数创建出来的所有实例化对象,都可以调用原型的getMsg()方法。

对于下面的两种方式调用getMsg(),实际上访问的是内存中的相同位置——

javascript">console.log(Per.prototype === aa.__proto__); // true

constructor

概念

constructor,中文释义为构造函数,用来从原型指回原来的构造函数

我们可以在原型中声明多个方法,然后利用constructor把它们一次性交给原来的构造函数。

形式

使用下面的三个方法,将Per实例化对象的name,age,sex属性分别输出出来——

javascript">  Per.prototype = {constructor: Per,getName() {console.log(this.name);},getAge() {console.log(this.age);},getSex() {console.log(this.sex);}}

原型链

概念

原型链,实质上就是链式查找方法。

如果在调用方法时,自身没有方法,则程序会在原型链上查找方法。

一条完整的原型链为实例=>构造函数原型=>Object=>null(报错),Object是所有构造函数、对象的原型,又叫做基类

如果在基类上依然没有找到我们需要的方法,则程序会向我们报错,提示没有该方法。

形式

最长的原型链如下——

实例化对象.prototype.__proto__.__proto__

在该位置仍然找不到目标方法时报错。

整个原型链的各个部分的转化关系示意图如下——

结束语

本期内容到此结束。关于本系列的其他博客,可以查看我的JS进阶专栏。

在全栈领域,博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历,然后把自己领悟到的一些东西总结一下,分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的,一些定义性的文字加入了笔者自己的很多理解在里面,所以仅供参考。如果有说的不对的地方,还请谅解。

==期待与你在下一期博客中再次相遇==

——临期的【H2O2】


http://www.ppmy.cn/news/1549524.html

相关文章

PyTorch——从入门到精通:PyTorch基础知识(normal 函数)【PyTorch系统学习】

torch.normal() 的用法 该函数的参数如下: normal(mean, std, *, generatorNone, outNone) 参数说明 mean: 均值,可以是一个数值(标量)或者张量。如果是张量,则指定生成正态分布的均值,形状需与标准差匹配…

Wireshark抓取HTTPS流量技巧

一、工具准备 首先安装wireshark工具,官方链接:Wireshark Go Deep 二、环境变量配置 TLS 加密的核心是会话密钥。这些密钥由客户端和服务器协商生成,用于对通信流量进行对称加密。如果能通过 SSL/TLS 日志文件(例如包含密钥的…

鸿蒙操作系统(HarmonyOS)开发的初学者了解和入门

1. 什么是鸿蒙操作系统(HarmonyOS) 鸿蒙操作系统是华为开发的一种分布式操作系统,面向多种设备(如智能手机、智能家居设备、穿戴设备、车机等)。它的特点包括: 分布式架构:支持跨设备无缝协作…

Tortoise ORM

官方文档:Tortoise ORM - Tortoise ORM v0.22.0 Documentation 简介 Tortoise ORM:异步,API和Django ORM 大多类似集成Pydantic;多用于asgi starlette / sanic / FastAPI...Sqlalchemy:支持异步,Flask / …

win10中使用ffmpeg和MediaMTX 推流rtsp视频

在win10上测试下ffmpeg推流rtsp视频,需要同时用到流媒体服务器MediaMTX 。ffmpeg推流到流媒体服务器MediaMTX ,其他客户端从流媒体服务器拉流。 步骤如下: 1 下载MediaMTX github: Release v1.9.3 bluenviron/mediamtx GitHub​​​​​…

Python编程技巧:多变量赋值的优雅艺术

在Python编程的世界里,有许多令人惊叹的语法特性,而多变量赋值就像是一颗闪耀的明珠,它不仅让代码更优雅,还能提升程序的执行效率。今天我们就深入探讨这个看似简单却蕴含深意的编程技巧。 基础认识 传统的变量赋值方式&#xff…

利用爬虫爬取网页小说

需求分析 安装requests包 pip install requests目录采集地址: h t t p s : / / w w w . 3 b q g . c c / b o o k / 60417 / https://www.3bqg.cc/book/60417/ https://www.3bqg.cc/book/60417/ 章节采集地址: h t t p s : / / w w w . 3 b q g . c …

Redis进阶Redission实现分布式锁

Redis进阶Redission实现分布式锁 基于Redis实现的各种问题怎么解决这些问题redisson实现1、导入依赖2.注册成Bean3、代码实现 基于Redis实现的各种问题 基于Redis实现的分布式锁还具有其他问题 不可重入:按照以上的逻辑,我们一个线程只能获取一次锁&am…