使用call改变this指向

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 );
}; 
    原文作者:whmwjy1997
    原文地址: https://blog.csdn.net/qq_42698608/article/details/105728097
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