彻底理解vue底层运用的核心函数Object.defineProperty

    一个函数诞生一个框架!

    vue就是得益于javaScrit的原生函数Object.defineProperty而诞生的。

    那么Object.defineProperty到底是什么?它的用法又是怎样的呢?

很简单,它就是用来为对象定义属性的。(从字面上就能理解)

既然是一个方法,那就要有:

语法:

Object.defineProperty(obj, prop, descriptor)

参数:

obj:必需。目标对象(要操作的对象,为这个对象定义属性)
prop:必需。需定义或修改的属性的名字
descriptor:必需。目标属性所拥有的特性

举个栗子:

var lala={};

Object.defineProperty(lala, "hehe", descriptor);

执行完之后我们 lala就有了hehe这个属性,我们就可以这样使用了lala.hehe。

下面我们就来说第三个参数descriptor:

descriptor这个是用来定义我们自定义属性(这里以上面例子中的hehe为例)hehe的特性。

我们看看我们能够定义hehe的特性有哪些?

value  属性对应的值,可以使任意类型的值,默认为undefined

writable  属性的值是否可以被重写。设置为true可以被重写;设置为false,不能被重写。默认为false。

enumerable  此属性是否可以被枚举(使用for...in或Object.keys())。设置为true可以被枚举;设置为false,不能被枚举。默认为false。

configurable  是否可以删除目标属性或是否可以再次修改属性的特性(writable, configurable, enumerable)。设置为true可以被删除或可以重新设置特性;设置为false,不能被可以被删除或不可以重新设置特性。默认为false。

这个属性起到两个作用:

  1. 目标属性是否可以使用delete删除

  2. 目标属性是否可以再次设置特性

上面的栗子拿下来再看一下:


Object.defineProperty(lala,"hehe",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false
});

这就是此方法的应用!

下面说说它在vue(angularjs也用到了)中的应用的一个特性:

存取器描述

我们要这么应用:

Object.defineProperty(lala,"hehe",{
    get:function (){} | undefined,
    set:function (value){} | undefined
    configurable: true | false
    enumerable: true | false
});

对你没看错  ,就是get和set方法。

get  方法在获取值的时候触发

set  方法在设置值的时候触发 

也就是说我们完全监听到属性值的动态  在获取或者设置值(就是我们定义hehe的值)的时候我们可以做任何事情,那么数据双向绑定就很好实现了。

理解了这个之后  我们就能理解vue为什么要将dom(vue里面的vm.$refs)管理起来,就行spring一样,都由它管理起来,剩下的我们就可以为所欲为了!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章