告别this输出困惑，拥抱清晰编程！

前端

2023-12-01 08:05:32

让我们揭开“this”的神秘面纱，探索代码输出的奥秘！

“this”在JavaScript中扮演着重要角色，它代表着当前执行上下文的执行对象。这听起来有些抽象，对吧？别担心，我会用更通俗的语言来解释。

首先，想象“this”是一个特殊的变量，指向当前正在运行的代码块。在 JavaScript 中，当我们定义一个函数时，它就会创建一个新的执行上下文，而“this”的值就是该执行上下文中的对象。

现在，让我们深入了解一些具体的使用场景。

在对象方法中使用“this”

当你在对象的方法中使用“this”，它将指向该对象。例如：
```
const person = {
  name: "John Doe",
  greet: function () {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

person.greet(); // 输出: Hello, my name is John Doe.
```
在这个例子中，“this”指向 person 对象，因此我们可以访问其属性 name。
在独立函数中使用“this”

在独立函数中，“this”的值取决于函数的调用方式。当使用标准函数调用时，“this”将指向全局对象，而在使用箭头函数调用时，“this”将指向函数定义时的执行上下文。

例如：
```
function greet() {
  console.log(`Hello, my name is ${this.name}.`);
}

greet(); // 输出: Hello, my name is undefined.

const person = {
  name: "Jane Doe",
};

greet.call(person); // 输出: Hello, my name is Jane Doe.

const arrowGreet = () => {
  console.log(`Hello, my name is ${this.name}.`);
};

arrowGreet(); // 输出: Hello, my name is Jane Doe.
```
在第一个例子中，“this”指向全局对象，因为 greet() 是使用标准函数调用。在第二个例子中，“this”指向 person 对象，因为我们使用 call() 方法来调用 greet()，并明确指定 person 为 this 的值。在第三个例子中，“this”指向 person 对象，因为 arrowGreet 是一个箭头函数，它继承了定义时的执行上下文。
使用bind()方法绑定“this”

有时候，我们希望在特定对象上调用一个函数，即使该函数不是该对象的成员方法。这时候，我们可以使用bind()方法。bind()方法会创建一个新的函数，该函数的 this 值被绑定到指定的对象上。

例如：
```
const person = {
  name: "John Doe",
};

const greet = function () {
  console.log(`Hello, my name is ${this.name}.`);
};

const boundGreet = greet.bind(person);

boundGreet(); // 输出: Hello, my name is John Doe.
```
在上面的例子中，我们使用bind()方法将greet()函数绑定到person对象上，创建了一个新的函数boundGreet()。当我们调用boundGreet()时，this将指向person对象，因此我们可以访问其属性name。