深入理解 JavaScript 中的 this：不再困惑！

原创已于 2025-01-23 14:18:05 修改

· 395 阅读

6 ·

版权

文章标签：

#javascript #开发语言 #ecmascript

于 2025-01-23 14:11:41 首次发布

在 JavaScript 的学习过程中，`this` 是一个让人又爱又恨的关键字。它既强大又灵活，但同时也容易让人感到困惑。很多人在初学时会问：“`this` 到底指向什么？”其实，`this` 的值并不是在函数定义时决定的，而是在函数执行时动态绑定的。理解这一点，是掌握 `this` 的关键。

1. `this` 的基本概念

this 是一个指针，它指向调用当前函数的对象，而不是函数本身。它的值完全取决于函数的调用方式，而不是定义方式。换句话说，this 的指向是在运行时决定的，而不是编写代码时决定的。

中文含义

this 的中文意思是“这个”，它表示当前正在执行的上下文对象。

2. `this` 的常见用法

2.1 全局上下文中的 `this`

在全局上下文中，this 指向全局对象。在浏览器中，全局对象是 window。

console.log(this); // 在浏览器中，指向 window 对象

如果在严格模式下（strict mode），全局上下文中的 this 会是 undefined。

2.2 对象方法中的 `this`

当函数作为对象的方法被调用时，this 指向调用该方法的对象。

const person = {
  name: 'Alice',
  sayHello: function() {
    console.log(this.name); // this 指向 person 对象
  }
};

person.sayHello(); // 输出：Alice

在这个例子中，sayHello 方法中的 this 指向了 person 对象。

2.3 构造函数中的 `this`

当函数作为构造函数被调用（通过 new 关键字），this 指向新创建的对象。

function Person(name) {
  this.name = name; // this 指向新创建的对象
}

const alice = new Person('Alice');
console.log(alice.name); // 输出：Alice

2.4 箭头函数中的 `this`

箭头函数没有自己的 this，它会捕获其定义时的上下文中的 this 值。

const person = {
  name: 'Alice',
  sayHello: function() {
    const arrowFunc = () => {
      console.log(this.name); // this 指向 person 对象
    };
    arrowFunc();
  }
};

person.sayHello(); // 输出：Alice

箭头函数的 this 是从其定义时的上下文继承的，而不是从调用方式决定的。

2.5 显式绑定中的 `this`

通过 call、apply 和 bind 方法可以显式地指定函数的 this 值。

call 方法：调用函数，并显式指定 this 值。

const person = {
  name: 'Alice'
};

function sayHello() {
  console.log(this.name);
}

sayHello.call(person); // 输出：Alice

apply 方法：与 call 类似，但参数以数组形式传入。

sayHello.apply(person); // 输出：Alice

bind 方法：返回一个新函数，并绑定指定的 this 值。

const boundSayHello = sayHello.bind(person);
boundSayHello(); // 输出：Alice

2.6 事件处理函数中的 `this`

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

<body>
    <button>click me</button>
    <script>
        // 选择按钮这个属性 ，监听点击事件 ，点击之后打印this
        const button = document.querySelector('button');
        button.addEventListener('click', function () {
            console.log(this); // this 指向 button 元素
        });
    </script>
</body>