理解JavaScript中this指向及其运用场景

我正在参加「掘金·启航计划」

前言

文章更偏向于基础一点的东西，所以比较枯燥，可能会出现错别字或者错误的结论，希望小伙伴积极指出，我会第一时间修改，以防造成误解。感谢大家~

在JavaScript中，this的值取决于它在代码中的上下文。this的值可能是全局对象、函数的调用者或对象本身。以下是一些常见的用法和指向：

全局对象

当JavaScript代码在全局作用域中执行时，this指向全局对象，通常是浏览器中的window对象，或者在Node.js中的global对象。例如：

console.log(this === window); // true (in a browser)
console.log(this === global); // true (in Node.js)

函数调用者

当函数作为对象的方法调用时，this指向调用该函数的对象。例如：

const obj = {
  name: 'Jane',
  getName() {
    console.log(this.name);
  }
};

obj.getName(); // 'Jane'

在上面的例子中，this指向obj对象，因为getName()是obj对象的方法。

构造函数

当使用构造函数创建新对象时，this指向新创建的对象。例如：

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

const person = new Person('John', 30);
console.log(person.name); // 'John'

在上面的例子中，this指向新创建的Person对象，将name和age属性添加到该对象中。

通过apply()和call()方法来指定this的值

apply()和call()方法可以调用函数并指定this的值。例如：

const obj1 = { name: 'Alice' };
const obj2 = { name: 'Bob' };

function sayName() {
  console.log(this.name);
}

sayName.call(obj1); // 'Alice'
sayName.call(obj2); // 'Bob'

在上面的例子中，通过使用call()方法来调用sayName()函数，并将obj1和obj2作为this的值。

箭头函数

在箭头函数中，this 的值由包含箭头函数的最近的非箭头函数作用域决定，而不是由函数被调用时的调用者所决定。具体来说，箭头函数中的 this 始终指向箭头函数定义时所处的上下文。

const person = {
  name: 'John',
  sayName: function() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};

person.sayName(); // 'John' (after 1 second)

在上面的例子中，箭头函数被用作setTimeout()函数的回调函数。尽管setTimeout()函数是在全局作用域中调用的，但由于箭头函数中的this取决于它定义时的上下文，因此它可以正确地引用person对象中的name属性。

其他

需要注意的是，当在严格模式下使用时，this的值不会默认指向全局对象，它的值将保持undefined。