call 和 apply 最常见的用途是改变函数内部的 this 指向,我们来看个例子:
var obj1 = {
name: 'sven'
};
var obj2 = {
name: 'anne'
};
window.name = 'window';
var getName = function(){
alert ( this.name );
};
getName(); // 输出: window
getName.call( obj1 ); // 输出: sven
getName.call( obj2 ); // 输出: anne
当执行 getName.call( obj1 )这句代码时,getName 函数体内的 this 就指向 obj1 对象,所以此处的
var getName = function(){
alert ( this.name );
};
实际上相当于:
var getName = function(){
alert ( obj1.name ); // 输出: sven
};
在实际开发中,经常会遇到 this 指向被不经意改变的场景,比如有一个 div 节点,div 节点的 onclick 事件中的 this 本来是指向这个 div 的:
document.getElementById( 'div1' ).onclick = function(){
alert( this.id ); // 输出:div1
};
假如该事件函数中有一个内部函数 func,在事件内部调用 func 函数时,func 函数体内的 this就指向了 window,而不是我们预期的 div,见如下代码:
document.getElementById( 'div1' ).onclick = function(){
alert( this.id ); // 输出:div1
var func = function(){
alert ( this.id ); // 输出:undefined
}
func();
};
这时候我们用 call 来修正 func 函数内的 this,使其依然指向 div:
document.getElementById( 'div1' ).onclick = function(){
var func = function(){
alert ( this.id ); // 输出:div1
}
func.call( this );
};