成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

從ES6的Proxy代理看ES5的代理如何實(shí)現(xiàn)

vpants / 1095人閱讀

摘要：從的代理看的代理如何實(shí)現(xiàn)的代理方法被攔截。。。對(duì)代理的實(shí)現(xiàn)要說(shuō)到的代理實(shí)現(xiàn)，其中比較有名的就算是的雙向綁定中到了和的代理攔截實(shí)現(xiàn)了，下面是一個(gè)仿照該技術(shù)的一個(gè)實(shí)現(xiàn)攔截器可枚舉不能再新的值是的話，進(jìn)行監(jiān)聽(tīng)通知訂閱者攔截器的出口

從ES6的Proxy代理看ES5的代理如何實(shí)現(xiàn) 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方法被攔截。。。

代碼解讀：從上述的例子可以看出，被代理對(duì)象person的get和set不會(huì)經(jīng)過(guò)代理攔截器get，set，而只有代理對(duì)象personCopy在get和set方法調(diào)用的時(shí)候才會(huì)經(jīng)過(guò)攔截器，由此可見(jiàn)ES6的代理Proxy并不是一個(gè)類似JAVA的AOP，而其實(shí)只是將person的引用賦值給了personCopy，讓代理對(duì)象personCopy和被代理對(duì)象person指向了同一個(gè)內(nèi)存空間，下面是我實(shí)現(xiàn)的一個(gè)用ES5寫(xiě)的Proxy攔截，供大家參考理解Proxy實(shí)現(xiàn)原理提供思路：

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;  
}
/*代理實(shí)現(xiàn)類*/
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對(duì)Proxy代理的實(shí)現(xiàn)

要說(shuō)到ES5的代理實(shí)現(xiàn)，其中比較有名的就算是vue的雙向綁定中到了get和set的代理攔截實(shí)現(xiàn)了，下面是一個(gè)仿照該技術(shù)的一個(gè)實(shí)現(xiàn)：

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的話，進(jìn)行監(jiān)聽(tīng)");
                    console.log("通知訂閱者");
                    dep.notify();
                }
            });
        }
};
})(Observer);
// 攔截器的出口
function observe(value) {
    if (!value || typeof value !== "object") {
        return;
    }
    return new Observer(value);
};

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/84224.html

相關(guān)文章

  • Immer.js簡(jiǎn)析

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

    Aceyclee 評(píng)論0 收藏0

  • Immer.js簡(jiǎn)析

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

    dackel 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)(二)

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

    zacklee 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)(二)

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

    lbool 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<