浅谈Object.defineProperty()中get和set

300 阅读1分钟

我们知道Object.defineProperty()包括三个参数,使用方法大概如下代码

  var obj = {}
        Object.defineProperty(obj, "newKey", {
            value: "hello",
            writable: true,
            enumerable: true,
            configurable: true,
        });

我们也知道vue的双向数据绑定就是基于Object.defineProperty(),其中get和set起着至关重要的作用。前面的那些可以很容易的查资料就能明白。我就讲一下get和set的作用; 简单来说get就是获取属性就会触发的函数,set是设置属性就会触发的函数。下面代码演示一下就能很容易的明白。

var obj = {}
        Object.defineProperty(obj, "name", {
            set: function(newValue) {
                console.log("你要赋值给我,我的新值是" + newValue)
            },
            get: function() {
                console.log("你取我的值")
                return 1
            }
        })
        obj.name = 'liuxiaofeng' 
        console.log(obj.name) 
            

控制台显示的是

image.png