JavaScript中的apply()方法和call()方法使用介绍

javascript中apply和call方法的作用及区别说明

call和apply的说明

1. call，apply都属于Function.prototype的一个方法，它是JavaScript引擎内在实现的，因为属于Function.prototype，所以每个Function对象实例(就是每个方法)都有call，apply属性。既然作为方法的属性，那它们的使用就当然是针对方法的了，这两个方法是容易混淆的，因为它们的作用一样，只是使用方式不同。
2. 语法：foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3);
3. 相同点：两个方法产生的作用是完全一样的。
4. 不同点：方法传递的参数不同。

<script type="text/javascript">
    function A(){
        this.flag = 'A';
        this.tip = function(){
            alert(this.flag);
        };
    }
    function B(){
        this.flag = 'B';
    }
    var a = new A();
    var b = new B();
    //a.tip.call(b);      //B
    a.tip.apply(b);       //B
</script>

代码解释(即说明apply和call作用)

1. 实例代码定义了两个函数A和B，A中包含flag属性和tip属性(这个属性赋值一个函数)，B中有一个flag属性。
2. 分别创建A和B的对象a和b。
3. 无论是a.tip.call(b);和a.tip.apply(b);运行的结果都是弹出B。
4. 从结果中可以看出call和apply都可以让B对象调用A对象的tip方法，并且修改了this的当前作用对象。

JavaScript中的apply()方法和call()方法使用介绍

1.  每个函数都包含两个非继承而来的方法：apply()和call()。
2.  他们的用途相同，都是在特定的作用域中调用函数。
3.  接收参数方面不同，apply()接收两个参数，一个是函数运行的作用域(this)，另一个是参数数组。
4.  call()方法第一个参数与apply()方法相同，但传递给函数的参数必须列举出来。 

例1:

 

window.firstName = "diz"; 
window.lastName = "song"; 
var myObject = { firstName: "my", lastName: "Object" }; 
function HelloName() { 
　　console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!"); 
} 
HelloName.call(window); //huo .call(this); 
HelloName.call(myObject); 

 

运行结果为:

Hello diz song glad to meet you! 
Hello my Object glad to meet you! 

例2:

function sum(num1, num2) { 
return num1 + num2; 
} 
console.log(sum.call(window, 10, 10)); //20 
console.log(sum.apply(window,[10,20])); //30 

分析：在例1中，我们发现apply()和call()的真正用武之地是能够扩充函数赖以运行的作用域，如果我们想用传统的方法实现，请见下面的代码：

window.firstName = "diz"; 
window.lastName = "song"; 
var myObject = { firstName: "my", lastName: "Object" }; 
function HelloName() { 
console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!"); 
} 
HelloName(); //Hello diz song glad to meet you! 
myObject.HelloName = HelloName; 
myObject.HelloName(); //Hello my Object glad to meet you! 

　　见加红的代码，我们发现，要想让HelloName()函数的作用域在对象myObject上，我们需要动态创建myObject的HelloName属性，此属性作为指针指向HelloName()函数，这样，当我们调用myObject.HelloName()时，函数内部的this变量就指向myObjecct，也就可以调用该对象的内部其他公共属性了。 
通过分析例2，我们可以看到call()和apply()函数的真正运用之处，在实际项目中，还需要根据实际灵活加以处理！ 
一个小问题：再看一看函数中定义函数时，this变量的情况 

function temp1() { 
console.log(this); //Object {} 
function temp2() { 
console.log(this); //Window 
} 
temp2(); 
} 
var Obj = {}; 
temp1.call(Obj); //运行结果见上面绿色的注释！！！！ 

　　
执行结果与下面的相同： 

function temp1() { 
console.log(this); 
temp2(); 
} 
function temp2() { 
console.log(this); 
} 
var Obj = {}; 
temp1.call(Obj); 

bind()方法 

window.color = "red"; 
var o = { color: "blue" }; 
function sayColor(){ 
alert(this.color); 
} 
var OSayColor = sayColor.bind(o); 
OSayColor(); //blue 

　这里，sayColor()调用bind()方法，并传入o对象，返回了OSayColor()函数，在OSayColor()中，this的值就为o对象。