资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/浅谈 JS 对象之扩展、密封及冻结三大特性

浅谈 JS 对象之扩展、密封及冻结三大特性

ChristmasBoy / 3532人阅读

摘要：尝试删除一个密封对象的属性或者将某个密封对象的属性从数据属性转换成访问器属性，结果会静默失败或抛出异常严格模式。

扩展特性

Object.isExtensible 方法

Object.preventExtensions 方法

密封特性

Object.isSealed 方法

Object.seal 方法

冻结特性

Object.isFrozen 方法

Object.freeze 方法

浅冻结 与 深冻结

扩展特性

如果一个对象可以添加新的属性，则这个对象是可扩展的。
让这个对象变的不可扩展，也就是不能再有新的属性

我们都知道，我们可以通过属性描述符创建属性不可配置对象 如何让对象属性不可配置或枚举,
在这里我们可以创建不可扩展属性的对象

Object.isExtensible 方法

MDN：

</>复制代码 
  1. 概述
  2.     Object.isExtensible() 方法判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）。
  3. 语法
  4.     Object.isExtensible(obj)
  5. 参数
  6.     obj 需要检测的对象

使用：

</>复制代码 
  1. //新对象默认是可扩展的无论何种方式创建的对象，这里使用的是字面量方式
  2. var empty = {a:1};
  3. console.log(Object.isExtensible(empty) === true);//true
  4. //等价于 使用属性描述符
  5. empty = Object.create({},{
  6.     "a":{
  7.         value : 1,
  8.         configurable : true,//可配置
  9.         enumerable : true,//可枚举
  10.         writable : true//可写
  11.     }
  12. });
  13. console.log(Object.isExtensible(empty) === true);//true
  14. //对象是否可以扩展与对象的属性是否可以配置无关
  15. empty = Object.create({},{
  16.     "a":{
  17.         value : 1,
  18.         configurable : false,//不可配置
  19.         enumerable : true,//可枚举
  20.         writable : true//可写
  21.     }
  22. });
  23. console.log(Object.isExtensible(empty) === true);//true

那么我们如何让一个对象变成不可扩展：

Object.preventExtensions 方法

MDN:

</>复制代码 
  1. 概述
  2.     Object.preventExtensions() 方法让一个对象变的不可扩展，也就是永远不能再添加新的属性。
  3. 语法
  4.     Object.preventExtensions(obj)
  5. 参数
  6.     obj 将要变得不可扩展的对象
  7. 描述
  8.     如果一个对象可以添加新的属性，则这个对象是可扩展的。
  9.     preventExtensions 可以让这个对象变的不可扩展，也就是不能再有新的属性。
  10.     需要注意的是不可扩展的对象的属性通常仍然可以被删除。
  11.     尝试给一个不可扩展对象添加新属性的操作将会失败，不过可能是静默失败，也可能会抛出 TypeError 异常（严格模式）。        
  12.     Object.preventExtensions 只能阻止一个对象不能再添加新的自身属性，仍然可以为该对象的原型添加属性。

使用：

</>复制代码 
  1. (function () {
  2.     //Object.preventExtensions 将原对象变得不可扩展,并且返回原对象.
  3.     var obj = {};
  4.     var obj2 = Object.preventExtensions(obj);
  5.     console.log(obj === obj2);//true
  6.     //新创建的对象默认是可扩展的
  7.     var empty = {};
  8.     console.log(Object.isExtensible(empty) === true);//true
  9.     empty.a = 1;//添加成功
  10.     //将其变为不可扩展对象
  11.     Object.preventExtensions(empty);
  12.     console.log(Object.isExtensible(empty) === false);//true
  13.     //使用传统方式为不可扩展对象添加属性
  14.     empty.b = 2;//静默失败,不抛出错误
  15.     empty["c"] = 3;//静默失败,不抛出错误
  16.     //在严格模式中,为不可扩展对象添加属性将抛出错误
  17.     (function fail(){
  18.         "use strict";
  19.         empty.d = "4";//throws a TypeError
  20.     })();
  21.     //使用 Object.defineProperty方法为不可扩展对象添加新属性会抛出异常
  22.     Object.defineProperty(empty,"e",{value : 5});//抛出 TypeError 异常
  23.     Object.defineProperty(empty,"a",{value : 2});
  24.     console.log(empty.a);//输出2
  25. })();

