为何此处输出为undefined？是否因函数未在对象上下文调用致this为undefined？

问题1：为何此处的输出为undefined？ #

咱们先拿一个典型的场景来举例，比如你可能写了这样的代码：

const user = {
  username: "moki",
  greet: function() {
    console.log(this.username);
  }
};

const greetFunc = user.greet;
greetFunc(); // 这里输出undefined

输出undefined的核心原因是：函数调用时的this指向并没有绑定到你期望的对象上。当你调用greetFunc()时，this并没有指向user对象，那this.username自然找不到对应的属性值，最终返回undefined。

问题2：是否因为此处的函数未在对象的上下文内被调用，从而导致this的值为undefined？ #

完全正确！这就是问题的关键所在。

JavaScript里的this指向是在函数调用的那一刻决定的，而不是函数定义的时候。当你把对象的方法（比如user.greet）赋值给一个独立变量greetFunc，然后直接调用这个变量时，函数是作为普通函数执行的：

• 在ES6模块或者严格模式下，普通函数调用的this默认就是undefined；
• 如果是非严格模式，普通函数的this会指向全局对象（浏览器里是window，Node.js里是globalThis），但如果全局对象里没有对应属性，输出还是undefined。

怎么让函数保持对象上下文执行？ #

如果你想让函数始终在目标对象的上下文中运行，可以用这几种方式：

• 使用bind()方法永久绑定this：

const boundGreet = user.greet.bind(user);
boundGreet(); // 输出"moki"

• 调用时用call()或apply()临时指定上下文：

user.greet.call(user); // 输出"moki"

• 用箭头函数包裹（箭头函数的this继承自外层作用域）：

const arrowGreet = () => user.greet();
arrowGreet(); // 输出"moki"

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