要说到ES5的代理实现,其中比较有名的就算是vue的双向绑定中到了get和set的代理拦截实现了,下面是一个仿照该技术的一个实现:
// 拦截器
function Observer(data) {
this.data = data;
this.walk(data);
}
(function($Observer){
$Observer.prototype = {
walk: function(data) {
var me = this;
Object.keys(data).forEach(function(key) {
me.convert(key, data[key]);
});
},
convert: function(key, val) {
this.defineReactive(this.data, key, val);
},
defineReactive: function(data, key, val) {
var childObj = observe(val);
Object.defineProperty(data, key, {
enumerable: true, // 可枚举
configurable: false, // 不能再define
get: function() {
return val;
},
set: function(newVal) {
if (newVal === val) {
return;
}
val = newVal;
console.log("新的值是object的话,进行监听");
console.log("通知订阅者");
dep.notify();
}
});
}
};
})(Observer);
// 拦截器的出口
function observe(value) {
if (!value || typeof value !== 'object') {
return;
}
return new Observer(value);
};