js 只读对象


前言

  • 将对象或者对象属性设置成只读,让其在发生修改时报错,可以更快的定位更改的代码位置;

字符串只读

  • 使用 Object.freeze 冻结字符串是没有效果的,因为字符串赋值会将地址换掉。
const some_str = 'abc';
some_str = 'hello';  // 此行代码报错: Assignment to constant variable.

设置对象属性只读

1、Object.freeze 全部属性

  • 非严格模式时,冻结对象后对象已有的属性不能修改;且不能新增属性;但是对已有属性使用等号赋值和新增属性都不会报错;
  • 如果需要报错则可以使用 Object.defineProperty ;
  • 如果对对象整体重新赋值,冻结效果失效。因为对象的地址换掉了。
let some_obj = {name: 'hello'};
console.log(some_obj); // {  "name": "hello"}
some_obj.name='world';
console.log(some_obj);  // {  "name": "world"} 可以修改属性值
Object.freeze(some_obj)
some_obj.name='freeze world';
console.log(some_obj);  // {  "name": "world"} ; 不能修改属性值
some_obj.age= 18;
console.log(some_obj);  // {  "name": "world"} 没有 age 属性
// Object.defineProperty(some_obj, 'age',{value: 18}); // Cannot define property age, object is not extensible
some_obj = {age: 18};
some_obj.sex = 0;
console.log(some_obj); // {age: 18, sex: 0}
  • 严格模式时:但是对已有属性使用等号赋值和新增属性都会报错; Object.defineProperty 设置属性值也会报错;
  • 如果对对象整体重新赋值,冻结效果失效。
"use strict";
let some_obj = {name: 'hello'};
console.log(some_obj); // {  "name": "hello"}
some_obj.name='world';
console.log(some_obj);  // {  "name": "world"} 可以修改属性值
Object.freeze(some_obj)
   some_obj.name='freeze world'; // Cannot assign to read only property 'name' of object '#<Object>'
console.log(some_obj);  // {  "name": "world"} ; 不能修改属性值
   some_obj.age= 18;  //  Cannot add property age, object is not extensible
console.log(some_obj);  // {  "name": "world"} 没有 age 属性
// Object.defineProperty(some_obj, 'age',{value: 18}); // Cannot define property age, object is not extensible
some_obj = {age: 18};
some_obj.sex = 0;
console.log(some_obj); // {age: 18, sex: 0}

2、Object.defineProperty 指定属性

  • 设置对象的某个属性只读;
  • 可以添加新属性,已经存在的旧属性,不能修改属性值。非严格模式时,对其进行赋值也不报错;
  • 如果需要报错使用 Object.defineProperty, 需要注意的是。对应得value 值要进行修改,才会报错,不然也是不报错运行完成。
let some_obj = {name: 'hello'};
console.log(some_obj); // {  "name": "hello"}
some_obj.name='world';
console.log(some_obj);  // {  "name": "world"} 可以修改属性值

Object.defineProperty(some_obj, 'name',{
    value: 'define',
    enumerable: true,
    writable: false,
    configurable: false
});
some_obj.name='freeze world'; 
console.log(some_obj);  // {   "name": "define"} ; 不能修改属性值,也不报错
some_obj.age= 18;  
console.log(some_obj);  // { "name": "define","age": 18 } 可以添加新属性
Object.defineProperty(some_obj, 'sex',{value: 0,enumerable: true,}); 
console.log(some_obj); // { "name": "define",  "age": 18, "sex": 0 } ; 可以添加新属性

// Object.defineProperty(some_obj, 'name',{
//     value: 'define-2',
//     enumerable: true,
//     writable: false,
//     configurable: false
// });  //  Cannot redefine property: name

some_obj = {age: 18};
some_obj.sex = 0;
console.log(some_obj); // {age: 18, sex: 0}
  • 严格模式时:
  • 对只读属性进行赋值会报错;
  • 严格模式时,使用 Object.defineProperty,对应得value 值也需要进行修改,才会报错,不然也是不报错运行完成。
"use strict";
let some_obj = {name: 'hello'};
console.log(some_obj); // {  "name": "hello"}
some_obj.name='world';
console.log(some_obj);  // {  "name": "world"} 可以修改属性值

Object.defineProperty(some_obj, 'name',{
    value: 'define',
    enumerable: true,
    writable: false,
    configurable: false
});
// some_obj.name='freeze world'; // Cannot assign to read only property 'name' of object '#<Object>'
console.log(some_obj);  // {   "name": "define"} 
some_obj.age= 18;  
console.log(some_obj);  // { "name": "define","age": 18 } 可以添加新属性
Object.defineProperty(some_obj, 'sex',{value: 0,enumerable: true,}); 
console.log(some_obj); // { "name": "define",  "age": 18, "sex": 0 } ; 可以添加新属性

// Object.defineProperty(some_obj, 'name',{ value: 'define-2', });  //  Cannot redefine property: name


some_obj = {age: 18};
some_obj.sex = 0;
console.log(some_obj); // {age: 18, sex: 0}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值