我觉得vue原理就是 Object.defineProperty，简单实现了set和get，谢谢

最新推荐文章于 2022-07-16 16:03:50 发布

weixin_30367873

最新推荐文章于 2022-07-16 16:03:50 发布

阅读量149

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xudy/p/6487098.html

版权

简单实现了一个对象的set和get

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function Observer(data){
                this.data = data;
                this.observe();
            }
            
            var pro = Observer.prototype;
            pro.observe = function(){
                var _this = this;
                var arr = Object.keys(this.data);
                
                for(var i = 0; i < arr.length; i++){
                    (function(k , v){
                        Object.defineProperty(_this.data , k , {
                            set: function(value){
                                console.log('您设置了' + k + '属性的值为：' + value);
                            },
                            get: function(){
                                console.log('您调用了'+ k + '属性的get方法');
                                return v;
                            }
                        })
                    })(arr[i] , _this.data[arr[i]]);
                }
            }
            var _data = {
                name: 'xudy',
                age: 30
            }
            //注意不能传临时对象
            /*不可以这么写
             var o = new Observer({
                 name: 'xudy',
                age: 30
             });
             * */
            var o = new Observer(_data);
            
            o.data.name = 'aaaaaaaaa';    //您设置了name属性的值为：aaaaaaaaa
            o.data.name;    //您调用了name属性的get方法
            
            o.data.age = 28;    //您设置了age属性的值为：28
            o.data.age;            // 您调用了age属性的get方法
        </script>
    </head>
    <body>
    </body>
</html>

转载于:https://www.cnblogs.com/xudy/p/6487098.html

weixin_30367873

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
我觉得vue原理就是 Object.defineProperty，简单实现了set和get，谢谢

简单实现了一个对象的set和get<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"&g...
复制链接

扫一扫