您的位置:首页 » 分类: JavaScript & ES2015 (ES6) » 文章: JavaScript 中的不可变对象(Immutable Objects)

JavaScript 中的不可变对象(Immutable Objects)

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

默认情况下,JavaScript 中的对象是可变的。我们可以更改原始值(字符串,数字等)和对象。我们来看看这个对象:

let obj = {
    num: 10,
    obj: {
        content: "mutable object"
    }
}

你可以轻松地改变它:

obj.num = 5;
obj.obj = { content: "changed!" }

console.log(obj);

// {
//     num: 5,
//     obj: {
//         content: "changed!"
//     }
// }

非常明确是吧?那么,我们有什么办法使对象不可变呢?

第一次尝试

让我们实用 const !

const obj = { ... }

很好的尝试,但是不起作用。如果你尝试一下,你会发现:这种办法根本就不起作用。const 关键字只是修改了某个变量名和其值之间的链接,而不是实际值。您仍然可以像上面所做的那样在 const 对象中更改这两个原始值和对象。例如:

const obj = {
    num: 10,
    obj: {
        content: "mutable object"
    }
}

obj.num = 5;
obj.obj = { content: "changed!" }

console.log(obj);

// {
//     num: 5,
//     obj: {
//         content: "changed!"
//     }
// }

继续尝试:Object.freeze()

有很多关于 ES2015 新特性的文章和讨论。我们知道 ES2015 比 ES5 更好。例如,我们可以使用一个 Object 方法来实现我们的目的:Object.freeze()。该方法使对象的原始属性不可变。我们把这个方法应用到我们原来的 obj 对象上:

Object.freeze(obj);
obj.num = 5;
obj.obj = { content: "changed!" }

console.log(obj);

// {
//     num: 10,
//     obj: {
//         content: "changed!"
//     }
// }

结果比原先的尝试稍后好一点,原始值现在已经修复,不可更改,但是我们仍然可以更改嵌套对象。

最终解决方案

为了使对象完全不可变,我们还需要freeze()所有的嵌套对象。例如(方法来自MDN):

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);
}

使用这个函数,现在我们可以创建完全不可变的对象:

deepFreeze(obj);
obj.num = 5;
obj.obj = { content: "changed!" }

console.log(obj);

// {
//     num: 10,
//     obj: {
//         content: "mutable object"
//     }
// }

结论

让我们来看看这个新特性的实际支持情况:caniuse freeze?。绝大多数的现代浏览器都已经支持。

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

1 条评论 - 关于 “JavaScript 中的不可变对象(Immutable Objects)

发表评论

电子邮件地址不会被公开。 必填项已用*标注