正文

如何正确理解并使用TypeScript中的引用传递：详解浅拷贝与深拷贝的区别

/0 浏览量
0408

在TypeScript这种静态类型语言中，理解引用传递的概念对于编写高效、可维护的代码至关重要。引用传递意味着当你将一个变量赋值给另一个变量时，实际上你传递的是对这个变量内存地址的引用，而不是其值的副本。这直接关系到浅拷贝和深拷贝的区别。

什么是引用传递？

在TypeScript中，当你创建一个对象或数组，并将其赋值给另一个变量时，这两个变量实际上是引用同一个内存地址。这意味着，如果一个变量对对象或数组的某个属性进行了修改，另一个变量的相应属性也会跟着改变。

let obj = { a: 1, b: { c: 2 } };
let newObj = obj;

newObj.b.c = 3;
console.log(obj.b.c); // 输出：3

在上面的例子中，obj 和 newObj 是同一个对象的两个引用。

浅拷贝

浅拷贝（Shallow Copy）创建一个新对象，但只复制父对象和子对象的一级属性。这意味着如果对象内部包含其他对象，那么这些嵌套对象并不会被复制，而是引用了原对象中的嵌套对象。

function shallowCopy(obj) {
    return JSON.parse(JSON.stringify(obj));
}

let obj = { a: 1, b: { c: 2 } };
let shallowCopiedObj = shallowCopy(obj);

shallowCopiedObj.b.c = 3;
console.log(obj.b.c); // 输出：2，原对象不受影响

浅拷贝适用于不包含嵌套对象或数组的情况，或者嵌套对象不需要复制的场景。

深拷贝

深拷贝（Deep Copy）则复制一个对象及其所有嵌套的对象。这意味着，在深拷贝之后，原对象和复制对象之间不会相互影响。

function deepCopy(obj) {
    let copy;

    // Handle the 3 simple types, and null or undefined
    if (null == obj || "object" != typeof obj) return obj;

    // Handle Date
    if (obj instanceof Date) {
        copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }

    // Handle Array
    if (obj instanceof Array) {
        copy = [];
        for (let i = 0, len = obj.length; i < len; i++) {
            copy[i] = deepCopy(obj[i]);
        }
        return copy;
    }

    // Handle Object
    if (obj instanceof Object) {
        copy = {};
        for (let attr in obj) {
            if (obj.hasOwnProperty(attr)) copy[attr] = deepCopy(obj[attr]);
        }
        return copy;
    }

    throw new Error("Unable to copy obj! Its type isn't supported.");
}

let obj = { a: 1, b: { c: 2 } };
let deepCopiedObj = deepCopy(obj);

deepCopiedObj.b.c = 3;
console.log(obj.b.c); // 输出：2，原对象不受影响

总结

  • 引用传递意味着两个变量指向同一个对象或数组。
  • 浅拷贝复制对象的一级属性，对于嵌套对象，仍使用原引用。
  • 深拷贝复制对象及其所有嵌套对象，确保新对象与原对象完全独立。

正确理解并使用浅拷贝和深拷贝对于避免潜在的bug和优化性能至关重要。选择哪种拷贝方式取决于你的具体需求和场景。

-- 展开阅读全文 --