ES5对ES6的Proxy实现【转载】

Hokori 3月21日

要说到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);
};

转载自从ES6的Proxy代理看ES5的代理如何实现

icon_biggrin.pngicon_neutral.pngicon_twisted.pngicon_arrow.pngicon_eek.pngicon_smile.pngicon_sad.pngicon_cool.pngicon_evil.pngicon_mrgreen.pngicon_exclaim.pngicon_surprised.pngicon_razz.pngicon_rolleyes.pngicon_wink.pngicon_cry.pngicon_confused.pngicon_lol.pngicon_mad.pngicon_question.pngicon_idea.pngicon_redface.png
expand_less