JavaScript 之中如何正确理解 this

JavaScript 之中 this 的理解并不能一概而论，应该根据不同的函数类型和调用方式来分析。

文章将围绕 JavaScript this 来进行讨论。相信看完这篇文章，你将对 JavaScript this 有一个全新的认识。

this 指向函数自身

存在这个误解可能是因为在 JavaScript 中既然函数是一个对象，那么就可以在这个函数对象上通过 key/value 的形式存储某些值，比如下面：

function func() {
  this.a = 1;
}

const obj = new func();

console.log(obj.a); // 1

从上面的代码来看，this 确实指向了函数自身，因为在函数 func 中，this 被赋值为 1，而在 obj 对象上访问 this.a 属性时，就能够获取到这个值。

但是，需要注意的是，这种情况下，this 并不是指向函数本身，而是指向了一个新的对象，这个对象是通过 new 创建的。

this 指向调用它的对象

当一个函数被一个对象调用时，this 就指向这个对象。例如：

const obj = {
  a: 1,
  func: function() {
    console.log(this.a); // 1
  }
};

obj.func();

在这个例子中，当 obj.func() 被调用时，this 就指向了 obj 对象，因此在 func 函数中访问 this.a 属性时，就能够获取到 obj 对象的 a 属性值。

this 指向 window 对象

当一个函数在全局作用域中被调用时，this 就指向 window 对象。例如：

function func() {
  console.log(this.location); // "https://example.com"
}

func();

在这个例子中，当 func() 函数在全局作用域中被调用时，this 就指向了 window 对象，因此在 func 函数中访问 this.location 属性时，就能够获取到 window 对象的 location 属性值。

箭头函数的 this

箭头函数没有自己的 this，它继承外层函数的 this。例如：

const obj = {
  a: 1,
  func: () => {
    console.log(this.a); // undefined
  }
};

obj.func();

在这个例子中，当 obj.func() 被调用时，this 指向 obj 对象，因此在 func 函数中访问 this.a 属性时，就会获取到 obj 对象的 a 属性值。

但是，如果把 func 函数改写成箭头函数，如下所示：

const obj = {
  a: 1,
  func: () => {
    console.log(this.a); // undefined
  }
};

obj.func();

那么，this 就不会指向 obj 对象了，而是指向 window 对象。这是因为箭头函数没有自己的 this，它继承外层函数的 this。而在 obj 对象中，外层函数是全局函数，因此 this 就指向 window 对象了。

构造函数的 this

当一个构造函数被调用时，this 就指向一个新创建的对象。例如：

function Person(name) {
  this.name = name;
}

const person = new Person('John');

console.log(person.name); // "John"

在这个例子中，当 new Person('John') 被调用时，this 就指向了一个新创建的对象，这个对象是通过 Person 构造函数创建的。因此，在 Person 构造函数中访问 this.name 属性时，就能够获取到这个新创建的对象的 name 属性值。

类的 this

在类中，this 的指向与构造函数相同，都指向一个新创建的对象。例如：

class Person {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

const person = new Person('John');

console.log(person.getName()); // "John"

在这个例子中，当 new Person('John') 被调用时，this 就指向了一个新创建的对象，这个对象是通过 Person 类创建的。因此，在 Person 类中访问 this.name 属性时，就能够获取到这个新创建的对象的 name 属性值。

总结

this 在 JavaScript 中是一个非常重要的概念，它可以指向不同的对象，具体取决于函数的类型和调用方式。

希望通过这篇文章，你能够对 JavaScript this 有一个全新的认识。