Javascript | Object.freeze

概念

freeze 顾名思义是一个冻结对象的方法，对于一个冻结的对象，其成员不能被手动再次修改。

Example

let obj = {
	a:1,
}

Object.freeze(obj);

obj.a = 2;
console.log(obj) // a:1 

However

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


Object.freeze(obj);

obj.b.c = 100
console.log(obj.b.c)  // 100

发现该复杂对象中，c并没有被冻结，仍然会被修改，说明freeze只是做一个浅冻结，要想做深冻结，就得像深拷贝一样逐层遍历。

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

// 深度冻结
function deepFreeze(obj){

	// 先冻结第一层
	Object.freeze(obj)

	for(let key in obj){
		let prop = obj[key];
		//  三种情况不进行递归冻结 1.不是对象 2.该对象已经被冻结 3.是原型上的属性
		if(!(typeof prop === 'object') || Object.isFrozen(prop) || !(obj.hasOwnProperty(key)) ){
			continue;
		}else{
			deepFreeze(prop)
		}
	}

}


deepFreeze(obj)

obj.b.c = 100
console.log(obj.b.c)  // 2

Extension

ES6中const也有异曲同工之妙

	const arr = [1,2,3,4,5];
	arr.push(1) // success
	arr.pop() //success
	arr = [1,2,3] // Uncaught TypeError

	const obj = {a:1}
	obj.a = 2; // success
	obj = {a:3}; // Uncaught TypeError