Object.defineProperty

2019-04-01 本文已影响0人 AAA前端

Object.defineProperty(obj, prop, descriptor)

该方法允许精确添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，能够在属性枚举期间呈现出来（for...in 或 Object.keys 方法），这些属性的值可以被改变，也可以被删除。这个方法允许修改默认的额外选项（或配置）。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改的。

数据描述符和存取描述符均具有以下可选键值：

configurable
当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。
enumerable
当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。

数据描述符同时具有以下可选键值：

value
该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为undefined.
writable
当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为 false。

存取描述符同时具有以下可选键值：

get 默认为undefined
一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）
set 默认为undefined
一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值

这样就能知道vue里面实现双向数据绑定了

var obj ={
  firstName: 'hahah',
  lastName: 'ooooo'
}

Object.defineProperty(obj, 'fullName', {
  get(){
    return this.firstName + '-' + this.lastName
  },
  set(value){
    const arr = value.split('-')
    this.firstName = arr[0]
    this.lastName = arr[1]
  }
})

console.log(obj.fullName);// 'hahah-ooooo'
obj.fullName = 'a-b';
console.log(obj.fullName, obj.firstName, obj.lastName); // 'a-b'  'a'   'b'

obj.firstName = 'w'
obj.lastName = 'm'
console.log(obj.fullName, obj.firstName, obj.lastName); // 'w-m'  'w'   'm'

Object.defineProperty

Object.defineProperty(obj, prop, descriptor)

猜你喜欢

热点阅读