在上述代码的最后两行可以看到如果为当前不可扩展对象 empty 修改属性是成功的，这是因为一个对象的属性是否可以被修改与该对象是否可以扩展无关，而是与该对象在创建的时候是否声明为不可重写有关（Writable）

如果我们想让一个对象的所有属性都不可配置同时也不允许为该对象进行扩展怎么做：

</>复制代码 
  1. (function () {
  2.     //创建一个对象,同时声明其所有属性均为不可配置且不可写
  3.     var obj = {a :1,b:2,c:3};
  4.     Object.defineProperties(obj,{
  5.        "a":{configurable:false},
  6.        "b":{configurable:false},
  7.        "c":{configurable:false}
  8.     });
  9.     //等价于
  10.     var obj = Object.create({},{
  11.         "a":{value :1,congigurable :false,enumerable :true,writable:true},
  12.         "b":{value :2,congigurable :false,enumerable :true,writable:true},
  13.         "c":{value :3,congigurable :false,enumerable :true,writable:true}
  14.     });
  15.     //将其转化为不可扩展对象
  16.     Object.preventExtensions(obj);
  17.     //测试该对象是否即不可扩展同时其所有属性均不可配置
  18.     console.log(Object.isExtensible(obj) === true);//false
  19.     for(var name of Object.keys(obj)){//遍历该对象的所有可枚举属性名,不包括继承而来的属性
  20.         Object.defineProperty(obj,name,{enumerable:false});//将该属性的 enumerable 特性重新配置为 true
  21.     }//抛出异常
  22. })();

虽然说上面的程序实现了需求，但未免太麻烦，这里我们可以使用 JS 对象的另一特性 密封

密封特性

密封对象是指那些不可 扩展 的，且所有自身属性都不可配置的（non-configurable）对象。

或则说 密封对象是指那些不能添加新的属性，不能删除已有属性，以及不能修改已有属性的可枚举性、可配置性、可写性，但可能可以修改已有属性的值的对象。

Object.isSealed 方法

MDN：

</>复制代码 
  1. 概述 
  2.     Object.isSealed() 方法判断一个对象是否是密封的（sealed）。
  3. 语法 
  4.     Object.isSealed(obj)
  5. 参数
  6.     obj 将要检测的对象
  7. 描述
  8.     如果这个对象是密封的，则返回 true，否则返回 false。

使用：

</>复制代码 
  1. (function () {
  2.     //新建的对象默认不是密封的
  3.     var empty = {};
  4.     console.log(Object.isSealed(empty) === false);//true
  5.     //如果把一个空对象变得不可扩展,则它同时也会变成个密封对象.
  6.     Object.preventExtensions(empty);
  7.     console.log(Object.isSealed(empty) === true);//true
  8.     //但如果这个对象不是空对象,则它不会变成密封对象,因为密封对象的所有自身属性必须是不可配置的.
  9.     var hasProp = {fee : "fie foe fum"};
  10.     Object.preventExtensions(hasProp);
  11.     console.log(Object.isSealed(hasProp) === false);//true
  12.     //如果把这个属性变得不可配置,则这个对象也就成了密封对象.
  13.     Object.defineProperty(hasProp,"fee",{configurable : false});
  14.     console.log(Object.isSealed(hasProp) === true);//true
  15. })();
Object.seal 方法

MDN：

</>复制代码 
  1. 概述
  2.     Object.seal() 方法可以让一个对象密封，并返回被密封后的对象。
  3.     密封对象是指那些不能添加新的属性，不能删除已有属性，以及不能修改已有属性的可枚举性、可配置性、可写性，但可能可以修改已有属性的值的对象。
  4. 语法
  5.     Object.seal(obj)
  6. 参数
  7.     obj 将要被密封的对象
  8. 描述
  9.     通常情况下，一个对象是可扩展的（可以添加新的属性）。
  10.     密封一个对象会让这个对象变的不能添加新属性，且所有已有属性会变的不可配置。
  11.     属性不可配置的效果就是属性变的不可删除，以及一个数据属性不能被重新定义成为访问器属性，或者反之。
  12.     但属性的值仍然可以修改。
  13.     尝试删除一个密封对象的属性或者将某个密封对象的属性从数据属性转换成访问器属性，结果会静默失败或抛出TypeError 异常（严格模式）。
  14.     不会影响从原型链上继承的属性。但 __proto__ (  ) 属性的值也会不能修改。

使用：

