JS箭头函数this指向问题：如何让代码输出global honey？

首先明确核心点：箭头函数的this是定义时就固定的，不会被调用方式（包括bind、call、apply）改变，而且你尝试的代码只调用了bind但没执行绑定后的函数，所以没有输出。

为什么原代码输出undefined？ #

你的test是箭头函数，定义在全局作用域，它的this指向全局对象（浏览器是window，Node.js是globalThis）。但如果你的运行环境是严格模式或ES模块，直接写target = 'global honey'不会把变量挂载到全局对象上，导致this.target找不到对应属性，输出undefined。

正确实现方式 #

方式1：直接访问全局对象（不依赖this） #

如果坚持用箭头函数，直接通过全局对象访问target即可，不用依赖this：

// 浏览器环境用window，Node.js用globalThis
window.target = 'global honey';

const test = () => {
    console.log(window.target);
}

const object = {
    target: 'local honey',
    action: test
}

object.action(); // 输出global honey

方式2：改用普通函数 + bind绑定全局this #

如果可以把箭头函数改成普通函数，就能用bind绑定全局this，确保调用时this指向全局对象：

target = 'global honey';

// 改成普通函数
function test() {
    console.log(this.target);
}

const object = {
    target: 'local honey',
    // 绑定全局this到test函数
    action: test.bind(globalThis)
}

object.action(); // 输出global honey

为什么你的bind尝试无效？ #

1. 箭头函数的this无法被bind修改：箭头函数没有自己的this，它的this继承自定义时的外层作用域，bind、call、apply对它完全不起作用；
2. 你只执行了object.action.bind(object)，这只是创建了一个新的绑定函数，但没有调用它，自然不会有输出。

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