重温js——属性描述符

简介: 我们会发现,当我们去改变属性赋值的时候,会自动执行set函数,相当于是通知了set函数。属性取值的时候会自动的执行get函数,自动通知get函数。正是因为有这个自动通知的功能,vue2中的响应式系统就是基于Object.defineProperty()来实现对象的响应的。

属性描述符


属性描述符表达了一个属性的相关信息(元数据),本质上是一个对象。


数据属性


在我们使用对象的过程中,对一个对象进行取值和赋值的时候,该属性称之为 数据属性


959a6247e5a544c49413f093efa9d3da.png


存取器属性


存取器属性是当给属性赋值或者取值的时候,会自动的运行一个函数。


语法


Object.defineProperty(obj, prop, descriptor)
// 参数
obj:要定义属性的对象。
prop: 要定义或修改的属性的名称或 Symbol 。
descriptor:要定义或修改的属性描述符。
在descriptor里面有一个get和set的函数就是存取器属性


例如:


var obj = {};
Object.defineProperty(obj, 'x', {
  get:function(){
  // 这里的返回值就是读取obj的属性x的值,默认返回undefined
  },
  set:function(val){
    // 这里的val参数是设置obj.x的值
  },
})
// 进行设置和取值需要注意,定义一个额外的变量,不然会造成无限调用set方法而内存溢出


存取器修饰符的作用


  • 我们会发现,当我们去改变属性赋值的时候,会自动执行set函数,相当于是通知了set函数。属性取值的时候会自动的执行get函数,自动通知get函数。正是因为有这个自动通知的功能,vue2中的响应式系统就是基于Object.defineProperty()来实现对象的响应的。


  • 我们还可以基于存取器来 实现对单一属性的控制,在函数里面实现对某一属性的类型判断或者是做限定。


例如: 有一个用户的对象,年龄只能是正数,并且是有一定范围的。


var User = function(name,  age){
  this.name = name;
  var _age;
  Object.defineProperty(this, 'age', {
     get:function(){
       return _age;
   },
   set:function(val){
   // 年龄小于0赋值给0,大于200赋值200
       if(val < 0){
        _age = 0;
       }else if(val > 200){
    _age  = 200;
     }
     _age = val;
   },
  })
  // 赋值age,然后通过set来进行校验
  this.age = age;
}
var u = new User('twinkle', 10);
console.log(u.age);
u.age = -1;
console.log(u.age);
u.age = 1000;
console.log(u.age)


结果:


8f4075bb135146089f247f724ad7c518.png


其他属性描述符号


configurable


当且仅当该属性的 configurable 键值为 true 时,该属性的描述符才能够被改变,同时该属性也能从对应的对象上被删除。

默认为 false。


enumerable


当且仅当该属性的 enumerable 键值为 true 时,该属性才会出现在对象的枚举属性中。

默认为 false。


数据描述符还具有以下可选键值:


value


该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。

默认为 undefined。


writable


当且仅当该属性的 writable 键值为 true 时,属性的值,也就是上面的 value,才能被赋值运算符 (en-US)改变。

默认为 false。


写出来的代码是这样的:


var obj = {};
Object.defineProperty(obj, "x", {
  enumerable: false, //  是否可枚举的
  configurable: false, // 是否可以可以被操作
  writable: false, // 是否可写,默认是只读
  value: "1"
});


结果:


308806d5c074456792e59f1d92d18b15.png


这里可能有人会问,存取器属性符和其他属性符里面有相斥的地方,比如: 我设置了value: 1 然后我有设置了get方法并且返回2,那我读取的结果是啥?


var obj = {};
Object.defineProperty(obj, "x", {
  enumerable: false, //  是否可枚举的
  configurable: false, // 是否可以可以被操作
  writable: false, // 是否可写,默认是只读
  value: "1",
  get:function(){
  return 2
  }
});


如果代码如上的话,代码手写在运行时候就会报错。


e1cb440a13bd4725ae359f99f34d6069.png


描述符可拥有的键值



configurable
enumerable value writable get set
数据描述符 可以 可以 可以 可以 不可以 不可以
存取描述符 可以 可以 不可以 不可以 可以 可以


如果一个描述符不具有 value、writable、get 和 set 中的任意一个键,那么它将被认为是一个数据描述符。如果一个描述符同时拥有 value 或 writable 和 get 或 set 键,则会产生一个异常。


更多请查看

相关文章
|
1月前
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中,需要通过测试和验证来确定最适合的加载方式,以提供更好的用户体验和页面性能。
|
1月前
|
监控 JavaScript 前端开发
使用 `defer` 属性异步加载 JavaScript
【10月更文挑战第24天】使用 `defer` 属性异步加载 JavaScript 是一种有效的提高页面性能和用户体验的方法。通过合理设置 `defer` 属性,可以在不影响页面渲染的情况下异步加载脚本,并确保脚本的执行顺序。在实际应用中,需要根据具体情况选择合适的加载方式,并注意处理可能出现的问题,以确保页面能够正常加载和执行。
|
2月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
72 4
|
2月前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器
27 1
|
3月前
|
JavaScript 前端开发
JavaScript基础知识-枚举对象中的属性
关于JavaScript基础知识中如何枚举对象属性的介绍。
33 1
JavaScript基础知识-枚举对象中的属性
|
2月前
|
存储 JavaScript 前端开发
js中map属性
js中map属性
22 0
|
2月前
|
缓存 JavaScript 前端开发
深入理解Vue.js中的计算属性与侦听属性
【10月更文挑战第5天】深入理解Vue.js中的计算属性与侦听属性
30 0
|
2月前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器:深入理解与实践
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器:深入理解与实践
23 0
|
3月前
|
存储 JavaScript 前端开发
JS中的数组有哪些常用操作函数和属性
【9月更文挑战第7天】JS中的数组有哪些常用操作函数和属性
20 1
|
4月前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
69 0