【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转化的方式实现深拷贝，会带来如下的问题——

对象属性的enumerable: false会失效
Date数据类型会被转化为字符串
RegExp，Error数据类型会被转换成空对象 {}
undefined，function，symbol的属性会丢失
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);
    }
  }