Object的defineProperty方法

• 如何监听一个对象的某个属性被访问了呢？JavaScript提供了相关的机制给我们来实现，那就是设置对象属性的setter方法及getter方法。

let object = {
    name: 'sian',
    age: 18
}

Object.defineProperty(object, 'name', {
    get: function() {
        console.log('获取name的值')
    },
    set: function(value) {
        console.log('设置name的值');
    }
})

• 现在问题来了，我该如何返回这个属性的值？赋值的时候我又该如何保存该属性的值呢？

let object = {
    name: 'sian',
    age: 18
}
let name;
Object.defineProperty(object, 'name', {
    get: function() {
        console.log('获取name的值')
        return name;
    },
    set: function(value) {
        console.log('设置name的值');
        name = value;
    }
})

问题解决！在外部增加一个变量来保存不就可以了吗？可这样是不是很难看，并且多个属性我都得在外面定义一个变量来保存，这对应关系就会变得非常混乱，维护也是个问题。

defineReactive

function defineReactive(data, key, value) {
    Object.defineProperty(data, key, {
        get: function() {
            console.log(`获取${key}的值：`, value);
            return value;
        },
        set: function(newValue) {
            value = newValue;
            console.log(`设置${key}的值为：`, newValue);
        }
    })
}

// 测试一下
let obj = {
    name:　'sian'
};
defineReactive(obj, 'name', 'sian');
obj.name = 'jack';
console.log('obj.name: ', obj.name);

设置name的值为： jack
获取name的值： jack
obj.name:  jack

利用闭包来解决变量的问题，基础不好的童鞋可能会有点晕了，为什么这样就可以，解释起来会有点复杂，去网上搜索一下闭包相关的知识了解一下然后再慢慢体会。