call方法:
语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
apply方法:
语法:apply([thisObj[,argArray]])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
说明:如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。
apply和call两者在作用上是相同的,但两者在参数上有区别的。对于第一个参数意义都一样,但对第二个参数:apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。如 func.call(func1,var1,var2,var3)对应的 apply 写法为:func.apply(func1,[var1,var2,var3])。这里以 call 为例:
var sayName = function () {
alert(this.name);
}
var person = {
name: "person "
}
sayName.call(person ); //person
上面这个例子可以很直观地理解 call 的工作原理。也就是说,当在函数中调用 call 这个方法时,函数内部的 this 对象会自动指向 call 方法中的第一个参数。在上面这个例子中也就是 person 这个对象了。所以在执行 sayName.call(person ) 时,函数内部的 this.name 则会自动指向 person .name 。故最终结果为 person 。这是一个非常好理解的例子。接下来来看较为复杂的情况。
function Person1 () {
this.name = "person1";
this.sayName = function () {
alert(this.name);
}
}
function Person2 () {
this.name = "person2";
}
var sam = new Person2();
Person1.call(sam);
sam.sayName(); //person1
以上例子中,最关键的是 Person1.call(sam) 这一步。我们来看看在里面究竟发生了什么事。当调用 call这个方法时,函数 Person1 内部的 this 指向 sam 这个对象。相当于,给 sam 这个对象执行这两条语句:
this.name = "person1";
this.sayName = function () {
alert(this.name)
}
故在此重写了原来 sam 对象中的 name 属性。而且获得了一个新的方法。所以可以成功的调用 sam.sayName() 而且结果返回 person1 。
在 call 中传入函数
function class1 () {
this.message = "yeah";
}
function class2 () {
this.sayMessage = function () {
alert(this.message);
}
}
class2.call(class1);
alert(class1.sayMessage);
class1.sayMessage(); //undefined
上述例子中,我们调用了 class2 函数的 call 方法,传入了 class1 这个函数。结果 class1 拥有了 sayMessage 这个方法。但是直接调用这个方法返回的结果却是 undefined 而不是我们期望的 yeah 。这是为什么呢?为了搞清楚这里面的 this 指向,我们作如下修改:
var message = "hi";
function class1 () {
this.message = "yeah";
}
function class2 () {
this.message = "hello";
this.sayMessage = function () {
alert(this.message);
}
}
class2.call(class1);
alert(class1.sayMessage);
class1.sayMessage(); // hello
class1.message = "msg";
class1.sayMessage(); //msg
第一次调用 sayMessage 方法,返回 hello 。我们再来看一下 class2.call(class1)
这个过程。当执行这个方法时,class1 获得 class2 的 message 属性和 sayMessage
方法。所以此时有 class1.message = "hello" ,class1.sayMessage = function () {alert(this.message)}。因此执行 sayMessage 时返回 hello。当我们手动修改 class1.message 时,再调用这个方法,返回的值为我们修改的值。这证明了我们上面的推理是正确的。我们再来看前一个例子:
function class1 () {
this.message = "yeah";
}
function class2 () {
this.sayMessage = function () {
alert(this.message);
}
}
class2.call(class1);
alert(class1.sayMessage);
class1.sayMessage(); //undefined
这个例子中并没有定义 class1.message 这个属性。所以执行 sayMessage 方法时,返回为未定义。有个比较容易混淆的地方是, class1中定义的 this.message 并不是class1.message 。而是 class1 的实例才拥有这个 message 属性。类似的例子还有下面这个:
function Class1(){
this.showTxt = function(){alert(this.name)}
}
function Class2(){
this.name = 'class2';
}
var class1 = new Class1();
class1.showTxt.call(Class2);//undefined
alert(Class2.showTxt);//undefined
// 原因与上面的例子一样。 Class2 并没有定义 name 这个属性。