如何解决函数调用时this关键字指向异常导致输出undefined的问题

核心原因：this的绑定规则 #

你遇到的问题本质是JavaScript中this的绑定逻辑：

• 当通过website.getName()调用方法时，this会隐式绑定到调用它的对象website，所以返回website.name即Java。
• 当你把website.getName赋值给变量retrieveName后，直接调用retrieveName()时，this的绑定会丢失原对象的上下文：
  • 在浏览器非严格模式下，this会默认绑定到window对象，此时会输出全局的Oracle；
  • 但在严格模式、ES模块环境或Node.js模块中，全局执行上下文的this是undefined，所以this.name自然就是undefined，导致输出不符合预期。

解决方法 #

如果想让retrieveName()输出全局的Oracle，需要显式把this绑定到全局对象：

方法1：使用bind绑定全局上下文 #

var retrieveName = website.getName.bind(globalThis);
console.log(retrieveName()); // 输出Oracle

（浏览器中也可以用window替代globalThis，但globalThis是更通用的跨环境写法）

方法2：调用时用call/apply指定上下文 #

var retrieveName = website.getName;
console.log(retrieveName.call(globalThis)); // 输出Oracle

补充说明 #

你最后用bind(website)得到的boundGetName，本质是把this重新绑定回了website，所以输出Java，这符合预期逻辑。

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