日期:2014-05-16  浏览次数:20338 次

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