– 关注前端和node js,分享福利和心得!

重修js之Object.freeze()

Object.freeze()用于冻结一个对象,被冻结的对象再也不能修改了(浅冻结),不能向这个对象添加新的属性,不能修改已有属性的值,不能删除已有的属性,不能修改该对象已有属性的可枚举性、可配置型、可写型。此外,冻结一个对象后,该对象的原型也不能被修改。

先来看一些普通object属性的增删改查

function Test(){
    this.a=1;
    this.b=2
}
var test=new Test()
test.a=11;
console.log(test)//Test{a: 11, b: 2}
test.c=3;
console.log(test)//Test{a: 11, b: 2, c: 3}
delete test.b
console.log(test)//Test{a: 11, c: 3}

使用Object.freeze()后的情况

function Test(){
    this.a=1;
    this.b=2
}
var test=new Test()
var test2=Object.freeze(test)
console.log(test2===test)//true
test.a=11;
console.log(test)//Test{a: 1, b: 2}
test.c=3;
console.log(test)//Test{a: 1, b: 2}
delete test.b
console.log(test)//Test{a: 1, b: 2}

Object.freeze()接收一个对象作为参数,如果传入非对象吗,会原样返回

var res=Object.freeze(1)//1
var res=Object.freeze("a")//a
var res=Object.freeze(true)//true
var res=Object.freeze(null)//null
var res=Object.freeze([])//[]

Object.freeze()只是“浅冻结”

当对象中嵌套多级对象时,Object.freeze()就不能冻结了,能够进行增删改操作

var obj={
    a:1,
    b:2,
    c:{
        d:4
    }
}
Object.freeze(obj)

obj.a=11
console.log(obj)//{a:1,b:2,c:{d:4}//不能改变
obj.c.d=44//{a:1,b:2,c:{d:44}}//嵌套对象的属性可以被改变

注意,不能修改冻结对象的原型指的是不能直接去覆盖原型对象,但是我们还是能够拓展原型上的属性和方法

obj.__proto__={e:5}//会报错,Object is not extensible
obj.__proto__.e="5"//可以添加原型属性

实现“深冻结”函数

function deepFreeze(obj){
    for(let key in obj){
        console.log(key)
        if(typeof obj[key]=='object'&&obj[key]!==null){
            deepFreeze(obj[key])
        }
    }
    return Object.freeze(obj)
}
var obj={
    a:1,
    b:2,
    c:{
        d:4,
    }
}
deepFreeze(obj)
obj.a=11
obj.c.d=44
console.log(obj)//{a:1,b:2,c:{d:4}}//嵌套对象的属性也被冻结了

最新文章

    热门文章

      前端无忧网 版权所有,保留一切权利 ! · 站点地图 © 2015-2020 · 粤ICP备18049878号-1 · 托管于 阿里云 & 七牛