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

通过一道题目，加深对JS中this的理解 ～

var length = 10;
function fn() {
  console.log(this.length);
}
var obj = {
  length: 5,
  invoke(fn) {
    fn();
    arguments[0]();
  },
};

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