深入理解jQuery的proxy()

最新推荐文章于 2021-06-05 19:44:11 发布

BJ_benjamin

最新推荐文章于 2021-06-05 19:44:11 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端之Jquery and plugins

本文链接：https://blog.youkuaiyun.com/cuew1987/article/details/8991598

前端之Jquery and plugins 专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨了jQuery.proxy函数的原理和用途，详细解释了如何通过它实现事件委托，让开发者能够灵活地在JavaScript中进行函数绑定和执行。通过实例演示，读者将学会如何利用jQuery.proxy改变事件处理器内的作用域，以及如何通过指定对象来改变函数执行时的上下文。文章旨在提升开发者对JavaScript中闭包和作用域的理解，提供实用的技巧和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、jQuery中源码：

            
// Bind a function to a context, optionally partially applying any
            // arguments.
            proxy: function(fn, context) {
                if (typeof context === "string") {
                    var tmp = fn[context];
                    context = fn;
                    fn = tmp;
                }

                // Quick check to determine if target is callable, in the spec
                // this throws a TypeError, but we will just return undefined.
                if (!jQuery.isFunction(fn)) {
                    return undefined;
                }

                // Simulated bind
                var args = slice.call(arguments, 2),
                proxy = function() {
                    return fn.apply(context, args.concat(slice.call(arguments)));
                };

                // Set the guid of unique handler to the same of original handler, so it can be removed
                proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++;

                return proxy;
            },

JQuery.proxy(function,context):
使用context代替function中的context。
比如：
var you = {
  type: "person",
  test: function(event) {
  $("#log").append( this.type + " " );
  }
$("#test").click(you.test);调用这句只有相当于调用：
$("#test").click(function(event){
         $("#log").append( this.type + " " );
});
所以这里的this指的是$("#test").
如果这样调用：$("#test").click($.proxy(you.test,you));
此时的调用相当于：
$("#test").click(function(event){
         $("#log").append( you.type + " " );

});
虽然调用事件的对象是$("#test")，但是却可以使用$.proxy把事件执行内的对象改变为you。
JQuery.proxy(context,functionname):
第一个参数是你想proxy的对象，第二个参数为要改变的函数的名字。
var obj = {
    name: "John",
    test: function() {
      $("#log").append( this.name );
      $("#test").unbind("click", obj.test);
    }
  };
$("#test").click( jQuery.proxy( obj, "test" ) );   把obj作为context传入test中，而不是$("#test").
这个执行完之后，结果会是John，
如果使用下面这句
$("#test").click(obj.test);
结果会是$("#test").的name值。