淺談jQuery中$.proxy()工具方法

聽書人發表於2018-12-31
jQuery

$.proxy()是改變this指向的一個工具方法,跟bind比較相似.

具體用法如下：

錯誤程式碼

```

     
123



var list = {
    init : function () {
        this.ms = 123;
        this.dom = document.getElementsByClassName('demo')[0];
        this.bindEvent();
        
    },
    bindEvent : function () {
        this.dom.onclick = this.show;
      
    },
    show : function () {
        console.log(this.produseMs(this.ms));
    },
    produseMs : function (ms) {
        return ms + 234;
    }
}
list.init();
}

```

正確程式碼

```
var list = {
    init : function () {
        this.ms = 123;
        this.dom = document.getElementsByClassName('demo')[0];
        this.bindEvent();
        
    },
    bindEvent : function () {
        this.dom.onclick = $.proxy(this.show,this);
      
    },
    show : function () {
        console.log(this.produseMs(this.ms));
    },
    produseMs : function (ms) {
        return ms + 234;
    }
}
list.init();
}

```

如果我們按照第一個程式碼塊來執行的話,那勢必會報錯的,因為我們第一個程式碼塊當中呼叫show之時，它的this指向就不在是list，而變成一個bindEven,一個阻擋他去‘吃飯’之人,那肯定是不能與之為伍啊，所以就坦然的出了個bug。

我們在看第二個程式碼塊,在這個程式碼塊中,show找到了一個幫手,就是我們今天的主角$.proxy(),這位有什麼功能呢？讓我們拭目以待。 在init(初始函式)中,我們放置了美味的菜餚,飯點了,初始函式通知(呼叫)了bindEvent,並給了它一張飯票(list的this),讓它通知show來吃飯。bindEvent一看,這還了得,我還沒有吃飯呢,你就讓別人吃，不行不行。於是,bindEvent就按照飯票(list的this)的模樣自己繪製了一張，就如同程式碼塊一一樣,show高高興興的跑到了食堂,發現飯票是假的,這個氣啊,於是我們的主角上場了，只見它,跑到了bindEvent前,先暴揍了它一頓,並把bindEvent自己繪製的飯票(bindEvent的this)放在了第一位,init給的飯票放在了第二位,然後把init給的飯票傳送給了show,讓show如願以償的吃上了晚飯。

-------- 我是分割線

-------------------------------

下面是我個人對於this的看法：

this就是個白眼狼,只認飯來不認娘。

-------- 我是分割線

-------------------------------

如有不同意見,歡迎斧正與叨擾： qq:591366052

相關文章