通过一道题目,加深对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