我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

苏南大叔在本文中,将描述一个非常微观层面的概念,就是objectproperty相关编程。对,针对的是property,并不是说怎么使用它,而是说对它进行定义。对于大多数js编程爱好者来说,这种操作似乎是非常不常见的。作为代码的搬运工,大家一般不关心这些object是怎么产生的。

苏南大叔:js中object的property系列,如何打造一个只读属性? - js-object-writable-hero
js中object的property系列,如何打造一个只读属性?(图4-1)

那么,苏南大叔为啥还要描述这样小众的问题呢?因为,如果您想深入了解reactvue们,在底层层面上,都是怎么运作的话,就需要弄明白,objectproperty是怎么来的。

本文测试环境:chrome@86.0.4240.75。主要目标是创建一个只读的objectproperty

基本例子

下面的代码,来自于msdn官方范例。展示的是objectproperty中的writeablevalue。意思就是,控制某个对象的某个属性,是否可写。writable默认值为true,可以写入。

默认情况下,是可以直接对属性进行赋值操作的,这个大家应该是非常熟悉的。

const object1 = {property1:10};
console.log(object1.property1);
object1.property1 = 11;
console.log(object1.property1);

这里会先输出10,再输出11

苏南大叔:js中object的property系列,如何打造一个只读属性? - js-object-writebale-1
js中object的property系列,如何打造一个只读属性?(图4-2)

属性只读

注意:只读属性writable中的write没有字母ewritable默认值是true,就是说可以写入数值。

但是,增加了writable参数控制之后,这个值就变成了不可写的。当然,这里的试图写入的操作,也是没有生效的。

const object1 = {};
console.log(object1.property1);
Object.defineProperty(object1, 'property1', {
  value: 10,
  writable: false
});
console.log(object1.property1);
object1.property1 = 11;
console.log(object1.property1);

这里的输出值是:undefined,10,10。也就是说:赋值成11的操作,并没有成功。

苏南大叔:js中object的property系列,如何打造一个只读属性? - js-object-writable-2
js中object的property系列,如何打造一个只读属性?(图4-3)

如果在严格模式下,上述对只读属性赋值的行为,还会报错。

苏南大叔:js中object的property系列,如何打造一个只读属性? - js-object-writable-3
js中object的property系列,如何打造一个只读属性?(图4-4)

报错信息如下:

Error: Cannot assign to read only property 'property1' of object '#<Object>'

相关链接

总结

本文中,只是探讨了objectproperty定义的可能性,并没有进入深入探究,欢迎大家参考苏南大叔的后续系列文章。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   js