【H2O2|全栈】JS进阶知识（八）ES6（4）

目录

前言

开篇语

准备工作

浅拷贝和深拷贝

浅拷贝

概念

常见方法

弊端

案例

深拷贝

概念

常见方法

弊端

逐层拷贝

原型

构造函数

概念

 形式

成员

弊端

显式原型和隐式原型

概念

形式

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，如果不是，则为基本数据类型，直接使用赋值运算符=复制即可。

if (typeof ori == 'object') {} else {res = ori；
}

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

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

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

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

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

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])}
}

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

  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()方法——

  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创建的成员，这类成员的特点是可以被实例化，也就是可以使用下面的形式去访问——

实例.成员

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

构造函数名.成员

弊端

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

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

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

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

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

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

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

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

显式原型和隐式原型

概念

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

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

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

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

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

形式

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

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

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

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

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

constructor

概念

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

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

形式

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

  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】