在javascript中对于this指向的再次理解

Posted 2020-09-19 再多bug也要往前走

总所周知，function () {}函数体内的this对象指向的是调用该函数的对象，那么我们看一下这个例子

<script>
var length = 3;
function fn () {
  console.log(this.length)
}
fn();

</script>

　　函数调用是在最外层发生的，那么由于全局对象this的存在，那么函数体内的this指向的就是window对象。

在浏览器环境下，全局变量和window对象的属性是等价的，所以定义了length全局变量就相当于向window对象

添加了一个length属性。即上面代码的输出结果是3

下面我们再看一个例子

<script>
var length = 10;
function fn() {
  console.log(this.length);
}
function test(fn) {
  fn();
  arguments[0]();
}
test(fn, 3);

</script>

　　第一个输出的结果是10，大家应该都知道。第二个的输出结果是2！！！为什么呢？这里还要强调上面说的那句话

function () {}函数体内的this对象指向的是调用该函数的对象。在function函数体内的有一个很神奇的对象arguments

这个对象是由调用该函数时所传的实参决定的，而不是由定义函数时由形参决定的。这一点也是javascript语言广为诟病的一

点，无法依据定义函数的形参个数来实现方法的重载，只能靠argumengs的length属性来实现。所以在上面例子中，fn 和 3

这两个变量都挂载在arguments对象下面，还由于arguments是一个类数组对象所以它有length属性，也可以像使用数组一样

来使用arguemnts。即可以arguments[0]指向arguments的第一个属相，在上例中就指向了fn函数，fn函数体内的this就指向

了arguments对象，所以第二次打印出2!!!