深入探究JavaScript中的this，掌握this的正确用法

前端

2023-11-14 12:53:04

JavaScript中的this

JavaScript中的this是一个指向当前执行上下文的引用。它可以是对象、函数或全局对象。this的值在函数执行时确定，并且可以在函数内部使用。

对this的常见误解

this总是指向函数被调用的对象

事实并非如此。this的值由函数的执行上下文决定，而执行上下文又由函数的调用方式决定。例如，如果一个函数被作为对象的方法调用，那么this将指向该对象。如果一个函数被作为独立函数调用，那么this将指向全局对象。
this可以在函数内部被重新赋值

事实并非如此。this的值在函数执行时确定，并且不能在函数内部被重新赋值。
箭头函数没有this关键字

事实并非如此。箭头函数也有this关键字，但是它的this值与普通函数不同。箭头函数的this值由其外层函数的this值决定。

this的绑定规则

this的绑定规则如下：

默认绑定

如果一个函数被作为独立函数调用，那么this将指向全局对象。
隐式绑定

如果一个函数被作为对象的方法调用，那么this将指向该对象。
显式绑定

可以使用call()、apply()或bind()方法来显式地绑定this的值。

箭头函数中的this

箭头函数的this值由其外层函数的this值决定。这意味着箭头函数不能改变this的值。这在某些情况下非常有用，例如，当你想在一个嵌套函数中使用this时。

工作场景中的this

在实际工作场景中，我们可能会遇到各种各样的this问题。例如：

在一个对象的方法中，this指向该对象

const person = {
  name: 'John',
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

person.greet(); // Hello, my name is John.

在一个独立函数中，this指向全局对象

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

greet(); // Hello, my name is undefined.

在一个嵌套函数中，this指向外层函数的this

const person = {
  name: 'John',
  greet() {
    function innerGreet() {
      console.log(`Hello, my name is ${this.name}.`);
    }

    innerGreet(); // Hello, my name is John.
  },
};

person.greet();