我们都知道在js里对象是很容易改变的
var obj1 ={ a:‘111‘ } obj1.a = ‘222‘; console.log( obj.a ) //output 222 对象的属性发生了变化
现在我们来看看es5 给我提供一个对象的新方法冻结对象(浅冻结)。
Object.freeze(obj) obj是要冻结的对象,Object.freeze()可以防止对象新增属性或方法,防止删除和修改现有的属性和方法。他其实就是让对象变成不可变的数据;
var obj = { a:‘111‘ } Object.freeze( obj ); obj.a = ‘222‘ console.log( obj.a ); //output 依然是 111 严格模式下会报错 不可修改 obj.b = ‘222‘; console.log( obj.b ) //output undefined 严格模式下会报错 不可新增 delete obj.a; console.log( obj.a ) // output 依然是111 严格模式下会报错 不可删除
熟悉js对象(深浅)拷贝的朋友就知道想jQuery extend 的方法第一个参数如果出入的是布尔值true 代表深拷贝,如果忽略直接传入多个对象就代表浅拷贝。其实对象的冻结也是有深冻结和浅冻结之分的。
var obj = { a:{ achild:‘deep‘ } } Object.freeze(obj); //我现在来改变obj对象a下的achild验证一下 Object.freeze()是否还灵验 obj.a.achild = ‘no effect‘; console.log( obj.a.achild ) //output no effect; 果然是可以改变的。 obj.a.otherchild = ‘otherchild‘; console.log( obj.a.otherchild) //output otherchild 也可以新增 delete obj.a.otherchild ; console.log( obj.a.otherchild) // output undefine obj.a.otherchild 不见了真名删除也是有效的 通过上面的例子我们可以发现Object.freeze(obj) 只可以浅冻结对象 obj.a(浅) obj.a.achild(深)
那我们想深冻结一个对象怎么办?我也可以通过Object.freeze()的特性自己创建一个深冻结函数。
function deepFreeze(obj) { var propNames = Object.getOwnPropertyNames(obj); propNames.forEach(function(name) { var prop = obj[name]; if (typeof prop == ‘object‘ && prop !== null) deepFreeze(prop); }); return Object.freeze(obj); } //现在我们来试验一下我们的函数 var obj = { a:{} } deepFreeze(obj); obj.a.achild = ‘achild‘ console.log( obj.a.achild ) //output undefine 现在实现了深冻结一个对象了
时间: 2024-10-13 12:18:59