深入浅出聊一聊js中的’this’关键字

当我们在写 JavaScript 代码时，经常会遇到在当前函数作用域内使用 this 关键字的情况。但是，this 关键字在不同的环境下，它所代表的对象不尽相同。在这里，我们将深入浅出的聊一聊 JavaScript 中的 this 关键字，解释它在不同情况下的行为，并提供一些示例说明。

什么是 this 关键字

在 JavaScript 中，this 关键字是一个指向对象的引用，它代表当前函数执行时的上下文环境。

在全局作用域下，this 关键字表示当前 window 或 global 对象。而在函数中，它代表调用该函数的对象。

this 的指向

当我们在实际开发中使用 this 关键字时，它可能会指向不同的对象，这会导致我们的程序出现错误。因此，我们必须清楚 this 的指向，才能正确地使用它。

指向全局对象

如果函数在全局作用域下调用，那么 this 关键字就指向全局对象 window 或 global。

console.log(this === window); // true

function test() {
  console.log(this === window); // true
}

test();

指向调用它的对象

当函数被对象调用时，this 指向调用这个函数的对象。

const user = {
  firstname: 'John',
  lastname: 'Doe',
  greet: function() {
    console.log(`Hello, ${this.firstname} ${this.lastname}!`);
  }
}

user.greet(); // 输出 "Hello, John Doe!"

使用 call 或 apply 方法指定 this 指向

JavaScript 中的 call 和 apply 方法可以让我们在调用函数时指定 this 指向。

const person1 = {
  firstname: 'John',
  lastname: 'Doe',
  greet: function() {
    console.log(`Hello, ${this.firstname} ${this.lastname}!`);
  }
}

const person2 = {
  firstname: 'Jane',
  lastname: 'Doe',
}

person1.greet.call(person2); // 输出 "Hello, Jane Doe!"
person1.greet.apply(person2); // 输出 "Hello, Jane Doe!"

箭头函数中的 this

在箭头函数中，this 指向的是它所在上下文中的 this，而不是调用它的对象。

const user = {
  firstname: 'John',
  lastname: 'Doe',
  greet: function() {
    const message = `Hello, ${this.firstname} ${this.lastname}!`;
    const sayHello = () => console.log(message);
    sayHello();
  }
}

user.greet(); // 输出 "Hello, John Doe!"

在上面的例子中，sayHello 函数是一个箭头函数，它的上下文是 user.greet 函数的上下文，因此 this 指向 user。

总结

在 JavaScript 中，this 关键字代表当前函数执行的上下文环境。它的实际指向取决于函数在哪个作用域下被调用。如果函数在全局作用域下调用，this 指向全局对象 window 或 global。而当函数被对象调用时，this 指向调用这个函数的对象。通过调用 call 或 apply 方法，我们可以手动指定函数的 this 指向。在箭头函数中，this 指向的是它所在上下文中的 this，而不是调用它的对象。