$.proxy(function,context):保持特定的作用域用法详解

2017-12-21 02:12 9098 次阅读分类: JS+jQuery, 前端相关已关闭评论

免打扰阅读

$.proxy(function,context)方法，jQuery 1.4 新增，主要用于保持特定的作用域。

当有事件处理函数要附加到元素上，但他们的作用域实际是指向另一个对象时，这个方法最有用了。此外，最妙的是，jQuery能够确保即便你绑定的函数是经过jQuery.proxy()处理过的函数，你依然可以传递原先的函数来准确无误地取消绑定。

这个函数有2种用法，

1、$.proxy(function,context)

function:将要被改变作用域的函数

context:一个object，function函数的作用域会被设置到这个object上来

2、$.proxy(context,name)

context:一个object，那个函数的作用域会被设置到这个object上来。

name：带引号的函数名(这个函数必须是前一个参数 'context' 对象的属性)

示例：强制设置test函数的作用域，让this指向obj而不是#test对象。

HTML & jquery代码:

<div id="link">Click Here!</div> <script> var obj = { test: function() { console.log(this); $(document).unbind("click", obj.test); } }; //obj.test函数this 指向 #link $(document).on('click', '#link', obj.test); //让obj.test函数 this 保持指向 obj // $(document).on('click', '#link', $.proxy(obj.test,obj)); //以下代码跟上面那句是等价的 // $(document).on('click', '#link', $.proxy(obj,"test")); //给定点击事件处理函数，还可以这样写，不改变obj.test this作用域 // $(document).on('click', '#link', function() { // obj.test() // }); </script>

提示：你可以先修改部分代码再运行。

在obj.test()函数结尾处打断点，依次取消掉点击事件的前面注释，可以查看到obj.test()中作用域this的指向！