call和apply最常见的用途是用于改变函数内部的this指向,
var obj = {
name : 'gao'
};
var obj2 = {
name : 'qiang'
};
window.name = 'window';
var getName = function(){
console.log(this.name);
};
getName(); // 输出window
var getName = function(){
// this = window;
console.log(this.name);
};
getName.call(obj); // 输出gao
var getName = function(){
// this = obj;
console.log(this.name);
};
getName.apply(obj2); // 输出qiang
var getName = function(){
// this = obj2;
console.log(this.name);
};
在实际的开发中,我们经常会遇到this指向被不经意改变的场景,例如:
document.getElementById('div1').onclick = function(){
console.log(this.id); // 输出div1
};
但是如果在事件处理函数中还有一个内部函数,这个内部函数里面的this会指向window
document.getElementById('div1').onclick = function(){
console.log(this.id); // 输出div1
var func = function(){
// 这里的this已经是window了
console.log(this.id); // 输出undefined
};
func();
// 下面用apply来救援
func.apply(this); // 将事件处理函数里面的this传入func函数,因为在事件处理函数的作用域里面,this还是指向div节点的
};
使用了apply,函数里面的this就被修复为div了