今天，彻底搞懂 JS 中的 this !

Photo by Vadim Bogulov on Unsplash

前端开发这么久，还是不懂 this ? 今天，彻底搞懂！

JavaScript 中的 this 是一个动态绑定的关键字，它的值由 函数调用方式 和 执行上下文 共同决定。下面我会通过分类、示例和核心规则，帮助你彻底理解 this 的各种场景。

---

一、核心规则：this 的绑定机制

this 的值在函数被调用时确定，而非定义时。以下是 this 的 5 种绑定规则：

规则	场景示例	this 指向	优先级
默认绑定	独立函数调用	全局对象（严格模式为 undefined）	最低
隐式绑定	作为对象方法调用	调用该方法的对象	中
显式绑定	使用 call/apply/bind	手动指定的对象	高
new 绑定	构造函数调用	新创建的实例对象	最高
箭头函数	箭头函数	外层作用域的 this（词法绑定）	不适用

---

二、普通函数中的 this

1. 默认绑定（独立调用）

function showThis() {
  console.log(this);
}

showThis(); // 浏览器中输出 window（非严格模式）
            // 严格模式（"use strict"）下输出 undefined

2. 隐式绑定（作为对象方法调用）

const obj = {
  name: "Alice",
  sayName() {
    console.log(this.name); // this 指向 obj
  },
};

obj.sayName(); // "Alice"

3. 隐式丢失问题

当方法被赋值给变量或作为回调时，this 可能丢失：

const say = obj.sayName;
say(); // 输出 undefined（this 指向全局对象）

setTimeout(obj.sayName, 100); // 输出 undefined（this 指向全局对象）

---

三、箭头函数中的 this

箭头函数 没有自己的 this ，它会 继承外层作用域（定义时的上下文）的 this。

1. 基本示例

const obj = {
  name: "Bob",
  sayName: () => {
    console.log(this.name); // this 继承外层作用域（此处为全局对象）
  },
};

obj.sayName(); // 输出 undefined（浏览器中全局 name 不存在）

2. 在普通函数内部的箭头函数

function outer() {
  const innerArrow = () => {
    console.log(this); // 继承 outer 的 this
  };
  innerArrow();
}

outer.call({ name: "Alice" }); // 输出 { name: "Alice" }
outer(); // this 指向全局对象

const obj = {
  name: 'will',
  test: outer
}

obj.test(); // this 指向 obj

---

四、显式绑定：call/apply/bind

手动指定 this 的值：

function greet() {
  console.log(`Hello, ${this.name}`);
}

const alice = { name: "Alice" };
const bob = { name: "Bob" };

// 临时绑定
greet.call(alice);    // "Hello, Alice"
greet.apply(bob);     // "Hello, Bob"

// 永久绑定（返回新函数）
const greetAlice = greet.bind(alice);
greetAlice();         // "Hello, Alice"

---

五、构造函数中的 this

通过 new 调用构造函数时，this 指向新创建的实例：

function Person(name) {
  this.name = name;
}

const alice = new Person("Alice");
console.log(alice.name); // "Alice"

---

六、事件监听器中的 this

在 DOM 事件处理函数中，this 指向触发事件的元素：

document.querySelector("button").addEventListener("click", function() {
  console.log(this); // 输出按钮元素
});

---

七、严格模式下的 this

严格模式（"use strict"）下，独立调用的函数 this 为 undefined：

"use strict";
function strictThis() {
  console.log(this); // undefined
}
strictThis();

---

八、嵌套函数中的 this

1. 普通函数嵌套

const obj = {
  name: "Alice",
  outer() {
    function inner() {
      console.log(this); // 默认绑定，指向全局对象
    }
    inner();
  },
};

obj.outer(); // 输出 window（非严格模式）

2. 箭头函数嵌套解决 this 丢失

const obj = {
  name: "Alice",
  outer() {
    const inner = () => {
      console.log(this); // 继承 outer 的 this（指向 obj）
    };
    inner();
  },
};

obj.outer(); // 输出 obj

---

九、总结：this 的决策流程图

判断函数类型 → 是否是箭头函数？
  ├─ 是 → 继承外层作用域的 `this`
  └─ 否 → 判断调用方式：
           ├─ new 调用 → 指向新实例
           ├─ call/apply/bind → 指向指定对象
           ├─ 对象方法调用 → 指向该对象
           └─ 独立调用 → 严格模式为 undefined，否则全局对象

---

十、常见误区与解决方案

1. 回调函数中的 this 丢失

   使用箭头函数或显式绑定：

   setTimeout(() => obj.sayName(), 100); // 箭头函数继承外层 this
   setTimeout(obj.sayName.bind(obj), 100); // 显式绑定

2. 对象方法赋值后 this 丢失

   使用箭头函数或在构造函数中绑定：

   class MyClass {
     constructor() {
       this.method = this.method.bind(this);
     }
     method() { /* ... */ }
   }

---

通过以上分类和示例，你应该能全面掌握 JavaScript 中 this 的行为规律。记住：this 的值由调用方式决定，箭头函数是唯一的例外（词法绑定）。