个人对JQuery Proxy()函数的理解
转载至:http://www.cnblogs.com/acles/archive/2012/11/20/2779282.html
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值。
这个函数和上面的那个函数的功能一样,就是使用了更加简洁的方式。
最后附上一篇stackoverflow的一个关于Porxy的一个问答的答案。问答原地址:http://stackoverflow.com/questions/4986329/understanding-proxy-in-jquery
What it ultimately does is it ensures that the value of this in a function will be the value you desire. A common example is in a setTimeout that takes place inside a click handler. Take this: $('#myElement').click(function() { // In this function, "this" is our DOM element. $(this).addClass('aNewClass'); }); The intention is simple enough. When myElement is clicked, it should get the class aNewClass. Inside the handler this represents the element that was clicked. But what if we wanted a short delay before adding the class? We might use a setTimeout to accomplish it, but the trouble is that whatever function we give to setTimeout, the value of thisinside that function will be window instead of our element. $('#myElement').click(function() { setTimeout(function() { // Problem! In this function "this" is not our element! $(this).addClass('aNewClass'); }, 1000); }); So what we can do instead, is to call $.proxy(), sending it the function and the value we want to assign to this, and it will return a function that will retain that value. $('#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 }); So after we gave $.proxy() the function, and the value we want for this, it returned a function that will ensure that this is properly set. How does it do it? It just returns an anonymous function that calls our function using the .apply()method, which lets it explicitly set the value of this. A simplified look at the function that is returned may look like: function() { // v--------func is the function we gave to $.proxy func.apply( ctx ); // ----------^------ ctx is the value we wanted for "this" (our DOM element) } So this anonymous function is given to setTimeout, and all it does is execute our original function with the proper this context.
个人对JQuery Proxy()函数的理解的更多相关文章
- 【转】个人对JQuery Proxy()函数的理解
原文地址:http://www.cnblogs.com/acles/archive/2012/11/20/2779282.html JQuery.proxy(function,context): 使用 ...
- jQuery.proxy() 函数详解
jQuery.proxy()函数用于改变函数的上下文. 你可以将指定函数传入该函数,该函数将返回一个新的函数,其执行代码不变,但函数内部的上下文(this)已经被更改为指定值. 该函数属于全局的jQu ...
- jQuery.proxy()函数
jQuery.proxy(),接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文(context)语境. context 代表上下文 name是上下文的某个属性 jQuery. ...
- 图片放大功能插件及jquery.extend函数理解
前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { ...
- jQuery proxy详解
第一次接触jQuery.proxy()时感觉这个方法不实用,不明白它到底是个什么意思.今天来将jQuery官网上的解释进行一下翻译,顺便添加自己的理解和一些示例.proxy也可称为代理. jQuery ...
- jQuery.proxy()的用法
一:参考范文一 第一次接触jQuery.proxy()时感觉这个方法不实用,不明白它到底是个什么意思.今天来将jQuery官网上的解释进行一下翻译,顺便添加自己的理解和一些示例.proxy也可称为代理 ...
- jQuery工具函数(转)
原文地址:http://www.cnblogs.com/kissdodog/archive/2012/12/27/2835561.html 作者:逆心 ------------------------ ...
- jQuery.ajax() 函数详解
jQuery.ajax()函数用于通过后台HTTP请求加载远程数据. jQuery.ajax()函数是jQuery封装的AJAX技术实现,通过该函数,我们无需刷新当前页面即可获取远程服务器上的数据. ...
- jquery $.proxy使用
在某些情况下,我们调用Javascript函数时候,this指针并不一定是我们所期望的那个.例如: //正常的this使用 $('#myElement').click(function() { // ...
随机推荐
- python基础入门一(语法基础)
作为自己正式接触并应用的第一门编程语言,在Alex和武sir两位大王的要求下,开始了写博客总结的日子.学习编程语言是很有趣的一件事情,但有2点请一定要谨记:1.做人靠自己,码代码也必须靠自己.能不能成 ...
- Swift_UI_UILabel
Swift_UI_UILabel import UIKit class ViewController: UIViewController { override func viewDidLoad() { ...
- Android 获取渠道名称
直接看代码, //获取渠道名称public static String getChannelName(Activity ctx) { if (ctx == null) { return null; } ...
- <hr> 的18种样式
18 Simple Styles for Horizontal Rules (hr CSS Design) Simple Styles for <hr>'s Code: <!DOCT ...
- postgresql常用命令
1.createdb 数据库名称 产生数据库2.dropdb 数据库名称 删除数据库 3.CREATE USER 用户名称 创建用户4.drop User 用户名称 删除用户 5.SELECT use ...
- lnmp搭建
一,安装php1,列出php php-fpm是否存在yum list php php-fpm2,安装yum -y install php php-fpm3,启动php-fpm:/etc/init.d/ ...
- CURL命令详解
curl命令是一个强大的网络工具,它能通过http,ftp等方式下载.上传文件.其中curl远不止这些功能,大家可以通过阅读手册获取更多的信息,类似的工具还有wget. curl命令使用了libcur ...
- bzoj3223 文艺平衡树
传送门 :http://www.lydsy.com/JudgeOnline/problem.php?id=3223 splay区间翻转的基础题,然而我还是调了一晚上(蒟蒻的悲哀) #include & ...
- Bootstrap Modal 垂直方向加滚动条
原文链接:http://blog.csdn.net/cyh1111/article/details/52960747 背景 使用Bootstrap Modal实现用户资料修改,由于用户信息过多,默认M ...
- python之SQLAlchemy
ORM介绍 orm英文全称object relational mapping,就是对象映射关系程序,简单来说我们类似python这种面向对象的程序来说一切皆对象,但是我们使用的数据库却都是关系型的,为 ...