</>复制代码 
  1. (function () {
  2.     var obj = {             //声明一个对象
  3.         prop:function(){},
  4.         foo:"bar"
  5.     };
  6.     //可以添加新的属性,已有属性的值可以修改,可以删除
  7.     obj.foo = "baz";
  8.     obj.lumpy = "woof";
  9.     delete obj.prop;
  10.     var o = Object.seal(obj);//将 obj 密封,且返回原对象
  11.     console.log(o === obj);//true
  12.     console.log(Object.isSealed(obj) === true);//true
  13.     //仍然可以修改密封对象上的属性的值
  14.     obj.foo = "quux";//修改成功
  15.     //但不能把密封对象的属性进行重新配置,譬如讲数据属性重定义成访问器属性.
  16.     //Object.defineProperty(obj,"foo",{get : function(){return "g";}});//抛出 TypeError
  17.     //任何除修改属性值以外的操作都会失败
  18.     obj.quaxxor = "the friendly duck";//静默失败,属性没有成功添加
  19.     delete obj.foo;//静默失败,属性没有删除成功
  20.     //在严格模式中,会抛出 TypeError 异常
  21.     (function fail(){
  22.         "use strict";
  23.         //delete obj.foo;//抛出 TypeError 异常
  24.         //obj.sparky = "arf";//抛出 TYpeError 异常
  25.     })();
  26.     Object.defineProperty(obj,"ohai",{value :17});//添加属性失败
  27.     Object.defineProperty(obj,"foo",{value : "eit"});//修改成功
  28.     console.log(obj.foo);//“eit”
  29. })();

如上面程序所示，将一个对象密封后仅能保证该对象不被扩展且属性不可重配置，但是原属性值却是有可能被修改的，若要达到即密封又不可修改原属性值可以这样：

</>复制代码 
  1. //创建不可修改值的密封对象
  2. (function () {
  3.     //方式一
  4.     var o = {a:1};
  5.     Object.defineProperty(o,"a",{configurable:false,writable:false});
  6.     Object.preventExtensions(o);
  7.     o.a = 2;
  8.     console.log(o.a);//1
  9.     console.log(Object.isExtensible(o) ===false);//true
  10.     console.log(Object.isSealed(o) === true);//true
  11.     //方式二
  12.     o = Object.create(Object.prototype,{"a":{value :1,writable:false}});
  13.     Object.seal(o);
  14.     o.a = 2;
  15.     console.log(o.a);//1
  16.     console.log(Object.isExtensible(o) ===false);//true
  17.     console.log(Object.isSealed(o) === true);//true
  18.     
  19.     //方式...
  20. })();

同样的，虽然实现了需求，依旧可以使用另一特性 冻结

冻结特性

一个对象是冻结的（frozen）是指它不可扩展，所有属性都是不可配置的（non-configurable），且所有数据属性（data properties）都是不可写的（non-writable）。

数据属性是值那些没有取值器（getter）或赋值器（setter）的属性。

或则说 冻结对象是指那些不能添加新的属性，不能修改已有属性的值，不能删除已有属性，以及不能修改已有属性的可枚举性、可配置性、可写性的对象。也就是说，这个对象永远是不可变的。

Object.isFrozen 方法

MDN：

</>复制代码 
  1. 概述
  2.     Object.isFrozen() 方法判断一个对象是否被冻结（frozen）。
  3. 语法
  4.     Object.isFrozen(obj)
  5. 参数
  6. obj 被检测的对象
  7. 描述
  8.     一个对象是冻结的（frozen）是指它不可扩展，所有属性都是不可配置的（non-configurable），且所有数据属性（data properties）都是不可写的（non-writable）。数据属性是值那些没有取值器（getter）或赋值器（setter）的属性。

使用：

