vue数据绑定中defineProperty清晰解析和set和get使用,不懂就问

defineProperty清晰解析和set和get使用,不懂就问

都知道vue中的数据绑定就是用object.defineProperty以及其中的set和get实现的,所以理解vue的内部原理之前就需要理解object.defineProperty.因为很多关于这个的解释博客都写得很难理解,所以自己写一下自己的理解.

概念

Object.defineProperty(obj, prop, descriptor)其实就是对象中属性进行定义,对属性的状态进行描述,其中需要传入三个参数

• obj

  要在其上定义属性的对象。

• prop

  要定义或修改的属性的名称。

• descriptor

  将被定义或修改的属性描述符。

  使用

  let obj = {}
    Object.defineProperty(obj,'hello',{
      value: 1,
      enumerable: false,
      writable: false,
      configurable: false,
    })

详解descriptor中各个属性

首先这里要说的是descriptor中的属性分为数据描述符和存取描述符

数据描述符

• configurable

  确认该属性能否被修改,默认为 false。

• enumerable

  确认该属性是否能在 for...in循环和 Object.keys()中被枚举默认为 false。

• value

  该属性对应的值,默认为 undefined。

• writable

  该属性能否被赋值,默认为 false。

存取运算符

• configurable

  确认该属性能否被修改,默认为 false。

• enumerable

  确认该属性是否能在 for...in循环和 Object.keys()中被枚举默认为 false。

• get

  无参数传入,只有一个this,函数返回值就是你取到的值,取值时执行的方法

• set

  传入一个你刚刚赋进去的新值,无返回值,赋值是执行的方法

由上可知configurable和enumerable是公用的,(set,get)与(value,writable)是互斥的不能同时使用, 也就相当说你一旦使用了set和get的时候value就是undefined,而且不可赋值. 你所有的赋值和取值都是set和get的结果,属性的值真正的值永远都是undefined(重要)

当你使用set和get的时候你想当然的会

  let obj = {}
    Object.defineProperty(obj,'hello',{
        set: function(val) {
            console.log(val)
           this.hello = val + ' world'
        },
        get: function() {
            return this.hello
        }
    })

错误: this.hello 就是取值,相当于在get中使用get,直接递归了,内存栈溢出

所以你只能这么做

  let obj = {}
  let title = ''
    Object.defineProperty(obj,'title',{
        set: function(val) {
           title = title + ' world'
        },
        get: function() {
            return title
        }
    })
    title = 'hello'
    console.log(title)  //hello world

这样虽然是正确的,但是很简单的就能想到我们不可能每创建一个属性就,单独创建一个变量,所以最好的解决办法是在对象内创建另一个属性来放真正的值

  let obj = {}
    Object.defineProperty(obj,'title',{
        set: function(val) {
            console.log(val)
           this._title = val + ' world'
        },
        get: function() {
            return this._title
        }
    })
     title = 'hello'
    console.log(title)  //hello world

用_title作为一个不可直接调用的私有属性来存放真正的值,而表面上我们可以直接调用title属性

---

这样我们就既实现了一个属性的基本存取,还可以在set和get时触发函数做额外的操作,像vue中的数据绑定本质就是用这种原理实现的,即在set时操作页面的渲染,vue中的具体实现以后会写到,definePropety到这里以及很清楚了,希望大家看懂! 不懂就问~~