Object.defineProperty

作者: AAA前端 | 来源:发表于2019-04-01 10:22 被阅读0次

    Object.defineProperty(obj, prop, descriptor)

    • 该方法允许精确添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的,能够在属性枚举期间呈现出来(for...inObject.keys 方法), 这些属性的值可以被改变,也可以被删除。这个方法允许修改默认的额外选项(或配置)。默认情况下,使用 Object.defineProperty() 添加的属性值是不可修改的。
    • 数据描述符和存取描述符均具有以下可选键值:
    1. configurable
      当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false。
    2. enumerable
      当且仅当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中。默认为 false。
    • 数据描述符同时具有以下可选键值:
    1. value
      该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为undefined.
    2. writable
      当且仅当该属性的writabletrue时,value才能被赋值运算符改变。默认为 false
    • 存取描述符同时具有以下可选键值:
    1. get 默认为undefined
      一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象(由于继承关系,这里的this并不一定是定义该属性的对象)
    2. 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

        本文链接:https://www.haomeiwen.com/subject/ebymbqtx.html