对于学习JavaScript这门语言的同学来说,this的指向肯定要掌握的;但是呢很多同学 学了很久,都还是处于一种云里雾里的状态,神似抓住了、掌握了、了解了、通透了;而一到使用环节、笔试题环节就拉跨,这是万万不行的🤦♂️🤦♂️🤦♂️。
开局先给同学们上个 R, 记住一点---函数中的 this ,谁调用它,它就指向谁,记住这一点!!!;
函数中的 this
函数预编译过程中的 this 指向 window ;
function test(){
console.log(this);
}
test();
console.log(this);
//此时,输出 Window{}
此时该函数中的 this 指向为 window ,空执行 其实就是 window.test()执行的形式,window调用test函数,所以 this 指向 window ;
被函数调用的 this
var num = 111;
var obj = {
num: 222,
fun: function(){
console.log(this.num);
}
}
var f = obj.fun;
f(); //输出 111
obj.fun(); //输出 222
空执行:小栗子,f()像这样的函数执行为空执行,真面目 window.f()
被执行:obj.fun(); 像这样的函数是被 某某某 对象调用而执行,被执行(俗语)
这里的 函数中的 this 被区分为,空执行,和被执行;
代码块中 f = obj.fun; 将函数体赋予f变量,然后执行则属于空执行,而函数空执行走的的预编译环节,预编译过程中的 this 指向 window ,也就是全局中的 num = 111;
而obj.fun();这样的函数执行,被obj调用而执行, 属于被执行(俗语),则 this 指向的是obj这个对象;
小栗子:
var name = 111;
var a = {
name : 222,
say: function(){
console.log(this.name);
}
};
var b = {
name: 333;
say: function(fun){
fun();
}
};
b.say(a.say); //输出 111
b.say = a.say;
b.say(); //输出 333
这个小栗子,如果大家能解开,this指向的掌握也差不多了;
先解答第一个:b.say(a.say); 把 a.say 当做实参传入 b.say 中,然后空执行,所以 this.name 指向的是 window 中的 name = 111;
第二个 b.say = a.say;,把 a.say 赋值给b.say; 然后 b.say( ); b对象中的say方法被 b 调用执行了,所以this指向的是b对象中 name = 333