浅谈jQuery中$.proxy()工具方法

最新推荐文章于 2022-05-19 15:35:29 发布

weixin_33913332

最新推荐文章于 2022-05-19 15:35:29 发布

阅读量82

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c29cbd8e51d4516c73cd45e

版权

$.proxy()是改变this指向的一个工具方法,跟bind比较相似.

具体用法如下：

错误代码

```

123

正确代码

```
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如愿以偿的吃上了晚饭。