深入理解 JavaScript 中的 this 指向

前言

正值春招火热招聘阶段，我近期在复习JavaScript的相关知识点，其中"this"知识点是前端面试中高频面试内容，因此整理和总结一篇相关知识点文章和大家分享！
在 JavaScript 中，this 是一个非常重要的关键字，它在函数和对象操作中扮演着关键角色。然而，this 的指向规则并不总是直观的，这让很多初学者感到困惑。本文将通过通俗易懂的方式，结合实际代码示例，帮助你彻底理解 this 的指向规则。

一、this的指向规则

this 的指向取决于函数的调用方式，而不是函数的定义方式。虽然"谁调用它，this 就指向谁 "这种说法有一定道理，但并不完全准确。以下是 this 指向的几种常见情况：

1. 全局环境中的this

在全局环境下调用函数时，this 的指向会根据是否开启严格模式而有所不同。

• 非严格模式 ：this 指向全局对象（浏览器中是 window，Node.js 中是 global）。

• 严格模式 ：this 指向 undefined。

function f1() {
    console.log(this);
}
​
function f2() {
    'use strict';
    console.log(this);
}
​
f1(); // 非严格模式：window 或 global
f2(); // 严格模式：undefined

2. 使用 new 调用构造函数

当使用 new 关键字调用函数时，this 会被绑定到新创建的对象上。

function Person(name) {
    this.name = name;
}
​
const person = new Person('Alice');
console.log(person.name); // 输出：Alice
console.log(person); // 输出：{ name: 'Alice' }

在这个例子中，this 指向了通过 new 创建的 person 对象。

3. 使用 call、apply、bind 显式绑定 this

call、apply 和 bind 是 JavaScript 中用来显式改变函数内部 this 指向的方法。

• call 和 apply ：立即执行函数，并将 this 绑定到指定对象。call 和 apply 的区别在于参数的传递方式：call 接收多个参数，apply 接收一个数组作为参数。

const obj = { name: 'Bob' };
​
function greet() {
    console.log(`Hello, ${this.name}!`);
}
​
greet.call(obj); // 输出：Hello, Bob!
greet.apply(obj); // 输出：Hello, Bob!

• bind：返回一个新函数，该函数的 this 指向被永久绑定到指定对象。

const greetBob = greet.bind(obj);
greetBob(); // 输出：Hello, Bob!

4. 通过上下文对象调用函数

当通过对象的方法调用函数时,this 指向该对象。

const student = {
    name: 'Alice',
    greet: function() {
        console.log(`Hello, ${this.name}!`);
    }
};
​
student.greet(); // 输出：Hello, Alice!

如果函数被赋值给其他变量后调用,this 的指向会丢失，恢复到全局对象。

const greet = student.greet;
greet(); // 输出：Hello, undefined!

5. 箭头函数中的this

箭头函数是 ES6 引入的一种简化语法，它的 this 指向在定义时就已经确定，始终指向外层作用域的 this。

const obj = {
    name: 'Alice',
    greet: () => {
        console.log(`Hello, ${this.name}!`);
    }
};
​
obj.greet(); // 输出：Hello, undefined!

在这个例子中，箭头函数的 this 指向全局对象，而不是obj。

二、更复杂的场景

1、事件处理中的 this

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

document.getElementById('button').addEventListener('click', function() {
    console.log(this); // 指向绑定事件的按钮元素
});

如果事件处理函数是一个箭头函数, this 的指向会继承自外层作用域。

const button = document.getElementById('button');
button.addEventListener('click', () => {
    console.log(this); // 指向全局对象（浏览器中是 window）
});

2、嵌套函数中的 this

在嵌套函数中,this 的指向可能会变得复杂。普通函数的 this 指向取决于调用方式，而箭头函数的this 指向则继承自外层作用域。

const obj = {
    name: 'Alice',
    greet: function() {
        const inner = () => {
            console.log(`Hello, ${this.name}!`);
        };
        inner();
    }
};
​
obj.greet(); // 输出：Hello, Alice!

在这个例子中，箭头函数 inner 的 this 继承自外层的 greet 函数的 this，指向 obj。

三、总结

this 的指向规则虽然复杂，但只要掌握以下要点，就可以轻松应对：

1. 全局环境 ：非严格模式下指向全局对象，严格模式下指向 undefined。

2. 构造函数 ：使用 new 时，this 指向新创建的对象。

3. 显式绑定 ：通过 call、apply、bind 可以显式改变 this 的指向。

4. 上下文对象 ：通过对象调用函数时，this 指向该对象。

5. 箭头函数 ：this 指向外层作用域。