JavaScript 深拷贝和浅拷贝的定义

JavaScript 是一种高级、动态类型的客户端脚本语言。JavaScript为静态的HTML页面添加了功能。与大多数其他编程语言一样，JavaScript支持浅拷贝和深拷贝的概念。

浅拷贝： 当使用赋值运算符将一个引用变量复制到一个新的引用变量时，会创建一个被引用对象的浅拷贝。简单来说，引用变量主要存储它所指向对象的地址。当一个新的引用变量被赋予旧引用变量的值时，旧引用变量中存储的地址会被复制到新的引用变量中。这意味着旧引用变量和新引用变量都指向内存中的同一个对象。因此，如果对象通过任一引用变量的状态发生改变，对另一个引用变量也会有影响。让我们举一个示例来更好地了解它。

代码实现：

let employee = {
    eid: "E102",
    ename: "Jack",
    eaddress: "New York",
    salary: 50000
}
 
console.log("Employee=> ", employee);
let newEmployee = employee;    // Shallow copy
console.log("New Employee=> ", newEmployee);
 
console.log("---------After modification----------");
newEmployee.ename = "Beck";
console.log("Employee=> ", employee);
console.log("New Employee=> ", newEmployee);
// Name of the employee as well as 
// newEmployee is changed.

输出：

JavaScript 深拷贝和浅拷贝的定义

解释： 从上面的示例可以看出，当修改newEmployee的名称时，也会反映在旧的employee对象上。这可能导致数据不一致。这被称为浅拷贝。新创建的对象与旧对象具有相同的内存地址。因此，对其中任何一个对象进行更改都会改变两者的属性。为了解决这个问题，使用深拷贝。如果其中一个对象从内存中删除，另一个对象也将不存在。这两个对象在某种程度上是相互依赖的。

深拷贝：与浅拷贝不同，深拷贝会复制旧对象的所有成员，为新对象分配单独的内存位置，然后将复制的成员分配给新对象。这样，两个对象彼此独立，如果其中任何一个对象进行修改，另一个对象不受影响。而且，如果其中一个对象被删除，另一个对象仍然存在于内存中。现在，要在JavaScript中创建对象的深拷贝，我们使用JSON.parse()和JSON.stringify()方法。让我们通过一个示例更好地理解它。

代码实现：

let employee = {
    eid: "E102",
    ename: "Jack",
    eaddress: "New York",
    salary: 50000
}
console.log("=========Deep Copy========");
let newEmployee = JSON.parse(JSON.stringify(employee));
console.log("Employee=> ", employee);
console.log("New Employee=> ", newEmployee);
console.log("---------After modification---------");
newEmployee.ename = "Beck";
newEmployee.salary = 70000;
console.log("Employee=> ", employee);
console.log("New Employee=> ", newEmployee);

输出：

JavaScript 深拷贝和浅拷贝的定义

解释： JavaScript 使用 JSON.parse() 和 JSON.stringify() 方法创建了一个新对象。JSON.stringify() 方法将 JavaScript 对象转换成 JSON 字符串。然后将这个 JSON 字符串作为参数传递给 JSON.parse() 方法，将其转换成 JavaScript 对象。这种方法适用于对象较小且具有可序列化属性的情况。但是，如果对象非常大且包含某些不可序列化属性，则存在数据丢失的风险。特别是如果一个对象包含方法，JSON.stringify() 将失败，因为方法是不可序列化的。还有更好的方法可以深度克隆对象，其中一种方法是 Lodash，它还可以克隆方法。

Lodash 深度复制： Lodash 是一个提供多个实用函数的 JavaScript 库，Lodash 库最常用的函数之一就是 cloneDeep() 方法。该方法用于深度克隆一个对象，还可以克隆不可序列化属性，这是 JSON.stringify() 方法的限制。

代码实现：

const lodash = require('lodash');
let employee = {
    eid: "E102",
    ename: "Jack",
    eaddress: "New York",
    salary: 50000,
    details: function () {
        return "Employee Name: "
            + this.ename + "-->Salary: "
            + this.salary;
    }
}
 
let deepCopy = lodash.cloneDeep(employee);
console.log("Original Employee Object");
console.log(employee);
console.log("Deep Copied Employee Object");
console.log(deepCopy);
deepCopy.eid = "E103";
deepCopy.ename = "Beck";
deepCopy.details = function () {
    return "Employee ID: " + this.eid 
        + "-->Salary: " + this.salary;
}
console.log("----------After Modification----------");
console.log("Original Employee Object");
console.log(employee);
console.log("Deep Copied Employee Object");
console.log(deepCopy);
console.log(employee.details());
console.log(deepCopy.details());

输出：

JavaScript 深拷贝和浅拷贝的定义