</>复制代码 
  1. (function () {
  2.     //一个对象默认是可扩展的,所以他也是非冻结的.
  3.     console.log(Object.isFrozen({}) === false);//true
  4.     //一个不可扩展的空对象同时也是一个冻结对象.一个不可扩展的空对象也是密封对象
  5.     var vacuouslyFrozen = Object.preventExtensions({});
  6.     console.log(Object.isFrozen(vacuouslyFrozen) === true);//true
  7.     console.log(Object.isSealed(vacuouslyFrozen) === true);//true
  8.     //一个非空对象默认也是非冻结的.
  9.     var oneProp = { p:42 };
  10.     console.log(Object.isFrozen(oneProp) === false);//true
  11.     //让这个对象变的不可扩展,并不意味着这个对象变成了冻结对象,因为 p 属性仍然是可以配置的(而且可写的).
  12.     Object.preventExtensions( oneProp );
  13.     console.log(Object.isFrozen(oneProp) === false);//true
  14.     //如果删除了这个属性,则它成为空对象,会成为一个冻结对象.
  15.     delete oneProp.p;
  16.     console.log(Object.isFrozen(oneProp) === true);
  17.     //一个不可扩展的对象,拥有一个不可写但可配置的属性,则它仍然是非冻结的.
  18.     var nonWritable = { e : "plep" };
  19.     Object.preventExtensions(nonWritable);
  20.     Object.defineProperty(nonWritable,"e",{writable : false});//不可写
  21.     console.log(Object.isFrozen(nonWritable) === false);//true
  22.     //把这个属性改为不可配置,会让这个对象成为冻结对象
  23.     Object.defineProperty(nonWritable,"e",{configurable : false});//不可配置
  24.     console.log(Object.isFrozen(nonWritable) === true);//true
  25.     //一个不可扩展的对象,拥有一个不可配置但可写的属性,则它仍然是非冻结的.
  26.     var nonConfigurable = { release : "the kraken!" };
  27.     Object.preventExtensions(nonConfigurable);
  28.     Object.defineProperty(nonConfigurable,"release",{configurable : false});
  29.     console.log(Object.isFrozen(nonConfigurable) === false);//true
  30.     //把这个属性改为不可写,会让这个对象成为冻结对象.
  31.     Object.defineProperty(nonConfigurable,"release",{writable : false});
  32.     console.log(Object.isFrozen(nonConfigurable) === true);//true
  33.     //一个不可扩展的对象,值拥有一个访问器,则它仍然是非冻结的.
  34.     var accessor = {get food(){return "yum";}};//这里使用的是字面值法创建对象,默认可配置
  35.     Object.preventExtensions(accessor);
  36.     console.log(Object.isFrozen(accessor) === false);//true
  37.     //把这个属性改为不可配置,会让这个对象成为冻结对象.
  38.     Object.defineProperty(accessor,"food",{configurable:false});
  39.     console.log(Object.isFrozen(accessor) === true);//true
  40.     //使用 Object.freeze 是冻结一个对象的最方便的方法.
  41.     var frozen = {1:81};
  42.     console.log(Object.isFrozen(frozen) === false);//true
  43.     Object.freeze(frozen);
  44.     console.log(Object.isFrozen(frozen) === true);//true
  45.     //一个冻结对象也是一个密封对象
  46.     console.log(Object.isSealed(frozen) === true);//true
  47.     //一个冻结对象也是一个不可扩展对象
  48.     console.log(Object.isExtensible(frozen) === false);//true
  49. })();
Object.freeze 方法

MDN：

</>复制代码 
  1. 概述
  2.     Object.freeze() 方法可以冻结一个对象。
  3.     冻结对象是指那些不能添加新的属性，不能修改已有属性的值，不能删除已有属性，以及不能修改已有属性的可枚举性、可配置性、可写性的对象。
  4.     也就是说，这个对象永远是不可变的。该方法返回被冻结的对象。
  5. 语法
  6.     Object.freeze(obj)
  7. 参数
  8.     obj 将要被冻结的对象
  9. 描述
  10.     冻结对象的所有自身属性都不可能以任何方式被修改。
  11.     任何尝试修改该对象的操作都会失败，可能是静默失败，也可能会抛出异常（严格模式中）。
  12.     数据属性的值不可更改，访问器属性（有getter和setter）也同样（但由于是函数调用，给人的错觉是还是可以修改这个属性）。
  13.     如果一个属性的值是个对象，则这个对象中的属性是可以修改的，除非它也是个冻结对象。

使用：

</>复制代码 
  1. (function () {
  2.     var obj = {
  3.         prop:function(){},
  4.         foo:"bar"
  5.     };
  6.     //可以添加新的属性,已有的属性可以被修改或删除
  7.     obj.foo = "baz";
  8.     obj.lumpy = "woof";
  9.     delete obj.prop;
  10.     Object.freeze(obj);//冻结
  11.     console.log(Object.isFrozen(obj) === true);//true
  12.     //对冻结对象的任何操作都会失败
  13.     obj.foo = "quux";//静默失败;
  14.     obj.quaxxor = "the friendly duck";//静默失败
  15.     //在严格模式中会抛出 TypeError 异常
  16.     (function () {
  17.         "use strict";
  18.         obj.foo = "sparky";//抛出 TypeError 异常
  19.         delete obj.quaxxor;//抛出 TypeError 异常
  20.         obj.sparky = "arf";//抛出 TypeError 异常
  21.     })();
  22.     //使用 Object.defineProperty方法同样会抛出 TypeError 异常
  23.     Object.defineProperty(obj,"ohai",{value:17});//抛出 TypeError 异常
  24.     Object.defineProperty(obj,"foo",{value:"eit"});//抛出 TypeError 异常
  25. })();

