從ES6的Proxy代理看ES5的代理如何實現

vpants 發布于2019-08-20 18:14 / 1043人閱讀

摘要：從的代理看的代理如何實現的代理方法被攔截。。。對代理的實現要說到的代理實現，其中比較有名的就算是的雙向綁定中到了和的代理攔截實現了，下面是一個仿照該技術的一個實現攔截器可枚舉不能再新的值是的話，進行監聽通知訂閱者攔截器的出口

從ES6的Proxy代理看ES5的代理如何實現 ES6的Proxy代理

Example

var person = {name:""};
var personCopy = new Proxy(person,{
  get(target,key,receiver){
    console.log("get方法被攔截。。。");
    return Reflect.get(target,key,receiver);
  },
  set(target,key,value,receiver){
    console.log("set方法被攔截。。。")
    return Reflect.set(target,key,value,receiver);
  }
})
person.name = "arvin";  // 未有攔截日志打出
personCopy.name = "arvin";  // set方法被攔截。。。
console.log(person.name);   // 未有攔截日志打出
console.log(personCopy.name);   // get方法被攔截。。。

代碼解讀：從上述的例子可以看出，被代理對象person的get和set不會經過代理攔截器get，set，而只有代理對象personCopy在get和set方法調用的時候才會經過攔截器，由此可見ES6的代理Proxy并不是一個類似JAVA的AOP，而其實只是將person的引用賦值給了personCopy，讓代理對象personCopy和被代理對象person指向了同一個內存空間，下面是我實現的一個用ES5寫的Proxy攔截，供大家參考理解Proxy實現原理提供思路：

Example：

/**淺拷貝工具方法**/
function clone(myObj){  
    if(typeof(myObj) != "object" || myObj == null) return myObj;  
    var newObj = new Object();  
    for(var i in myObj){  
      newObj[i] = clone(myObj[i]); 
    }  
    return newObj;  
}
/*代理實現類*/
function ProxyCopy(target,handle){
  var targetCopy = clone(target);
  Object.keys(targetCopy).forEach(function(key){
    Object.defineProperty(targetCopy, key, {
      get: function() {
        return handle.get && handle.get(target,key);
      },
      set: function(newVal) {
        handle.set && handle.set();
        target[key] = newVal;
      }
    });
  })
  return targetCopy;
}

var person = {name:""};
var personCopy = new ProxyCopy(person,{
  get(target,key){
    console.log("get方法被攔截。。。");
    return target[key];
  },
  set(target,key,value){
    console.log("set方法被攔截。。。")
    // return true;
  }
})
person.name = "arvin";  // 未有攔截日志打出
personCopy.name = "arvin";  // set方法被攔截。。。
console.log(person.name);   // 未有攔截日志打出
console.log(personCopy.name);   // get方法被攔截。。。

ES5對Proxy代理的實現

要說到ES5的代理實現，其中比較有名的就算是vue的雙向綁定中到了get和set的代理攔截實現了，下面是一個仿照該技術的一個實現：

Example

// 攔截器
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);
};

云服務器 GPU云服務器從哪里看快刪除的域名阿里云的服務器密碼從哪里看從代理商拿回域名的代理平臺

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84224.html

Immer.js簡析

摘要：所以整個過程只涉及三個輸入狀態，中間狀態，輸出狀態關鍵是是如何生成，如何應用修改，如何生成最終的。至此基本把上的模式解析完畢。結束實現還是相當巧妙的，以后可以在狀態管理上使用一下。開始在函數式編程中，Immutable這個特性是相當重要的，但是在Javascript中很明顯是沒辦法從語言層面提供支持，但是還有其他庫(例如：Immutable.js)可以提供給開發者用上這樣的特性，所...

Aceyclee 2019-08-22 18:23 評論0 收藏0
Immer.js簡析

摘要：所以整個過程只涉及三個輸入狀態，中間狀態，輸出狀態關鍵是是如何生成，如何應用修改，如何生成最終的。至此基本把上的模式解析完畢。結束實現還是相當巧妙的，以后可以在狀態管理上使用一下。開始在函數式編程中，Immutable這個特性是相當重要的，但是在Javascript中很明顯是沒辦法從語言層面提供支持，但是還有其他庫(例如：Immutable.js)可以提供給開發者用上這樣的特性，所...

dackel 2019-08-02 10:48 評論0 收藏0
前端知識點(二)

摘要：在給一個目標對象為構造函數的代理對象構造實例時觸發該操作，比如在執行時。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行內元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

zacklee 2019-08-30 15:55 評論0 收藏0
前端知識點(二)

摘要：在給一個目標對象為構造函數的代理對象構造實例時觸發該操作，比如在執行時。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行內元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

lbool 2019-08-23 14:52 評論0 收藏0