js中object的property系列，如何打造一个可编程的setget?

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

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

两种写法

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

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

或者类似下面的代码（个人推荐，看着比较顺眼一些）：

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; },
});

注意事项

使用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>

最终代码

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

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"

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

相关链接

• https://newsn.net/say/js-object-writable.html
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

总结

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

• https://newsn.net/tag/js/

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