JavaScript基础教程（四十五）this 关键字：揭秘JavaScript this，你的代码在暗指谁？-优快云博客

本文深度剖析JavaScript中令人困惑的this关键字，通过生动示例解析其绑定规则与常见陷阱，带你彻底掌握this的指向奥秘，写出更加清晰可靠的代码。

this绑定五大规则

1. 默认绑定
当函数独立调用时，this指向全局对象（浏览器中为window）

function showThis() {
  console.log(this);
}
showThis(); // Window对象（非严格模式）

2. 隐式绑定
当函数作为对象方法调用时，this指向调用该方法的对象

const user = {
  name: '小明',
  greet() {
    console.log(`你好，我是${this.name}`);
  }
};
user.greet(); // "你好，我是小明"

3. 显式绑定
使用call、apply或bind方法明确指定this值

function introduce(lang) {
  console.log(`我会${lang}，我是${this.name}`);
}

const person = { name: '小红' };
introduce.call(person, 'JavaScript'); // "我会JavaScript，我是小红"

4. new绑定
使用new调用构造函数时，this指向新创建的对象实例

function Person(name) {
  this.name = name;
}
const john = new Person('John');
console.log(john.name); // "John"

5. 箭头函数
箭头函数不绑定自己的this，继承外层作用域的this值

const counter = {
  count: 0,
  increment: function() {
    setInterval(() => {
      this.count++;
      console.log(this.count);
    }, 1000);
  }
};
counter.increment(); // 每秒正确计数（箭头函数保持this指向counter）

常见陷阱与解决方案

丢失this绑定问题

const user = {
  name: '张三',
  getUserName: function() {
    return this.name;
  }
};

// 常见陷阱：方法赋值给变量
const getName = user.getUserName;
console.log(getName()); // undefined（this指向全局）

// 解决方案：使用bind绑定
const boundGetName = user.getUserName.bind(user);
console.log(boundGetName()); // "张三"

掌握this的绑定规则是JavaScript开发者的必备技能，理解不同场景下的this指向，能够帮助您写出更加健壮和可维护的代码。