JavaScript中this指向问题：为何两段代码执行结果不同？

第一段代码执行异常的原因 #

先看这段代码的实际运行结果：

let startFunction = function (){
    let initData = () => {
        this.x = 2
    }
    return {
        x:1,
        init:initData.bind(this)
    };
};
obj=startFunction()
obj.init();
console.log(obj.x); // 输出1而非预期的2

核心问题出在箭头函数的this绑定规则：

• 箭头函数没有独立的this，它的this是词法绑定，在定义时就固定指向外层作用域的this。这里startFunction作为普通函数调用，它的this指向全局对象（浏览器环境为window，Node.js环境为globalThis）。
• 箭头函数不支持bind、call、apply这类修改this指向的方法，调用initData.bind(this)完全不会生效，箭头函数的this依然是全局对象。
• 执行obj.init()时，this.x = 2修改的是全局对象的x属性，而非返回的obj的x，所以最终obj.x还是初始值1。

第二段代码正常运行的逻辑 #

再看这段代码的执行结果：

let startFunction = function (){
    let initData = function(){
        this.x = 2
    }
    return {
        x:1,
        init:initData
    };
};
obj=startFunction()
obj.init();
console.log(obj.x); // 输出2

普通函数的this遵循调用时绑定规则：

• 普通函数的this指向由调用方式决定：当通过obj.init()调用时，init方法的调用者是obj，所以函数内部的this就指向obj。
• 此时this.x = 2直接修改的是obj的x属性，最终obj.x会变成2，符合预期。
• 你混淆了“作用域”和this指向的概念：作用域是变量的查找范围，而this是函数调用时确定的上下文对象，两者互不影响，普通函数的作用域不会改变this的指向。

内容的提问来源于stack exchange，提问作者Joao Henrique Cavalcanti