本博客不欢迎:各种镜像采集行为。请尊重国家相关法律法规,大家都是程序员,不要闹得不开心。

苏南大叔在这里继续上一篇的内容话题,这里对一个object的属性进行赋值或取值的时候,实际上是可以插入自己的逻辑的。苏南大叔个人觉得,这个可编程的set或者get过程,就是vue或者react等框架的最底层的核心部分吧?

苏南大叔:js中object的property系列,如何打造一个可编程的setget? - js-object-setget-hero
js中object的property系列,如何打造一个可编程的setget?(图5-1)

本文测试环境:chrome@87.0.4280.88。一个普通的赋值取值过程,就可能是个破题的关键哦。欢迎大家阅读本文的内容。

两种写法

在使用Object.defineProperty()的时候,里面可以设置个setget,用于设置和获取属性值。

var o={};
var bValue = 1;
Object.defineProperty(o, 'b', {
  get() { return bValue; },
  set(newValue) { bValue = newValue; },
});

苏南大叔:js中object的property系列,如何打造一个可编程的setget? - js-object-setget-1
js中object的property系列,如何打造一个可编程的setget?(图5-2)

或者类似下面的代码(个人推荐,看着比较顺眼一些):

var o={};
var bValue = 1;
Object.defineProperty(o, 'b', {
  get: function() { return bValue; },
  set: function(newValue) { bValue = newValue; },
});

当然,有读者会对里面的全局变量bValue有所不满,下面的是另外的解决方案,加上个this.,当然,您还可以有其他的方案。

var o={};
Object.defineProperty(o, 'b', {
  get: function() { return this.bValue; },
  set: function(newValue) { this.bValue = newValue; },
});

苏南大叔:js中object的property系列,如何打造一个可编程的setget? - js-object-setget-4
js中object的property系列,如何打造一个可编程的setget?(图5-3)

注意事项

使用set或者get的时候,不能设置value,也不能设置writable。否则会报错。

var o={};
var bValue = 1;
Object.defineProperty(o, 'b', {
  writable:false,
  value:'',
  get: function() { return bValue; },
  set: function(newValue) { bValue = newValue; },
});

报错信息如下:

Error: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #<Object>

苏南大叔:js中object的property系列,如何打造一个可编程的setget? - js-object-setget-2
js中object的property系列,如何打造一个可编程的setget?(图5-4)

最终代码

下面的是个最终代码的范例:

const object1 = {
    property1:'p1'
};
var _value= "init";
Object.defineProperty(object1, 'property2', {
  //value:"init",
  //writable:true,
  get() { return _value+"_get"; },
  set(newValue) { _value = newValue+"_set"; }
});
console.log(object1.property2);
object1.property2="init2";
console.log(object1.property2);

输出结果如下:

> "init_get"
> "init2_set_get"

苏南大叔:js中object的property系列,如何打造一个可编程的setget? - js-object-setget-3
js中object的property系列,如何打造一个可编程的setget?(图5-5)

这个代码里面,明显可以看到,通过这个自定义的setget,可以参杂进去很多很多逻辑。比如,在react里面,对prop进行赋值,是不是非常常见的操作?那么,赋值的时候,为啥能自动触发界面上的变化呢?你们想到了没有?

相关链接

总结

这里的getset操作,简直是个奇妙的钩子场所。如果您感兴趣,可以在这里自由发挥一下哦~
更多苏南大叔的js文章,可以查看下面的链接:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

本站的忠实读者小伙伴,正在阅读下面这些文章: