this 到底是指向哪里？

2024-02-17 12:09:16

对于我们 web 前端开发工程师而言，this 算是 JS 中最复杂的机制之一了，很多时候我们明明觉得，我已经理解了这个，但是实际用来的时候，还是有时候不明白这个 this 到底指向哪里。今天我们就来捋一捋，希望能对你有帮助。

JavaScript 中的 this 关键字是一个非常重要的概念，也是一个非常容易混淆的概念。this 的值在不同的情况下可能是不同的，这取决于它的上下文。在本文中，我们将深入探讨 this 关键字，帮助您理解 this 到底指向哪里，以及如何灵活运用 this 来构建更加健壮、可维护的代码。

this 的值取决于它的上下文，一般来说，this 的值可以是以下几种情况：

当 this 出现在一个对象的方法中时，this 的值就是该对象。
当 this 出现在一个函数中时，this 的值就是该函数所属的对象。
当 this 出现在一个全局作用域中时，this 的值就是 window 对象。

当然，还有一些特殊的情况，例如箭头函数中没有 this，this 的值就是上一级作用域的 this。

理解了 this 的值是如何确定的之后，我们就可以灵活运用 this 来构建更加健壮、可维护的代码了。例如，我们可以使用 this 来实现对象的链式调用，也可以使用 this 来实现函数的柯里化。

对象的链式调用

对象的链式调用是一种非常常用的编程技巧，它可以使代码更加简洁、易读。例如，我们可以使用以下代码来实现对象的链式调用：

const user = {
  name: 'John Doe',
  age: 30,
  occupation: 'Software Engineer',
};

user.getName = function() {
  return this.name;
};

user.getAge = function() {
  return this.age;
};

user.getOccupation = function() {
  return this.occupation;
};

console.log(user.getName()); // John Doe
console.log(user.getAge()); // 30
console.log(user.getOccupation()); // Software Engineer

在上面的代码中，我们首先定义了一个 user 对象，然后为 user 对象添加了三个方法：getName、getAge 和 getOccupation。这三个方法都使用了 this 关键字来访问 user 对象的属性。这样，我们就可以使用链式调用的方式来访问 user 对象的属性，使代码更加简洁、易读。

函数的柯里化

函数的柯里化是一种将函数分解成一系列更小的函数的技巧。柯里化后的函数可以更加灵活地使用，也可以更容易地测试。例如，我们可以使用以下代码来实现函数的柯里化：

const add = (a, b) => a + b;

const add10 = curry(add)(10);

console.log(add10(20)); // 30

在上面的代码中，我们首先定义了一个 add 函数，然后使用 curry 函数对 add 函数进行柯里化，得到了一个新的函数 add10。add10 函数的参数是 10，因此我们可以直接将 add10 函数的参数传递给 add 函数，得到结果。这样，我们就可以使用柯里化的方式来创建新的函数，使代码更加灵活、易读。