JavaScript中this关键字的原理、用法及记忆方法咨询

首先看你给出的代码：

function hello() {
    let list = {
        firstName: "Jack"
    }
    return "Hello " + this.firstName;
}
console.log(hello());

这段代码执行后会输出 Hello undefined，因为直接调用hello()时，this指向的是全局对象（浏览器环境是window，Node.js环境是global；若开启严格模式，this会是undefined），而全局对象中没有firstName属性，所以结果为undefined。

通俗记忆：this是函数调用时的「上下文主人」 #

你可以把this简单理解成：谁调用了这个函数，this就是谁——关键看函数被调用的场景，而非函数定义的位置。

下面分几种常见场景拆解：

• 直接调用函数（如你代码里的hello()）
  非严格模式下，this指向全局对象；严格模式下this为undefined。

• 作为对象的方法调用
  把函数挂载到某个对象上，通过对象调用时，this指向该对象：

  const person = {
      firstName: "Jack",
      hello: function() {
          return "Hello " + this.firstName;
      }
  }
  console.log(person.hello()); // 输出 "Hello Jack"
  

  这里person发起了hello的调用，所以this就是person，能直接获取它的firstName属性。

• 用new关键字调用构造函数
  使用new创建实例时，this会自动指向新生成的实例对象：

  function Person(name) {
      this.firstName = name;
      this.sayHello = function() {
          return "Hello " + this.firstName;
      }
  }
  const jack = new Person("Jack");
  console.log(jack.sayHello()); // 输出 "Hello Jack"
  

  new操作会帮你把this绑定到刚创建的jack实例上。

• 用call/apply/bind手动绑定this
  这三个方法可以强制指定this的指向，不受调用场景影响：

  const person = { firstName: "Jack" };
  function hello() {
      return "Hello " + this.firstName;
  }
  console.log(hello.call(person)); // 输出 "Hello Jack"
  

  call直接把this绑定到person上，不管函数原本定义在哪里。

核心总结 #

别纠结函数定义在哪个对象里，只看函数被调用的那一刻，是谁「发起」了这个调用——那个发起者就是this的指向。如果没有明确的发起者（直接调用函数），this就默认指向全局对象（或严格模式下的undefined）。

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