var this 在 JavaScript 中的用法212

简介

在 JavaScript 中，`this` 是一个特殊关键字，它表示当前执行代码的上下文对象。换句话说，`this` 指向当前正在执行代码的作用域中的对象。

作用域

`this` 的值根据代码执行的上下文而变化。在全局作用域中，`this` 等于 `window` 对象。在函数的作用域中，`this` 等于调用函数的对象。在对象的方法中，`this` 等于该对象本身。

全局作用域

在全局作用域中，`this` 等于 `window` 对象。例如：```javascript
(this); // 输出：Window {...}
```

函数作用域

在函数的作用域中，`this` 等于调用函数的对象。例如：```javascript
function foo() {
(this); // 输出：Window {...}
}
foo(); // 调用函数时，`this` 等于全局对象（`window`）
```

如果函数是作为某个对象的方法调用的，那么 `this` 等于该对象。例如：```javascript
const obj = {
foo: function() {
(this); // 输出：{ foo: [Function: foo] }
}
};
(); // 调用方法时，`this` 等于调用方法的对象（`obj`）
```

对象方法

在对象的方法中，`this` 等于该对象本身。例如：```javascript
const obj = {
name: "John Doe",
greet: function() {
(`Hello, ${}!`); // 输出：Hello, John Doe!
}
};
(); // 调用方法时，`this` 等于调用方法的对象（`obj`）
```

箭头函数

箭头函数 (`=>`) 不绑定自己的 `this` 值。它们继承了其外层函数的 `this` 值。例如：```javascript
const obj = {
name: "John Doe",
greet: () => {
(`Hello, ${}!`); // 输出：Hello, undefined!
}
};
(); // 调用箭头函数时，`this` 等于调用箭头函数的函数（``）的 `this` 值，而 `` 的 `this` 值是全局对象（`window`），因此 `` 为 `undefined`
```

绑定 `this`

有时，我们需要确保 `this` 在特定上下文中具有特定值。我们可以使用以下方法绑定 `this`：
使用 `bind()` 方法： `bind()` 方法返回一个新函数，其中 `this` 值被绑定到指定的上下文。例如：

```javascript
const obj = {
name: "John Doe",
greet: function() {
(`Hello, ${}!`);
}
};
const boundGreet = (obj);
boundGreet(); // 调用绑定后的函数时，`this` 等于 `obj`
```

使用箭头函数：箭头函数不绑定自己的 `this` 值，它们继承了其外层函数的 `this` 值。因此，我们可以将箭头函数作为外层函数的方法内的一个匿名函数来使用，从而绑定 `this`。例如：

```javascript
const obj = {
name: "John Doe",
greet: function() {
setTimeout(() => {
(`Hello, ${}!`); // 输出：Hello, John Doe!
}, 1000);
}
};
(); // 调用方法时，箭头函数继承了 `this` 值，因此 `` 等于 `John Doe`
```