用实例来解释jquery里call和apply的用法推荐 亲测 原创 收藏

文章标签:
  • :
  • 04-02 12:02
  • :
  • 102次
  • :
  • 0条
  • 3赞

简介jquery里call和apply的含义和用法,并且用实例来直观的演示两者的区别及使用方法。l

callapply是jquery里内置的两个函数,但在绝大数的jquery Chm帮助手册上都没看到对这两个函数的解释,反而在jquery的源文件里,我们能看到很多函数里都用到了call和apply这两个函数,本文站长就和大家分享一下jquery里call和apply的用法。

其实call和apply站长也很少用到,至少站长从事web开发的七年多来,遇到的每个问题,站长都能在不使用call或apply的前提下而解决,站长之所以要研究call和apply,是站长在分析一个jquery插件的源码时,看到了这两个函数,并且查看了许多的资料,进而整理了一下,分享给大家。

首先,我们来看call和apply在使用的时候的语法结构:

官方版:
call([thisObj[,arg1[,arg2[,[,..argN]]]]])
apply([thisObj[,argArray]])

站长理解版:
函数A[或对象里的某个方法].call([对象],参数1,参考2,参数3....);
函数A[或对象里的某个方法].apply([对象],[参数1,参数2,参数3....]);

从上面的语法结构,我们能看到,call和apply的区别就是后面的参数了,这些参数是用来传递给前面的函数A,或者某个对象里的某个方法的,call可以有n个参数,而apply里,要传递的参数必须写在数组里;

PS:call和apply的作用是一样的,如果我们要传递的参数大于三个,我们就用apply,这样效率更高!

其次,我们来看call和apply的含义;

    官方版:调用一个对象的方法,以另一个对象替换当前对象[有点绕~~~];

    网络版:改变函数的上下文环境,也就是作用域,或者说是this指针;

    站长版:在一个函数里调用另一个函数或方法,并且不改变当前函数的this所代表的对象。

第三,来看几个具体的实例,直观的了解jquery里call和apply的用法;

下面的这几个实例是站长参考网上找来的,虽然没有什么实际意义,并且有的实例还P用没有,但对我们了解call和apply的用法,表现的更直观一些,并且站长附带上了在线实例演示,可以让你直接在线演示这些实例。

实例1:百度搜索jquery call后出来的结果里,几乎每个网站里都有的实例,但幸好站长自己测试了一下,不然真被拐到胡同里了,下面是站长的在线演示链接:

jquery里call和apply用法的在线实例演示

上面在线实例演示里的实例1就是网上各大网站上都有的实例,大家自己动手演示一下就知道了,P用没有,看下面的代码:

幸好站长自己动手测试了下,要不然就被拐进去出不来了,通过测试,我们能看出,jia.call(jian,3,2)的结果和jia(3,2)是一模一样的,所以上面的这个例子根本就不能很好的解释和演示call的用法,反而看了会让人更迷惑。

实例2:站长在上面实例1的基础上稍作修改了一下,在上面的在线演示里有:

var aa=5;var bb=2;
var cc={aa:55,bb:22};
function add(aa,bb){alert(this.aa+this.bb);}
$("#add-call").click(function(){add.call(cc,3,2);});

上面代码中,我们看出,变量aa和bb是声明在函数外面的,是全局的变量,所以在add这个函数引用的时候,引用的就是这些变量,但我们在另一个函数里,通过call,并且传递了一个对象cc给函数add,这时,在函数add里,this指向的就是我们传递给它的这个对象了。这个实例很好的解释了call是如何改变变量的this指针和作用域的。

实例3:演示通过call或apply实现对象方法的继承:

function Person(name){
    this.name=name;  
    this.showname=function(){alert(this.name);};
}
function Student(name){	
    Person.call(this,name);
}
$("#student").click(function(){
    new Student("aijquery").showname();
});

从上面代码中,我们看出,Student函数里,用call继承了Person对象,所以Student里也就有了showname的方法。

实例4:上面的几个实例,我们在实际上都不太能用到,下面这个实例,就与我们实际应用中非常接近了,下面的这个实例,实现了对象的多重继承:

function jiafa(){	
    this.jia=function(a,b){alert(a+b);};
}
function jianfa(){	
    this.jian=function(a,b){alert(a-b);};
}
function jishuan(){	
    jiafa.call(this);  	
    jianfa.call(this);
}
$("#jishuan-jia").click(function(){new jishuan().jia(1,2);});

本文首发{爱jQuery www.aijquery.cn}

好了,关于jquery里call和apply的用法就暂时介绍到这里,上面的实例都在文章中间的那个在线实例演示里,大家可以自己动手测试,下面是在线实例的截图:



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-14 22:11:00