JavaScript之call()和apply()

每一javascript function默认都有一些附带的method,如:Function.call(), Function.apply();这两个方法的作用都是将函数绑定到另外一个对象上去运行，两者仅在定义参数方式有所区别：

apply(thisArg,argArray);
call(thisArg[,arg1,arg2…] ]);

即所有函数内部的this指针都会被赋值为thisArg，这可实现将函数作为另外一个对象的方法运行的目的

1、call()method

通过两个实例说明call()的用法

示例一：

var x = 10;
var o = { x: 15 };

function f() {
    alert(this.x);
}

f();  //输出10
f.call(o);  //输出15

f() : 直接调用f， 而非通过对象实例的引用进行调用， 此时function f(){}中的this指向的是全局对象，示例中的第一行代码定义了一个全局变量x，因此，此时的this.x即返回全局变量x的值

f.call(o) : 通过Function.call()调用f，并传递了一个全局对象o做为参数，此时function f(){}中的this指向的是call方法传入的第一个参数o，因此，此时的this.x返回的就是对象o中的x属性对应的值

示例二：

var x = 10;
var o = { x: 15 };
function f(message) {
    alert(message);
    alert(this.x);
}

f("invoking f");
f.call(o, "invoking f via call");

该示例主要演示了通过call()传递参数到目标函数，根据该方法的定义，也可以传递多个参数

 

知识点：

理解在运行时，function f()中this关键字指向或引用的对象，只有在function f()执行时才能确定

 

2、apply()method

apply()方法和call()方法类似，区别就在于通过apply()传递参数（第二个参数）时，要求参数必须是数组类型

同样通过两个实例说明apply()的用法

示例一：

var x = 10;
var o = { x: 15 };
function f(message, a) {
    alert(message);
	alert(a);
    alert(this.x);
}

f("invoking f");//输出结果 : "invoking f", "undefined", 10
f.apply(o, ["argFirst","argSecond"]);//输出结果 : "argFirst",  "argSecond",  15

 该示例主要演示了apply()和call()的区别，主要最后一行代码apply()方法中的第二个参数是数组类型，目标函数f()在接收参数时，第一个参数对应数组中的第一个元素，第二个参数对应数组中的第二个元素，以此类推

示例二:

var o = { x: 15 };

function f(message1, message2)
{
    alert(message1 + (this.x * this.x) + message2);
}

function g(object, func)
{           
    // arguments[0] == object
    // arguments[1] == func
    
    var args = []; // empty array
    // copy all other arguments we want to "pass through" 
    for(var i = 2; i < arguments.length; i++)
    {
        args.push(arguments[i]);
    }

    func.apply(object, args);
}

g(o, f, "The value of x squared = ", ". Wow!");

该示例主要演示了利用apply()要求参数必须是数组的特性,和arguments对象结合编写出灵活优雅的代码

注意: arguments对象并不是数组类型,因此,在for循环中对arguments对象进行了转换

 

好了,到此call()和apply()两个方法的应用就介绍到此,以上理解主要参考http://odetocode.com/Blogs/scott/archive/2007/07/05/function-apply-and-function-call-in-javascript.aspx 后个人进行的总结和记录,以帮助理解,在此向作者表示感谢!

评论

1 楼 zyguo1006 2012-08-21  

写的很好,例子很生动.