js中object的property系列,如何打造一个可编程的setget?
发布于 作者:苏南大叔 来源:程序如此灵动~

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

本文测试环境:chrome@87.0.4280.88
。一个普通的赋值取值过程,就可能是个破题的关键哦。欢迎大家阅读本文的内容。
两种写法
在使用Object.defineProperty()
的时候,里面可以设置个set
和get
,用于设置和获取属性值。

或者类似下面的代码(个人推荐,看着比较顺眼一些):
当然,有读者会对里面的全局变量bValue
有所不满,下面的是另外的解决方案,加上个this.
,当然,您还可以有其他的方案。

注意事项
使用set
或者get
的时候,不能设置value
,也不能设置writable
。否则会报错。
报错信息如下:

最终代码
下面的是个最终代码的范例:
输出结果如下:

这个代码里面,明显可以看到,通过这个自定义的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
文章,可以查看下面的链接:


