通过代码了解学习JS函数中this

通过一道题目,加深对JS中this的理解 ~

 1 var length = 10;
 2 function fn() {
 3   console.log(this.length);
 4 }
 5 var obj = {
 6   length: 5,
 7   invoke(fn) {
 8     fn();
 9     arguments[0]();
10   },
11 };
12 
13 obj.invoke(fn, 1);
 
首先,需要清楚的是,一般情况下(普通函数中的)this会指向它所在函数的调用者。
其次,如果目标函数无显式的调用者,那么函数内的this默认会指向全局对象。
  例如,直接当作独立函数进行调用,
  浏览器环境中,this指向Window(严格模式下,this为undefined);
  Node环境中,this指向Global。
最后,回到题目中,
1. 代码第8行,fn作为一个独立函数被调用,所以其方法体内的this指向全局对象;
2. 代码第9行,将会获取invoke()函数中自带arguments参数对象,该对象为类数组,类数组的本质也是一个普通对象,只不过会带有一个值为number类型的length属性。
 


执行arguments[0](),本质上等同于argument.fn(),只不过属性名成了'0'。
这时fn()函数是作为arguments的属性方法被调用,所以this指向arguments对象。
 
所以,上述代码的执行结果为:
// 10
// 2

 

 

End

 

posted @ 2022-04-12 00:33  樊顺  阅读(26)  评论(0编辑  收藏  举报