js 引用 变量

在JavaScript中，“引用变量”通常指的是一个变量，它存储的是另一个对象（如数组、函数、日期等）的内存地址，而不是直接存储值本身。这意味着，当你改变引用变量所指向的对象的属性时，所有引用该对象的其他变量也会看到这些改变。

基础概念

1. 值类型与引用类型：JavaScript中的数据类型大致可以分为两类：值类型（如Number、String、Boolean、null、undefined、Symbol）和引用类型（如Object、Array、Function）。值类型变量直接存储值，而引用类型变量存储的是对象的引用（内存地址）。
2. 内存地址：在JavaScript引擎中，每个对象都存储在内存中的特定位置，这个位置有一个唯一的地址。引用变量存储的就是这个地址。

相关优势

• 共享数据：通过引用，多个变量可以共享同一个对象的数据，这在处理复杂数据结构时非常有用。
• 节省内存：对于大型对象，使用引用而不是复制整个对象可以显著节省内存。

类型

• 对象引用：最常见的引用类型，可以引用任何对象。
• 函数引用：函数也是对象，因此也可以被引用。
• 数组引用：数组是对象的一种特殊形式，同样可以被引用。

应用场景

• 回调函数：在异步编程中，经常需要将函数作为参数传递，这时就是通过引用传递函数。
• 数据结构：在处理复杂数据结构（如图、树）时，经常需要通过引用来连接不同的节点或元素。
• 事件处理：在GUI编程中，事件处理器通常是通过引用来注册和调用的。

常见问题及解决方法

问题1：为什么修改一个引用变量的属性会影响到其他引用该对象的变量？

原因：因为这些变量都引用同一个对象。当你通过一个引用修改对象的属性时，实际上是在修改内存中那个对象的属性，因此所有引用该对象的变量都会看到这些改变。

解决方法：如果你想要避免这种情况，可以在修改前创建对象的副本（深拷贝），然后修改副本。

let obj1 = { a: 1 };
let obj2 = { ...obj1 }; // 使用扩展运算符创建浅拷贝
obj2.a = 2;
console.log(obj1.a); // 输出1，obj1不受影响

问题2：如何判断一个变量是引用类型还是值类型？

解决方法：可以使用typeof运算符和instanceof运算符来判断。对于基本类型，typeof可以直接判断；对于引用类型，typeof通常返回"object"（除了函数返回"function"），这时可以使用instanceof或者Object.prototype.toString.call()来进一步判断。

console.log(typeof 123); // "number"
console.log(typeof "hello"); // "string"
console.log(typeof {}); // "object"
console.log({} instanceof Object); // true
console.log(Object.prototype.toString.call([])); // "[object Array]"

问题3：什么是深拷贝和浅拷贝？

深拷贝：创建一个新的对象，并递归地复制原对象的所有属性以及属性所引用的对象（如果属性也是对象）。这样，新对象和原对象完全独立。

浅拷贝：只复制对象的顶层属性，如果属性也是对象，则复制的是引用而不是对象本身。

解决方法：可以使用JSON方法、扩展运算符、Object.assign()等方法来实现浅拷贝；使用structuredClone()方法或者第三方库（如lodash的_.cloneDeep()）来实现深拷贝。

// 浅拷贝示例
let obj1 = { a: 1, b: { c: 2 } };
let obj2 = { ...obj1 };
obj2.b.c = 3;
console.log(obj1.b.c); // 输出3，因为obj2.b和obj1.b引用同一个对象

// 深拷贝示例（使用structuredClone）
let obj3 = structuredClone(obj1);
obj3.b.c = 4;
console.log(obj1.b.c); // 输出3，obj3.b是obj1.b的深拷贝，它们是完全独立的对象

注意：structuredClone()是较新的API，可能不在所有环境中都可用。在不支持的环境中，可以使用JSON方法或者第三方库来实现深拷贝。