正经人一辈子都用不到的 JavaScript 方法总结 (二)

前言

现在有这样一个需求：用一个对象存储某学生的各科成绩，要求每次只能改变科目分数，不能再添加或者删除科目。

分析一下，这个需求其实就是需要创建一个固定属性的对象，其属性不可增删，但属性值可更改。

有些同学可能就这么开始了：

首先，定义一个符合要求的对象：

// 声明成绩存储对象
let reportObj = {};
// 给成绩存储对象添加科目，并设置科目属性不可增删，但科目成绩可修改
Object.defineProperties(reportObj, {
    ChineseMark: {
        enumerable: true,
        writable: true,
        configurable: false,
        value: 60
    },
    EnglishMark: {
        enumerable: true,
        writable: true,
        configurable: false,
        value: 60
    }
});

然后写入成绩：

// 存入科目成绩
reportObj.ChineseMark = 99;
reportObj.EnglishMark = 95;
console.log(reportObj);  // {ChineseMark: 99, EnglishMark: 95}

删除属性来试试：

delete reportObj.ChineseMark;  // false
console.log(reportObj);  // {ChineseMark: 99, EnglishMark: 95}

貌似确实符合条件了，那么再试试增加属性吧：

reportObj.PhysicsMark = 100;
console.log(reportObj);  // {ChineseMark: 99, EnglishMark: 95, PhysicsMark: 100}

咋回事，怎么突然就不太符合要求了呢？Object.defineProperties() 只能精确控制所增添的属性的特质，但如果给对象添加属性的话，它就无力控制了。

今天我们就用简单的接口方法来实现一下这幺蛾子需求︿(￣︶￣)︿

Object.seal()

描述

seal 如果作动词，那它的解释就是“密封”：

见名知意，Object.seal() 方法就是用来“密封”一个对象的，它阻止对象添加新属性，并将对象所有的现有属性标记为不可配置。当前属性的值只要原来是可写的就可以改变。

作用

通常，一个对象是可扩展的（可以添加新的属性）。

密封一个对象会让这个对象变的不能添加新属性，且所有已有属性会变的不可配置。属性不可配置的效果就是属性变的不可删除，以及一个数据属性不能被重新定义成为访问器属性，或者反之。但属性的值仍然可以修改。

尝试删除一个密封对象的属性或者将某个密封对象的属性从数据属性转换成访问器属性，结果会静默失败或抛出 TypeError（在严格模式中最常见的，但不唯一）。

const object1 = {
    property1: 42
};
Object.seal(object1);
object1.property1 = 33;
console.log(object1.property1);
// expected output: 33
delete object1.property1; // cannot delete when sealed
console.log(object1.property1);
// expected output: 33

总结起来，Object.seal() 其实就是做了以下事情：

设置Object.preventExtension()，禁止添加新属性(绝对存在)
设置configurable为false，禁止配置(绝对存在)
禁止更改访问器属性(getter和setter)

语法

Object.seal(obj)

参数

参数 obj 代表将要被密封的对象。

返回值

被密封的对象。

实现需求

既然有这么好用的方法，那我们当然要好好利用一番啦，终于可以完美实现文章开头的需求了：

// 声明成绩存储对象及其属性
let reportObj = {   
    ChineseMark: 60,
    EnglishMark: 60
};
// 密封成绩对象
let sealedReportObj = Object.seal(reportObj);
// 更改科目分数
sealedReportObj.ChineseMark = 99;
sealedReportObj.EnglishMark = 97;
console.log(sealedReportObj); // {"ChineseMark": 99, "EnglishMark": 97}

验证一下：

// 增加属性
sealedReportObj.PhysicsMark = 100;
console.log(sealedReportObj); // {"ChineseMark": 99, "EnglishMark": 97}
// 删除属性
delete sealedReportObj.ChineseMark; // false
console.log(sealedReportObj); // {"ChineseMark": 99, "EnglishMark": 97}

可以看到对象的属性确实是增删不了了，算是简单实现了需求吧。

扩展

如果要判断一个对象是否“密封”，我们可以使用 Object.isSealed() 方法：

Object.isSealed(sealedReportObj); // true

Object.freeze()

看到这里，可能很多同学都想起了 Object.freeze() 方法，它的作用是用来冻结一个对象。实际作用就是字面意思：冻结一个对象，使其属性和属性值都不可更改。用来实现这个需求显然是不合适的。

共同点

Object.seal() 和 Object.freeze() 有以下共同点：

作用的对象变得不可扩展，这意味着不能再添加新属性。
作用的对象中的每个元素都变得不可配置，这意味着不能删除属性。
如果在 ‘use strict’ 模式下使用，这两个方法都可能抛出错误。

不同点

Object.seal() 能让你修改属性的值，但 Object.freeze() 不能。

总结

~本文完，感谢阅读！

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！
你来，怀揣期望，我有墨香相迎！你归，无论得失，唯以余韵相赠！
知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！

参考文档：

Object.seal()

Object.freeze()

前言

Object.seal()

描述

作用

语法

参数

返回值

实现需求

扩展

Object.freeze()

共同点

不同点

总结

更多相关文章

随机推荐