JavaScript中Apply和Call原理分析与使用

不同的定义

1. JavaScript函数或者说是对象中定义的函数可以动态的绑定到另一个函数中，即即使函数f2中未定义函数f1中的子函数ff1，f2也可以调用ff1，apply与call可以实现这种用法。
2. JavaScript对apply和call的解释是：使用指定对象替换当前对象并调用函数。
3. apply和call：它们的作用都是将函数绑定到另外一个对象上去运行 ，两者仅在定义参数上不同。
   

详细介绍

JavaScript动态变换运行时上下文特性,这种特性主要就体现在apply, call两个方法的运用上.

 

call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于 Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同.

 

区分apply,call就一句话,

foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)

 
相同点:两个方法产生的作用是完全一样的
不同点:方法传递的参数不同

 

我们就上面的foo.call(this, arg1, arg2, arg3)展开分析.

foo是一个方法,this 是方法执行时上下文相关对象 ,arg1, arg2, arg3是传给foo方法的参数.这里所谓的方法执行时上下文相关对象, 如果有面向对象的编程基础,那很好理解,就是在类实例化后对象中的this.

在JavaScript中,代码总是有一个上下文对象,代码处理该对象之内. 上下文对象是通过this变量来体现的, 这个this变量永远指向当前代码所处的对象中.

引用网上一个代码段，运行后自然就明白其道理。

<input type="text" id="myText"   value="input text">
<script>
    function Obj(){this.value="对象！";}
    var value="global 变量";
    function Fun1(){alert(this.value);}

    window.Fun1();   //global 变量
    Fun1.call(window);  //global 变量
    Fun1.call(document.getElementById('myText'));  //input text
    Fun1.call(new Obj());   //对象！
</script>

 
call函数和apply方法的第一个参数都是要传入给当前对象的对象，及函数内部的this。后面的参数都是传递给当前对象的参数。
运行如下代码：

<script>
   var func=new function(){this.a="func"}
    var myfunc=function(x){
        var a="myfunc";
        alert(this.a);
        alert(x);
    }
    myfunc.call(func,"var");
</script>

 可见分别弹出了func和var。到这里就对call的每个参数的意义有所了解了。

 

 这就是动态语言 JavaScript call的威力所在!

 

参考资料

http://www.cnblogs.com/fighting_cp/archive/2010/09/20/1831844.html

http://www.cnblogs.com/cc258/archive/2012/04/21/2462547.html

http://www.spacespace.cn/read.php?153