zoukankan      html  css  js  c++  java
  • 我觉得vue原理就是 Object.defineProperty,简单实现了set和get,谢谢

    简单实现了一个对象的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>
  • 相关阅读:
    51nod 1227 平均最小公倍数
    51nod 1238 最小公倍数之和 V3
    「G2016 SCOI2018 Round #2」B
    51nod 1258 序列求和 V4
    2301: [HAOI2011]Problem b
    POJ
    NOIP2017解题报告
    笔记-[ZJOI2014]力
    题解-Little C Loves 3 III
    李超线段树
  • 原文地址:https://www.cnblogs.com/xudy/p/6487098.html
Copyright © 2011-2022 走看看