$.proxy步骤的理解

$.proxy方法的理解

    1、首先先看一下,jQuery的proxy的官方文档中的解释

 

函数名称 返回值/类型
jQuery.proxy(function,context) Function

     其中:

          proxy(function,context),中的参数说明如下:

             (1)、function:

                          类型:Function

                          说明:The function whose context will be changed.(这句话的含义为:作用于上下文(context)的方法,会使得上下文发生变化---(其实这句话是一句废话,一个方法作用于某个东西,必然会使该“东西”发生变化))。

             (2)、context。

                          类型:PlainObject

                          说明:The object to which the context (this) of the function should be set.

                                 //-“The object”是指context。所以本句话的意思是指:参数context就是方法(function)的上下文(this)。

 

2、举例说明

       这个例子是jQuery官网的上的例子,在这里

<!DOCTYPE html>
<html>
	<head>
		<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	</head>
	<body>
		<p><button type="button" id="test">Test</button></p>
		<div id="log"></div>
		<script>
			var me = {
				type: "zombie",
				test: function(event) {
					/* Without proxy, `this` would refer to the event target */
					/* use event.target to reference that element. */
					/*如果不使用proxy方法,‘this’关键字将会是事件对象的target。*/
				var element = event.target;
				$(element).css("background-color", "red");
					/* With proxy, `this` refers to the me object encapsulating */
					/* this function. */
					/*若使用了proxy,则上下文中的this,将会是‘me’*/
				$("#log").append( "Hello " + this.type + "<br>" );
				$("#test").off("click", this.test);
				}
			};
			var you = {
				type: "person",
				test: function(event) {
				$("#log").append( this.type + " " );
				}
			};
			/* execute you.test() in the context of the `you` object */
			/* no matter where it is called */
			/* i.e. the `this` keyword will refer to `you` */
			var youClick = $.proxy( you.test, you );
			/* attach click handlers to #test */
			$("#test")
				/* this === "zombie"; handler unbound after first click */
			.on( "click", $.proxy( me.test, me ) )
				/* this === "person" */
			.on( "click", youClick )
				/* this === "zombie" */
			.on( "click", $.proxy( you.test, me ) )
				/* this === "<button> element" */
			.on( "click", you.test );
		</script>
	</body>
</html>
 

 

   通过这个例子,就可以知道:this关键词一般是指event.target,即事件的对象。但是通过proxy方法,可以改变this关键字所指的事件对象。这也就是context参数的含义。

     通过function,作用于context,使其context发生改变。

 

     在《Learning jQuery(third Edition)》中附录C中,对proxy的定义为:

 

      创建(返回)一个在指定上下文中执行的新方法

 

       个人理解:

            在这个句话中:

                  指定上下文:是指:proxy中的context参数。

                  执行:是指proxy中的function参数。

 

       所以proxy方法的目的是直接指定上下文,然后定义的function作用于该上下文(this)      

 

3、proxy使用目的

 

       举例说明:

         代码-1

$('#myElement').click(function() {
        // In this function, "this" is our DOM element.
    $(this).addClass('aNewClass');
});
       在代码-1中,点击myElement,则该元素(myElement)将会添加aNewClass样式类。
    如果,我们想在1秒之后,为该元素添加样式,则会用到setTimeOut方法,实现如下:
$('#myElement').click(function() {
    setTimeout(function() {
          // 将会出问题,this将不是我们想要的element。
        $(this).addClass('aNewClass');
    }, 1000);
});
   但是这样使用,就会出现问题。文中的‘this’,不是ID为myElement元素,而是window。
   所以处理该问题的将会用到proxy方法。
$('#myElement').click(function() {
   // ------------------v--------give $.proxy our function,
    setTimeout($.proxy(function() {
        $(this).addClass('aNewClass');  // Now "this" is again our element
    }, this), 1000);
   // ---^--------------and tell it that we want our DOM element to be the
   //                      value of "this" in the function
});
   
     这样问题就会解决~~

3、参考资料

     1、关于proxy的一些博客是不错的。

      举例:《个人对JQuery Proxy()函数的理解》

    2、*中的问答:

       这儿:

    3、一个不错的讲解proxy的视频。(是英文的)

          这儿

    4、jQuery中proxy的源代码(呵呵,没看,仅仅是贴在这了)

 

01	/* jQuery 源码之 proxy:
02	 使用 apply 形式, 执行回调函数.
03	*/
04	jQuery.proxy = function( fn, proxy, thisObject ) {
05	    if ( arguments.length === 2 ) {
06	        // jQuery.proxy(context, name);
07	        if ( typeof proxy === "string" ) {
08	            thisObject = fn;
09	            fn = thisObject[ proxy ];
10	            proxy = undefined;
11	 
12	            /* 转化结果:
13	                thisObject -> context
14	                fn -> name
15	                proxy -> undefined
16	             */
17	        }
18	        // jQuery.proxy(name, context);
19	        else if ( proxy && !jQuery.isFunction( proxy ) ) {
20	            thisObject = proxy;
21	            proxy = undefined;
22	        }
23	    }
24	    if ( !proxy && fn ) {
25	        /* 使用 proxy 保证 函数执行时, context 为指定值 */
26	        proxy = function() {
27	            return fn.apply( thisObject || this, arguments );
28	        };
29	    }
30	    // Set the guid of unique handler to the same of original handler, so it can be removed
31	    if ( fn ) {
32	        proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++;
33	    }
34	    // So proxy can be declared as an argument
35	    return proxy;
36	}

 

   【最后】:不足之处,请批评与指正,多谢!