Object.defineProperty()方法的使用

Object.defineProperty()方法中有两个方法，一个是get，一个是set，当变量读取的时候会自动执行get方法，当变量设置值的时候会自动执行set方法，比如在vue这种双向绑定的框架中，源码实现就用了Object.defineProperty()来进行劫持。举个例子

<div id="test">
    {{name}}
</div>

我们页面上有如上代码，那怎么实现js中直接修改name的值让页面上的值也自动变化呢？这里我们就要借用牛逼的Object.defineProperty()

var Book = {}
var name='';
Object.defineProperty(Book, 'name', {
    set: function (value) {
        console.log('你取了一个书名叫做' + value);
        var test = document.getElementById("test");
        var value1 = test.innerHTML;
        value1 = value1.replace("{{name}}",value);
        test.innerHTML=value1;
        name=value1;
    },
    get: function () {
        return '获取了值'+name
    }
});
Book.name = 'vue权威指南';  // 会触发set方法
console.log(Book.name);  //会触发get方法

完整代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <div id="test">
            {{name}}
        </div>
    </body>
    <script>
        var Book = {}
        var name='';
        Object.defineProperty(Book, 'name', {
            set: function (value) {
                console.log('你取了一个书名叫做' + value);
                var test = document.getElementById("test");
                var value1 = test.innerHTML;
                value1 = value1.replace("{{name}}",value);
                test.innerHTML=value1;
                name=value1;
            },
            get: function () {
                return '获取了值'+name
            }
        });
        Book.name = 'vue权威指南';  // 会触发set方法
        console.log(Book.name);  //会触发get方法
    </script>
</html>

执行就可以看到效果