JavaScript 中的 this 怎么调用

JavaScript 中的 this 关键字代表函数运行时的上下文对象，它的值取决于函数是如何被调用的、函数的调用位置以及调用形式。通常情况有全局调用、对象方法调用、构造函数调用和apply/call/bind方法调用。在全局作用域或者函数中，this 默认指向全局对象，如在浏览器中是 window。当作为对象的方法调用时，this 指向调用该方法的对象。而在构造函数中使用 new 关键字调用时，this 指向新创建的实例对象。apply、call 和 bind 是函数对象的方法，它们可以直接定义 this 的值。

一、全局与函数作用域中的 `this`

在全局作用域中，this 关键字指向全局对象，这意味着在浏览器中，this 会指向 window 对象。如果在严格模式下使用函数中的 this，则不会指向全局对象，而是保持 undefined，防止不小心修改全局对象。

在非严格模式下，独立函数调用（函数非作为某个对象的方法调用）中 this 同样会指向全局对象。这在某些情况下可能会引起混淆，因为如果开发者期望 this 绑定到特定的上下文而不是全局对象时，就可能会导致程序出错。

二、对象方法中的 `this`

当函数作为对象中的方法被调用时，this 指向该方法所属的对象。这是 this 使用最频繁也是最直观的一种场景。通过这种方式，方法能够访问调用它的对象的属性和其他方法。

const person = {
  name: 'Alice',
  greet: function() {
    console.log('Hi, my name is ' + this.name);
  }
};
person.greet(); // 'Hi, my name is Alice'

在上面的例子中，greet 方法中的 this 指向 person。

三、构造函数中的 `this`

当使用 new 关键字调用构造函数时，JavaScript 会创建一个新的对象，并将构造函数中的 this 绑定到这个新对象上。这允许我们在构造函数中为对象设定属性和方法。

function Person(name) {
  this.name = name;
  this.greet = function() {
    console.log('Hi, my name is ' + this.name);
  };
}
const user = new Person('Bob');
user.greet(); // 'Hi, my name is Bob'

在上面的例子中，this 在 greet 方法内指向的是通过 Person 构造器创建的 user 对象。

四、`apply`/`call`/`bind` 方法调用

apply、call 和 bind 是 Function.prototype 上的方法，它们可以用来改变函数调用时 this 的绑定对象。

call 方法允许为不同的对象分配和调用属于一个对象的函数/方法。除了在特定的 this 值上调用该函数之外，还可以传入一系列单个参数。

function greet() {
  console.log('Hello, ' + this.name);
}
const person1 = { name: 'John' };
greet.call(person1); // 'Hello, John'

apply 方法的作用与 call 相似，不同之处在于你可以将参数作为数组传递。

function introduce(occupation, age) {
  console.log('My name is ' + this.name + ', I am a ' + occupation + ', and I am ' + age + ' years old.');
}
const person = { name: 'Michael' };
introduce.apply(person, ['Developer', 30]); // 'My name is Michael, I am a Developer, and I am 30 years old.'

bind 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

const person = {
  name: 'Karen',
  greet: function() {
    console.log('Hello, my name is ' + this.name);
  }
};
const greetKaren = person.greet.bind(person);
greetKaren(); // 'Hello, my name is Karen'

通过使用 apply、call 和 bind，我们可以控制 this 的绑定过程，使得函数可以在不同的对象上下文中重复使用。这在回调函数和事件处理函数中特别有用，那时你可能希望 this 明确指向某个特定的对象。

五、箭头函数中的 `this`

箭头函数与常规函数的一个关键区别是，箭头函数不会创建自己的 this 上下文，而是捕获其所在上下文的 this 值作为自己的 this 值。这意味着在箭头函数内部使用 this 时，它与封闭词法上下文的 this 值相同。

这种特性使得箭头函数成为处理事件监听器和回调函数的理想选择，因为你无需担心 this 绑定问题。

const person = {
  name: 'Emma',
  actions: ['smile', 'wave', 'jump'],
  showActions() {
    this.actions.forEach(action => {
      console.log(this.name + ' is ' + action);
    });
  }
};
person.showActions();
// 'Emma is smile'
// 'Emma is wave'
// 'Emma is jump'

在 showActions 方法中，forEach 方法的回调函数是一个箭头函数，它不会创建自己的 this 上下文，因此 this.name 正确指向 person 对象中的 name 属性。

六、总结与实践建议

理解和正确使用 this 对于掌握 JavaScript 非常关键。它本质上是一个指向函数执行上下文的指针，可以是全局环境、当前对象、构造函数生成的实例或 apply/call/bind 明确指定的上下文。要准确预测 this 的值，需要关注函数是如何被调用的。在实际应用中，开发者应当充分了解每种调用方式和场景，以确保代码的正确性和可预测性。ARROW FUNCTIONS 和 CONSTRUCTOR FUNCTION 示例如上，展示了不同语境下处理 this 的方式。

最后，当 this 的行为不符合预期时，首先应检查函数的调用方式。如果函数需要在不同的上下文中工作，可以使用 apply、call或 bind 来显式绑定 this。箭头函数对于那些需要继承上下文中的 this 值的情况非常有帮助。在编写和维护代码时，了解和正确使用 this 绑定会让工作更加顺利。