简单实现了一个对象的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>
我觉得vue原理就是 Object.defineProperty，简单实现了set和get，谢谢
原文：http://www.cnblogs.com/xudy/p/6487098.html