$.proxy方法的理解

南山忍者

浏览: 86118 次
性别:
来自: 北京

最近访客更多访客>>

zhouguangrui

loris_jand

hillsoul

guolang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

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、stackoverflow中的问答：

这儿：

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	}

【最后】：不足之处，请批评与指正，多谢！

分享到：

对jQuery中的return false的理解 | Visual_Assist_X破解

2013-03-26 23:36
浏览 1119
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论