最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • JavaScript 中对象处理之 Object.freeze 与 Object.seal - 掘金

    正文概述 掘金(天行无忌)   2021-11-12   47

    「这是我参与11月更文挑战的第 11 天,活动详情查看:2021最后一次更文挑战」。

    数据不变性在编程语言中一直非常重要,在 JavaScript 中也是如此。在这里,有两种 JavaScript 方法可以部分保证不变性:Object.freezeObject.seal。本文来总结一下这两个方法都可以用来做什么?都有什么区别?存在什么不足之处?

    Object defineProperty

    在了解 freezeseal 之前,先来了解一下 Object 中的 defineProperty 方法是什么。当一个对象在初始处理过程中由引擎创建时,JavaScript 将基本属性赋予新创建的对象,以处理来自外部的请求,例如访问或删除属性。

    可以修改或设置的属性如下:

    • value : 属性的值
    • enumerable :如果为 true,则该属性可通过 for-in 循环或 Object.keys() 进行搜索,默认为 false
    • writable :如果为 false,则无法修改该属性,它在严格模式下引发错误,默认为 false
    • 可配置 : 如果为 false,则这会使对象的属性不可枚举、不可写、不可删除和不可配置,默认为false
    • get : 当尝试访问该属性时提前调用的函数,默认为 undefined
    • set : 当尝试为属性设置某个值时提前调用的函数,默认为 undefined

    下面来看一些简单的代码:

    可枚举

    const obj = {};
    Object.defineProperty(obj, "a", {
        value: 100,
        enumerable: false,
    });
    for (const key in obj) {
        console.log(key);
    }
    // 未定义
    Object.keys(obj);
    // []
    

    可写

    const obj = {};
    Object.defineProperty(obj, "a", {
        value: 100,
        writable: false,
    });
    obj.a = 200;
    obj.a === 100; // 真的
    (() => {
        "use strict";
        obj.a = 100;
        // 严格模式下的类型错误
    })();
    

    可配置

    const obj = {};
    Object.defineProperty(obj, "a", {
        value: 100,
        configurable: false,
    });
    // 1. non-enumerable
    for (const key in obj) {
        console.dir(key);
    }
    // undefined
    Object.keys(obj);
    // [
    // 2. non-writable
    (() => {
        "use strict";
        obj.a = 200;
        // TypeError in the strict mode
    })();
    // 3. non-deletable
    delete obj.a;
    obj.a === 100; // true
    

    但是,当 writableenumerable 为 true 时,将忽略 configure:false

    Object.Seal

    在 JavaScript 中,Object.seal 也和 密封 做同样的事情。Object.seal 使传递给它的对象的所有属性都不可配置,可用于阻止向对象添加新的属性和删除属性,但允许更改和更新现有属性。,来看下面的例子:

    const obj = { author: "DevPoint" };
    console.log(Object.getOwnPropertyDescriptors(obj));
    /*
    {
        author: {
          value: 'DevPoint',
          writable: true,
          enumerable: true,
          configurable: true
        }
    }
    */
    Object.seal(obj);
    console.log(Object.getOwnPropertyDescriptors(obj));
    /*
    {
        author: {
          value: 'DevPoint',
          writable: true,
          enumerable: true,
          configurable: false
        }
    }
    */
    obj.author = "天行无忌";
    console.log(obj.author); // 天行无忌
    delete obj.author;
    console.log(obj.author); // 天行无忌
    obj.city = "Shenzhen";
    console.log(obj.city); // undefined
    

    上面代码定义了一个对象 obj 有一个属性 author ,其中的值为 DevPoint,初始的描述属性如下:

    {
        author: {
          value: 'DevPoint',
          writable: true,
          enumerable: true,
          configurable: true
        }
    }
    

    然后用 Object.seal 密封了对象,再次查看哪些描述符发生了变化,哪些没有,从结果看只有可配置的更改为 false

    {
        author: {
          value: 'DevPoint',
          writable: true,
          enumerable: true,
          configurable: false
        }
    }
    
    obj.author = "天行无忌";
    

    尽管 Object.seal 后的可配置现在为 false,但还是通过代码改变其属性值为 天行无忌 ,正如之前所解释的,将可配置设置为 false 会使属性不可写,但是如果 writable 明确为 true ,则它不起作用。当创建一个对象并设置一个新属性时,它默认为 writable:true

    delete obj.author;
    

    Object.seal 会使每个属性都不可配置,从而防止被删除。从上面的代码看,对对象执行 Object.seal 后,delete obj.author; 将变得无效。

    obj.city = "Shenzhen";
    

    Object.sealObject.freeze 被调用时,执行后的对象将变成不可扩展的对象,这意味着不能从中删除任何属性,也不能向其中添加任何属性。

    Object.freeze

    这比 Object.seal 限制了传递的对象,将上面的代码进行修改,如下:

    const obj = { author: "DevPoint" };
    console.log(Object.getOwnPropertyDescriptors(obj));
    /*
    {
        author: {
          value: 'DevPoint',
          writable: true,
          enumerable: true,
          configurable: true
        }
    }
    */
    Object.freeze(obj);
    console.log(Object.getOwnPropertyDescriptors(obj));
    /*
    {
        author: {
          value: 'DevPoint',
          writable: false,
          enumerable: true,
          configurable: false
        }
    }
    */
    obj.author = "天行无忌";
    console.log(obj.author); // DevPoint
    delete obj.author;
    console.log(obj.author); // DevPoint
    obj.city = "Shenzhen";
    console.log(obj.city); // undefined
    

    从上面代码结果看,与 Object.seal 的区别在于 writable 在执行 Object.freeze 后属性值也变为 false 。因此后续代码对其属性进行更新都无效。同样与 Object.seal 一样,Object.freeze 也使对象不可配置,这使得对象的每个属性都不可删除。

    共同点

    1. 执行后的对象变得不可扩展,这意味着对象将无法添加新属性。
    2. 执行后的对象中的每个元素都变得不可配置,这意味着无法删除属性。
    3. 如果在“使用严格”模式下调用操作,则两种方法都可能引发错误,例如在严格模式下执行 obj.author = "天行无忌" 会出现错误。

    不同

    对象执行 Object.seal 后允许修改属性,而执行 Object.freeze 则不允许。

    不足

    Object.freezeObject.seal 在“实用性”方面存在不足,它们都只是对对象的第一层有效。

    const obj = { author: "DevPoint", detail: { view: 100 } };
    console.log(Object.getOwnPropertyDescriptors(obj.detail));
    /*
    {
      view: { value: 100, writable: true, enumerable: true, configurable: true }
    }
    */
    Object.seal(obj);
    console.log(Object.getOwnPropertyDescriptors(obj.detail));
    /*
    {
      view: { value: 100, writable: true, enumerable: true, configurable: true }
    }
    */
    
    obj.detail.view = 500;
    console.log(obj.detail.view); // 500
    delete obj.detail.view;
    console.log(obj.detail); // {}
    obj.detail.hits = 666;
    console.log(obj.detail.hits); // 666
    
    Object.freeze(obj);
    console.log(Object.getOwnPropertyDescriptors(obj.detail));
    /*
    {
      view: { value: 100, writable: true, enumerable: true, configurable: true }
    }
    */
    

    如果希望避免对更深层次的对象属性有效,需要像深拷贝一样,需要写一些代码来实现(deepFreeze):

    const obj = { author: "DevPoint", detail: { view: 100 } };
    console.log(Object.getOwnPropertyDescriptors(obj.detail));
    /*
    {
      view: { value: 100, writable: true, enumerable: true, configurable: true }
    }
    */
    const deepFreeze = (object) => {
        const propNames = Object.getOwnPropertyNames(object);
    
        for (const name of propNames) {
            const value = object[name];
            if (value && typeof value === "object") {
                deepFreeze(value);
            }
        }
        return Object.freeze(object);
    };
    const freezeObj = deepFreeze(obj);
    console.log(Object.getOwnPropertyDescriptors(freezeObj.detail));
    /*
    {
      view: { value: 100, writable: false, enumerable: true, configurable: false }
    }
    */
    
    obj.detail.view = 500;
    console.log(obj.detail.view); // 100
    delete obj.detail.view;
    console.log(obj.detail); // {view:100}
    obj.detail.hits = 666;
    console.log(obj.detail.hits); // undefined
    

    如果希望对嵌套对象实现 Object.seal 效果,同样需要编写代码来实现(deepSeal):

    const obj = { author: "DevPoint", detail: { view: 100 } };
    console.log(Object.getOwnPropertyDescriptors(obj.detail));
    /*
    {
      view: { value: 100, writable: true, enumerable: true, configurable: true }
    }
    */
    const deepSeal = (object) => {
        const propNames = Object.getOwnPropertyNames(object);
    
        for (const name of propNames) {
            const value = object[name];
            if (value && typeof value === "object") {
                deepSeal(value);
            }
        }
        return Object.seal(object);
    };
    const freezeObj = deepSeal(obj);
    console.log(Object.getOwnPropertyDescriptors(freezeObj.detail));
    /*
    {
      view: { value: 100, writable: true, enumerable: true, configurable: false }
    }
    */
    
    obj.detail.view = 500;
    console.log(obj.detail.view); // 500
    delete obj.detail.view;
    console.log(obj.detail); // {view:500}
    obj.detail.hits = 666;
    console.log(obj.detail.hits); // undefined
    

    总结

    Object.freezeObject.seal 在现代前端开发中是非常有用的方法,如果希望对深层有效,可以使用上面的方法 deepFreezedeepSeal


    起源地 » JavaScript 中对象处理之 Object.freeze 与 Object.seal - 掘金

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元