this在JS中究竟指向哪儿？巧妙掌握技巧，助你轻松理解！

前端

2023-09-12 15:46:50

this是JavaScript中最令人困惑的概念之一，也是经常被误解的概念之一。在本文中，我们将深入探讨this的含义，以及如何确定它在任何给定时刻指向的内容。

this是什么？

this是指向当前执行代码的对象的引用。它可以是全局对象（即window对象）、函数对象或对象本身。

如何确定this的指向？

确定this指向的内容的最佳方法是考虑代码在执行时所处的上下文。

全局上下文

在全局上下文中，this指向全局对象（即window对象）。这是因为没有其他对象可以作为上下文。

// 全局上下文
console.log(this); // 输出: Window {...}

函数上下文

在函数上下文中，this指向函数所属的对象。如果函数是作为某个对象的方法被调用的，那么this将指向那个对象。如果函数是作为独立函数被调用的，那么this将指向全局对象。

// 函数上下文
const person = {
  name: 'John Doe',
  greet: function() {
    console.log(this.name); // 输出: "John Doe"
  }
};

person.greet(); // 输出: "John Doe"

const greet = function() {
  console.log(this.name); // 输出: undefined
};

greet(); // 输出: undefined

对象上下文

在对象上下文中，this指向对象本身。这是因为对象是作为自己的上下文执行代码的。

// 对象上下文
const person = {
  name: 'John Doe',
  greet: function() {
    console.log(this.name); // 输出: "John Doe"
  }
};

person.greet(); // 输出: "John Doe"

箭头函数上下文

箭头函数没有自己的this。相反，它们继承其父级函数的this。这使得箭头函数非常适合在需要使用this的回调函数中使用。

// 箭头函数上下文
const person = {
  name: 'John Doe',
  greet: function() {
    console.log(this.name); // 输出: "John Doe"

    const arrowGreet = () => {
      console.log(this.name); // 输出: "John Doe"
    };

    arrowGreet();
  }
};

person.greet(); // 输出: "John Doe" "John Doe"

常见问题

如何在箭头函数中使用this？

在箭头函数中，this继承其父级函数的this。这意味着您可以通过在箭头函数中调用父级函数的this来使用this。

// 如何在箭头函数中使用this
const person = {
  name: 'John Doe',
  greet: function() {
    console.log(this.name); // 输出: "John Doe"

    const arrowGreet = () => {
      const that = this; // 保存父级函数的this

      setTimeout(function() {
        console.log(that.name); // 输出: "John Doe"
      }, 1000);
    };

    arrowGreet();
  }
};

person.greet(); // 输出: "John Doe" "John Doe"

如何在回调函数中使用this？

在回调函数中，this通常指向全局对象。但是，您可以使用bind()方法来显式地将this绑定到另一个对象。

// 如何在回调函数中使用this
const person = {
  name: 'John Doe',
  greet: function() {
    console.log(this.name); // 输出: "John Doe"

    setTimeout(function() {
      console.log(this.name); // 输出: undefined
    }, 1000);

    setTimeout(this.greet.bind(this), 1000); // 输出: "John Doe"
  }
};

person.greet(); // 输出: "John Doe" "undefined" "John Doe"