如该方法 MDN 的描述所述，倘若一个对象的属性是一个对象，那么对这个外部对象进行冻结，内部对象的属性是依旧可以改变的，这就叫浅冻结，若把外部对象冻结的同时把其所有内部对象甚至是内部的内部无限延伸的对象属性也冻结了，这就叫深冻结。

浅冻结与深冻结

</>复制代码 
  1. (function () {
  2.     obj = {
  3.         internal :{}
  4.     };
  5.     Object.freeze(obj);//浅冻结
  6.     obj.internal.a = "aValue";
  7.     console.log(obj.internal.a);//"aValue"
  8.     //想让一个对象变得完全冻结,冻结所有对象中的对象,可以使用下面的函数.
  9.     function deepFreeze(o){
  10.         var prop,propKey;
  11.         Object.freeze(o);//首先冻结第一层对象
  12.         for(propKey in o){
  13.             prop = o[propKey];
  14.             if(!o.hasOwnProperty(propKey) || !(typeof prop === "object") || Object.isFrozen(prop)){
  15.                 continue;
  16.             }
  17.             deepFreeze(prop);//递归
  18.         }
  19.     }
  20.     deepFreeze(obj);
  21.     obj.internal.b = "bValue";//静默失败
  22.     console.log(obj.internal.b);//undefined
  23. })();
GPU云服务器 云服务器 html5新特性之webrtc 面向对象特性 对象存储warm特性 对象扩展

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91553.html

相关文章

  • javascript中对象的常用方法，深克隆和浅克隆以及冻结，扩展，密封三大属性的区别

    摘要：它将返回目标对象。封闭对象方法判断一个对象是否被密封。为源对象为修改的属性名或设置，同上方法返回一个给定对象自身可枚举属性的键值对数组方法返回指定对象上一个自有属性对应的属性描述符方法判断两个值是否是相同的值。 对象作为引用类型，工作中免不了复制对象，下面来看看克隆的方法 Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。浅...

    gplane 评论0 收藏0

  • JS冻结对象的《人间词话》 完美实现究竟有几层境界？

    摘要：王国维在人间词话里谈到了治学经验，他说古今之成大事业大学问者，必经过三种之境界。其中谈到中冻结一个对象几种由浅入深的实践。王国维已先自表明，吾人可以无劳纠葛。总结本文先后介绍了关于冻结一个对象的三种进阶方法。 王国维在《人间词话》里谈到了治学经验，他说：古今之成大事业、大学问者，必经过三种之境界。 巧合的是，最近受 git chat ／ git book 邀请，做了一个分享。其中谈到J...

    YorkChen 评论0 收藏0

  • JS冻结对象的《人间词话》 完美实现究竟有几层境界？

    摘要：王国维在人间词话里谈到了治学经验，他说古今之成大事业大学问者，必经过三种之境界。其中谈到中冻结一个对象几种由浅入深的实践。王国维已先自表明，吾人可以无劳纠葛。总结本文先后介绍了关于冻结一个对象的三种进阶方法。 王国维在《人间词话》里谈到了治学经验，他说：古今之成大事业、大学问者，必经过三种之境界。 巧合的是，最近受 git chat ／ git book 邀请，做了一个分享。其中谈到J...

    高胜山 评论0 收藏0

  • JS红皮书解读之防篡改对象

    摘要：注意一旦把对象定义为防篡改，就无法撤销了。使用阻止对象扩展注意严格模式下，不是而是报错。使用冻结对象对于库作者而言，冻结对象可防止有人修改库的核心对象。 showImg(https://segmentfault.com/img/remote/1460000019753620); 前言：去年7月份在简书写的，发现后端、React中也有体现，觉得有必要在微信上分享下。 注意：一旦把对象定义...

    张迁 评论0 收藏0

发表评论

登陆后可评论

0条评论

ChristmasBoy

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<