JavaScript回调函数输出异常：this.length运行结果与预期不符

问题核心原因 #

你遗漏了JavaScript中普通函数的this隐式绑定规则，以及arguments类数组对象的特性。

var length = 4;
function callback() {
  console.log(this.length);
}
const object = {
  length: 5,
  method() {
    arguments[0]();
  }
};
object.method(callback, 1, 2);

执行逻辑拆解 #

• 调用object.method(callback, 1, 2)时，method函数接收了3个入参，对应的arguments类数组对象的length属性值为3。
• arguments[0]()的调用本质是把callback作为arguments对象的属性来执行，符合普通函数的隐式绑定规则：函数作为对象的方法调用时，内部this指向调用它的对象，因此callback内部的this绑定到了arguments对象上。
• 最终console.log(this.length)打印的是arguments.length的值，也就是3。

常见误区说明 #

你预期输出4，应该是默认认为callback属于全局调用，this指向全局对象（浏览器环境下为window），全局用var声明的变量会挂载到全局对象上，此时才会输出4。但本次调用逻辑不符合全局调用的规则，也不会继承method内部的this指向（也就是不会指向object对象输出5）。

内容的提问来源于stack exchange，提问作者Sarwan