关于Javascript存取属性与数据属性的一些思考

小咪咪 2022-12-13 09:59 120阅读 0赞

在js中，对象属性有两种，一种数据属性，一种存取属性。准确来说是用来描述属性的属性描述符，可以看成是`someObject.property`这种设置或存取属性的高级用法。比如我们希望：

1.  设置属性不可枚举 enumerable
2.  设置属性不可删除 configurable
3.  设置属性只读 writable
4.  劫持属性存取的操作，比如vue双向数据绑定实现的基础就是基于此。

要实现以上的高阶功能，就必须使用属性描述符。也就是属性是描述对象的，而属性描述符是描述属性的。

但为什么会有两种呢？我觉得是来源于实际情况。在实际生产开发当中，我们极少使用存取（set/get）属性。所以如果定义一个对象必须要通过set get 略显麻烦，所以需要数据属性。

而js考虑到对框架开发者的支持，比如vue需要劫持对象属性的存取操作，也很有必要用函数的形式去定义存取数据来方便扩展，毕竟函数内部你想定义什么逻辑就定义什么逻辑。

二者目的不同，但都是为了数据存取，所以二者不能同时使用。

此外对于set get，一定是成对出现的，否则就会出现存了从来不用或用一个完全没有数据的数据，这是匪夷所思的，虽然单独定义一个可能宿主环境不同不会报错，但这并没有什么意义。

总结来说，为了方便记忆，我们有三种定义属性的方式：

// 第一种方式：
    // 默认可读可枚举可删除/配置
    myObject.prop1 = 'hello'
    // 第二种方式
    // 值得注意的是如果不写是否可枚举，可删除（配置），可读。那么默认都是false。
    Object.defineProperty(myObject, 'prop2', { 
      value: 'world'
    })
    // 第三种方式
    // 需要在外部定义要存取的值，否则就会引起递归
    prop2Value = '你好'
    Object.defineProperty(myObject, 'prop4', { 
      set(val) { 
        prop2Value = val
      },
      get() { 
        return prop2Value
      }
    })
    myObject.prop3 = '世界'
    console.log(myObject.prop3) // 世界

发表评论取消回复

表情：

评论列表（有 0 条评论，120人围观）

还没有评论，来说两句吧...

相关阅读

相关关于Javascript存取属性与数据属性的一些思考

在js中，对象属性有两种，一种数据属性，一种存取属性。准确来说是用来描述属性的属性描述符，可以看成是`someObject.property`这种设置或存取属性的高级用法。比如

小咪咪/ 2022年12月13日 09:59/ 0 赞/ 121 阅读

相关关于接口的一些思考

下面示例是模拟游戏《愤怒的小鸟》的实现。 //叫的方式的接口 public interface ShoutType \{ public void shout();

不念不忘少年蓝@/ 2022年08月07日 14:56/ 0 赞/ 294 阅读

相关关于javascript 中的 navigator 属性

window.navigator 对象包含有关访问者浏览器的信息。 Window Navigator window.navigator 对象在编写时可不使用 windo

朱雀/ 2022年08月06日 08:23/ 0 赞/ 212 阅读

相关关于javascript中Math对象的属性与方法研究

看了一下js中有Math对象可以对数据进行数学运算，以前也用到过，不过没有进行完整的研究，今天完整的看了看，写了个测试页面方便测试这些方法的实际效果。对于数据的处

ゞ浴缸里的玫瑰/ 2022年05月26日 12:50/ 0 赞/ 194 阅读

相关关于javascript中Math对象的属性与方法研究

看了一下js中有Math对象可以对数据进行数学运算，以前也用到过，不过没有进行完整的研究，今天完整的看了看，写了个测试页面方便测试这些方法的实际效果。对于数据的处理，尤

Myth丶恋晨/ 2022年04月15日 02:15/ 0 赞/ 204 阅读

相关关于javascript中Math对象的属性与方法研究

看了一下js中有Math对象可以对数据进行数学运算，以前也用到过，不过没有进行完整的研究，今天完整的看了看，写了个测试页面方便测试这些方法的实际效果。对于数据的处理，尤

梦里梦外;/ 2022年04月15日 02:15/ 0 赞/ 196 阅读

相关 JavaScript——数据属性和访问器属性

我们都知道，在javascript中通过`var obj = {name: "dancy"}` 可直接创建一个对象。当我们需要取值时，直接使用`obj.name`就能获取到

àì夳堔傛蜴生んèń/ 2022年04月10日 01:26/ 0 赞/ 273 阅读

相关关于渐变属性值的一些理解

首先，对于渐变（gradient）主要有两种方式，一种为线性渐变（linear-gradient），一种为径向渐（radical-gradient）本篇着重讨论线性渐变。

我不是女神ヾ/ 2022年03月09日 04:08/ 0 赞/ 248 阅读

相关 EditText的一些属性

转载：[http://www.cnblogs.com/haochuang/p/3571754.html][http_www.cnblogs.com_haochuang_p_35

桃扇骨/ 2021年09月26日 03:24/ 0 赞/ 463 阅读

相关关于BeanCopier的一些思考

在做业务的时候，我们有时为了隔离变化，会将DAO查询出来的Entity，和对外提供的DTO隔离开来。大概90%的时候，它们的结构都是类似的，但是我们很不喜欢写很多冗长的b.se

系统管理员/ 2021年06月24日 15:57/ 0 赞/ 645 阅读