jQuery中$.proxy()的原理和使用

jQuery.proxy(),接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文(context )语境。

  • jQuery.proxy( function, context )

    function将要改变上下文语境的函数。

    context函数的上下文语境(`this`)会被设置成这个 object 对象。

  • jQuery.proxy( context, name )

    context函数的上下文语境会被设置成这个 object 对象。

    name将要改变上下文语境的函数名(这个函数必须是前一个参数 ‘context’ 对象的属性)

这个方法通常在向一个元素上附加事件处理函数时,上下文语境实际是指向另一个对象的情况下使用。

另外,jQuery 能够确保即使你绑定的函数是经过 jQuery.proxy() 处理过的函数,你依然可以用原先的函数来正确地取消绑定。

看一下官方的例子:

var obj = {
name: "John",
test: function() {
alert( this.name );
$("#test").unbind("click", obj.test);
}
};

$("#test").click( jQuery.proxy( obj, "test" ) );

// 以下代码跟上面那句是等价的:
// $("#test").click( jQuery.proxy( obj.test, obj ) );

// 可以与单独执行下面这句做个比较。
// $("#test").click( obj.test );

可以看一下jQuery中的实现(1.6之前的版本):

/* jQuery 源码之 proxy:
 使用 apply 形式, 执行回调函数.
*/
jQuery.proxy = function( fn, proxy, thisObject ) {
    if ( arguments.length === 2 ) {
        // jQuery.proxy(context, name);
        if ( typeof proxy === "string" ) {
            thisObject = fn;
            fn = thisObject[ proxy ];
            proxy = undefined;

            /* 转化结果:
                thisObject -> context
                fn -> name
                proxy -> undefined
             */
        }
        // jQuery.proxy(name, context);
        else if ( proxy && !jQuery.isFunction( proxy ) ) {
            thisObject = proxy;
            proxy = undefined;
        }
    }
    if ( !proxy && fn ) {
        /* 使用 proxy 保证 函数执行时, context 为指定值 */
        proxy = function() {
            return fn.apply( thisObject || this, arguments );
        };
    }
    // Set the guid of unique handler to the same of original handler, so it can be removed
    if ( fn ) {
        proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++;
    }
    // So proxy can be declared as an argument
    return proxy;
}

其实就是平常使用的的call和apply,大部分的时候作为回调使用。

stackoverflow上有个问题,其中的例子比较典型,供参考:

比如有如下代码:

$(‘#myElement‘).click(function() {

        // In this function, "this" is our DOM element.

    $(this).addClass(‘aNewClass‘);

});

这里的this就是我们的DOM元素。如果我们要在增加class样式之前需要等待一段时间,可能会将代码写成下面这样(注意:有问题的代码):

$(‘#myElement‘).click(function() {

    setTimeout(function() {

          // Problem! In this function "this" is not our element!

        $(this).addClass(‘aNewClass‘);

    }, 1000);

});

这里的this就不是我们期望的那个DOM元素了。解决方法就是使用jQuery的$.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

});

我们可以这样来理解上面的代码:

function() {

    // v--------func is the function we gave to $.proxy

    func.apply( ctx );

    // ----------^------ ctx is the value we wanted for "this" (our DOM element)

}

这就体现出来jQuery中$.proxy()的强大功效了。

注意:在jQuery 1.6及之后的版本中,除了上面提到的两种用法之外,proxy还增加了其他两种用法:

jQuery.proxy( function, context [, additionalArguments ] )
jQuery.proxy( context, name [, additionalArguments ] )

具体使用可以参考jQuery手册。

jQuery中$.proxy()的原理和使用

时间: 2024-10-08 10:22:05

jQuery中$.proxy()的原理和使用的相关文章

jQuery ui widget和jQuery plugin的实现原理简单比较

一.创建 1.  jQuery plugin (function($){ $.fn.MyPlugin=function(){ //js代码 } })(jQuery) 为了与页面上其他代码友好相处,将plugin定义在一个闭包里,MyPlugin是plugin的名字.调用方式:$('选择器').MyPlugin(); 2.  jquery ui widget (function($){ $.widget('ui.mywidget',{ options:{ //默认的配置参数 }, //方法的定义

jquery ready方法实现原理 内部原理

今天闲来无事研究研究jquery.ready()的内部实现,看JQ的源码一头雾水,由于自己很菜了,于是翻了翻牛人的播客,讲述详细,收获颇多. 先普及一下jquery.ready()和window.onload,window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发. 我的ready方法写了2版,借鉴了不

JSONP原理及jQuery中的使用

JSONP原理 JSON和JSONP JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息. JSONP(JSON With Padding),就是打包在函数调用中的的JSON(或者包裹的JSON). JSON是一种数据格式,JSONP是一种数据调用方式. 1 //JSON 2 3 { 4 5 “name”: “sb” 6 7 } 1 //JSONP 2 3 callback({ 4 5 “name”: “sb” 6 7 }

JQuery之proxy实现绑定代理

在javascript中,this指代的对象时常会变化,这会造成程序,混乱,一般做法就是先将this保存在一个变量中,就不怕她变了,我们先看一个小例子 var A = function(){ this.star = functiont(){}; this.beg = function(){ var that = this; $node.click(function(){ //this.start();//这里的this指代的是$node对象 that.start(); }); }; } JQue

Jquery 图片走马灯效果原理

本篇只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑.待会讲解 照例先上代码: HTML: <div class="box"> <div style="width: 1000px;" id="boxdiv"> <ul> <li style="display: block;" title="清灵少女宛如梦境仙女"><a

jQuery中的end()

要说end(),我们就不得不说prevObject. 在jQuery中,每个jQuery对象都有一个prevObject属性 var $p = $('p'); 这个属性是做什么的呢? jQuery内部维护着一个jQuery对象栈.每个遍历方法都会找到一组新元素(一个jQuery对象),然后jQuery会把这组元素推入到栈中. 可能上面这句话让人读起来有些茫然,不要紧,我们来一个例子: <!DOCTYPE html> <html lang="en"> <he

jquery事件委托的原理和用途

事件委托 声明:这一篇文章只是阐述了委托事件的原理和用委托的好处还有就是在什么时候要委托合适.在这里用的是on()和off()而对于委托的其他方法(delegate().live()等)和各个方法的比较在这里并没有详细阐述,以后如果有机会在发一篇 1.什么是委托呢? a)定义:把一件事交给别人代做就叫做委托 b)问题:为什么要把事交给别人来做呢? 原因很简单:第一.自己不想做,所以交给别人 第二.自己不会做,所以交给别人来做 第三.让别人来做这一件事更有优势等等(这也是为什么要使用委托的原因)

Jquery 扩展方法实现原理

JSONP原理 首先:JSON和JSONP是不一样的概念. JSON是一种数据交换格式,而JSONP是非正式传输协议. 该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据. 其实现细节是使用 Script标签携带一个Callback函数,动态的向服务端请求数据. 如:  <script type="text/javascript"&g

jQuery基础之(二)jQuery中的$

在jQuery中,最常用的莫过于使用美元符号$,它提供了各种各样的丰富功能.包括选择页面中一个或者一类元素.作为功能函数的前缀.windows.onload的完善,创建DOM节点等.本文介绍jQuery的用法.作为基础 1.选择器 在css中,选择器的作用是选择页面的某一类(类别选择器)元素或者某个(id选择器).而jQuery中的“$”作为选择器,同样是选择某类或者某个元素,只不过jQuery提供了更全面的选择方式.而且为用户处理了浏览器兼容问题. 例如在在css<h2>下的<a>