1. 基本概念
在 JavaScript 语言中,不变性(Immutability)是一个重要的概念。它指的是对象一旦创建后其状态就不能改变。在函数式编程中,不变性是实现纯函数的基础,因为它可以确保函数的输出只依赖于输入参数,而不受外部状态的影响。对于 JavaScript 这样的多范式语言来说,理解并应用不变性可以带来代码的可预测性和易于测试等好处。
对象不变性在任何编程语言中都是一个重要的概念。它会限制对象修改并防止不需要的更改。简而言之,对象的不变性就是将它的状态变为只读的,下面就来看看在 JavaScript 中的对象不变性。
在 JavaScript 中,一个对象可以有一个或多个属性。每个属性都是一个键值对,下面是一个对象:
const user = {name: "张三",age: 24,
};
这里使用 const 关键字定义了一个对象,它具有两个属性。默认情况下,对象是可变的,也就是说,我们可以给对象添加新属性,修改现有属性或者删除已有属性。而在某些情况下,我们可能希望对象是不可变的,即不能添加新属性,也不能修改和删除已有属性。
2. 冻结对象 Object.freeze()
使用Object.freeze()
方法可以使一个对象变为不可变的。这意味着不能添加新属性,也不能修改现有属性的值,而且该对象的原型也是不可变的。
const obj = Object.freeze({ key: "value" });
obj.key = "new value"; // 尝试修改将失败,obj.key 仍为 'value'
顾名思义,freeze() 就是用来冻结对象的。只需要将不想被更改的对象传递给它,就会返回该对象的不可变版本:
const user = {name: "张三",age: 24,
};const freezeUser = Object.freeze(user);
freezeUser.age = 18;
console.log(freezeUser.age); // 24
这时,新的对象就不可变了,相当于被冻结了。
在 JavaScript 了,提供了一个 Object.isFrozen(),它可以用来判断一个对象是否被冻结:
Object.isFrozen(user); // false
Object.isFrozen(freezeUser); // true
需要注意的是, Object.freeze() 方法不会影响嵌套对象,对于嵌套对象,冻结后仍然是可以操作的:
const user = {name: "张三",age: 24,article: {title: "learn javascript",number: 1234,},
};const freezeUser = Object.freeze(user);
freezeUser.age = 18;
freezeUser.article.number = 666;
console.log(freezeUser.age); // 24
console.log(freezeUser.article.number); // 666
可以看到,使用 Object.freeze() 方法冻结的对象,age 是不可以更改的,但是嵌套对象的 number 属性还是可以修改的。如果需要冻结嵌套对象使其不可变,就需要使用循递归来逐级冻结,下面是一个简单的递归冻结实现:
const deepFreeze = (obj) => {Object.keys(obj).forEach((prop) => {if (typeof obj[prop] === "object") {deepFreeze(obj[prop]);}});return Object.freeze(obj);
};deepFreeze(user);
Object.freeze()方法除了可以用来冻结对象以外,还可以用于冻结数组,使其不可变:
const number = [1, 2, 3, 4, 5];
const freezeNumber = Object.freeze(number);
freezeNumber.push(6);
此时就会报错了:
VM210:3 Uncaught TypeError: Cannot add property 5, object is not extensible
3. 密封对象 Object.seal()
Object.seal() 顾名思义就是密封对象,它是另一种使对象不可变的方法。相对于 freeze(),Object.seal() 方法仅保护对象不能添加和删除属性,它允许更新现有的属性。
const user = {name: "张三",age: 24,
};const sealUser = Object.seal(user);
sealUser.age = 18;
delete sealUser.name;
console.log(sealUser); // {name: '张三', age: 18}
可以看到,我们识图删除对象中的 name 属性,删除失败;而修改已有的 age 属性,修改成功。
Object.seal()方法和 Object.freeze()一样,对于嵌套的对象,是无法实现不可变的,如果想要实现,同样要使用递归来一层层来密封对象。
JavaScript 同样提供了一个 Object.isSealed() 方法来确认对象的密封状态:
Object.isSealed(user); // false
Object.isSealed(sealUser); // true
4. const 关键字
你是否会认为,使用 const 关键字也能达到相同的结果呢?实际上,他们是不一样的,当我们使用 const 关键字来创建对象时,它会阻止我们重新分配值,但是我们可以更新、添加、删除已有对象的属性:
const user = {name: "张三",age: 24,
};delete user.age;
user.height = 180;
user.name = "hello";
console.log(user); // {name: 'hello', height: 180}
而如果我们给 user 重新赋值,那么就会报错了:
Uncaught TypeError: Assignment to constant variable.
因此,const 关键字仅仅是提供了赋值的不变性,而不会提供值的不变性(对于对象来说)。
5. 使用不可变库
如 Immutable.js 提供了一套完整的不可变数据结构,包括 List、Map、Set 等。这些数据结构在被“修改”时实际上会返回一个新的实例,而不是直接修改原对象。
const { Map } = require("immutable");
let map1 = Map({ a: 1, b: 2 });
let map2 = map1.set("b", 50); // 返回新的Map实例
console.log(map1.get("b")); // 输出 2
console.log(map2.get("b")); // 输出 50
6. 浅克隆与深克隆
通过创建对象的副本来进行“修改”,这种方式适用于简单的对象结构。对于复杂的嵌套对象,则需要进行深克隆。
function shallowClone(obj) {return { ...obj };
}function deepClone(obj) {return JSON.parse(JSON.stringify(obj));
}
7. 总结
本文简单介绍了几种可以用于使 JavaScript 不可变的方法。简而言之,Object.seal()方法会阻止更新、删除和向对象添加新属性,Object.seal()只会阻止添加和删除属性。、
除此之外,JavaScript 还提供了一个 Object.preventExtensions()方法,该方法可以让一个对象变的不可扩展,也就是永远不能再添加新的属性。
const user = {name: "张三",age: 24,
};const newUser = Object.preventExtensions(user);
newUser.height = 180;
console.log(newUser); // {name: '张三', age: 24}
不变性的优点
-
减少副作用:不可变对象不会因为程序其他部分的修改而发生改变,这减少了潜在的副作用。
-
提高并发安全性:在多线程环境中,不可变对象不需要额外的同步机制来保证数据的一致性。
-
简化调试:由于对象的状态不会改变,因此更容易追踪到问题发生的源头。
-
增强缓存能力:如果一个对象是不可变的,那么它的哈希值可以在创建时计算一次,之后就不再需要重新计算。
-
优化性能:某些情况下,使用不可变数据结构可以避免不必要的复制操作,从而提高性能。