Object.definedProperty()中的getter与setter个人理解

谈Object.definedProperty()中的getter与setter个人理解就先介绍一下Object.definedProperty()

  Object.definedProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。在vue2.x中用来实现数据双向绑定

  语法:

Object.defineProperty(obj, prop, descriptor)

  

  obj 在其上定义或修改属性的对象。
  props 要定义其可枚举属性或修改的属性描述符的对象。对象中存在的属性描述符主要有两种:数据描述符和访问器描述符(更多详情,请参阅Object.defineProperty())。描述符具有以下键:
  configurable 为true时 当且仅当该属性描述符的类型可以被改变并且该属性可以从对应对象中删除。默认为 false

  enumerable 为为true时 当且仅当在枚举(for in 或者 Object.keys())相应对象上的属性时该属性显现。默认为 false

  value 与属性关联的值。可以是任何有效的JavaScript值(数字,对象,函数等)。默认为 undefined.

  writable 为true时,当且仅当与该属性相关联的值可以用assignment operator改变时。默认为 false

  get  作为该属性的 getter 函数,如果没有 getter 则为undefined。函数返回值将被用作属性的值。默认为 undefined

  set  作为属性的 setter 函数,如果没有 setter 则为undefined。函数将仅接受参数赋值给该属性的新值。默认为 undefined 

var arr = {};
Object.defineProperty(arr,"a",{
    get(){
        return --this._a
    },
    set(newVal){
        this._a = newVal
    }
})
arr.a = 10;
console.log(arr.a); // 9

 以上例为例设置一个对象一个参数来介绍set与get工作原理;

  当数组arr中没有属性a时,通过赋值arr.a=10;函数先触发set函数,形参newVal 现在就是10 ,在把newVal赋值给一个内部的变量,一般以下划线_加上属性名称 “_a”,当你使用arr.a来调用数据时,这时候就到达get函数,return 出定义的"_a",当然你也可以进一步操作在return 。

  

  


 
原文地址:https://www.cnblogs.com/aidixie/p/12822435.html