javascript EcmaScript5 新增对象之Object.freeze

　　我们都知道在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 现在实现了深冻结一个对象了

参考文章链接