Object.freeze() 方法小记

烟海之蓝 2019-07-30

javascript html list utf-8 数组 Object.freeze() vue数据优化

在vue中的应用:如果你有一个巨大的数组或Object,并且确信数据不会修改,可以使用 Object.freeze() 方法冻结该数据,这样vue就不会对该对象的getter和setter做转换,从而让性能得以大幅提升。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <span v-for="item in list">{{item.name}}</span>
    </div>
    <script type="text/javascript" src="../../../js/lib/vue-2.5.21.js"></script>
<script>
    'use strict'
    new Vue({
        el: '#app',
        data() {
            return {
                list: Object.freeze([{
                    name: '1'
                }, {
                    name: '2'
                }])
            }
        },
        mounted() {
            this.list[0].name = '3' // 不会生效
              // 如果直接改变this.list 的引用,就会生效
              this.list = [{name: 4}] 
              // 或
              this.list = Object.freeze([{name: 4}])
        }
    })
</script>
</body>
</html>

Object.freeze()

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

var obj = {
  prop: function() {},
  foo: 'bar'
}
// 正常我们可以修改属性值或者删除属性
obj.foo = 'bas'
obj.lumpy = 'woof'
delete obj.prop

当obj被冻结后
var o = Object.freeze(obj)
o === obj // true

// 现在任何改变都会失效
obj.foo = '23' // 静默地不会做任何事,在严格模式下会抛出错误 TypeErrors
// 试图通过 Object.defineProperty 更改属性
// 下面两个语句都会抛出 TypeError.
Object.defineProperty(obj, 'ohai', { value: 17 });
Object.defineProperty(obj, 'foo', { value: 'eit' });

// 也不能更改原型
// 下面两个语句都会抛出 TypeError.
Object.setPrototypeOf(obj, { x: 20 })
obj.__proto__ = { x: 20 }

同样数组也会被冻结
let a = [0];
Object.freeze(a); // 现在数组不能被修改了.

a[0]=1; // fails silently
a.push(2); // fails silently

// In strict mode such attempts will throw TypeErrors
function fail() {
  "use strict"
  a[0] = 1;
  a.push(2);
}

fail();

冻结对象为浅冻结
登录 后评论
下一篇
云攻略小攻
502人浏览
2019-10-11
相关推荐
es6(2)——let和const
904人浏览
2017-06-12 11:33:15
[译]JSON数据范式化(normalizr)
18278人浏览
2016-01-22 11:30:46
前端特殊错误,Bug汇总
645人浏览
2017-12-15 13:07:05
JavaScript设计模式:单例
997人浏览
2018-06-19 18:46:12
在前端如何保护共享对象
2457人浏览
2018-09-04 11:26:05
0
2
0
289