JavaScript 的 this 关键字怎么引用

JavaScript 的 this 关键字通常用来引用调用函数的当前执行上下文，这可能是全局环境、一个对象、或者其他特定情况下的函数执行环境。具体取决于函数是如何被调用的。在全局执行环境中，this 指向全局对象；在对象方法中调用时，this 指向调用方法的对象；在严格模式（'use strict'）下，未指定上下文的函数调用中，this 的值会是 undefined。另外，在箭头函数中，this 被词法地绑定，即它使用外围作用域中的 this 值。

在事件处理器中，this 引用触发事件的元素，这是理解和运用 this 的一个典型例子。比如，在一个按钮点击事件中，this 将指向被点击的按钮元素。这样的特性常用于在事件回调中访问与事件相关联的 HTML 元素的信息和属性。

一、全局上下文中的 THIS

在全局上下文中，不在任何函数内部调用时，this 指的是全局对象。在浏览器中，全局对象是 window，而在 Node.js 环境中，它是 global。因此，在全局作用域声明的任何变量或者函数，实际上都是全局对象的一个属性。

console.log(this === window); // 在浏览器中输出 true

this.a = 37;
console.log(window.a); // 输出 37

二、函数上下文中的 THIS

在函数内部，this 的值取决于函数的调用方式。若直接调用一个未绑定 this 的常规函数，如直接调用函数 myFunction()，那么在非严格模式下其内的 this 将指向全局对象，而在严格模式下 this 值将是 undefined。

function myFunction() {

  console.log(this);
}
myFunction(); // 在非严格模式下输出全局对象，在严格模式下输出 undefined

但在对象上下文中，当函数作为对象的方法被调用时，this 会指向调用该函数的对象。

三、对象方法中的 THIS

在 JavaScript 中，函数也是对象，所以函数能够作为其他对象的属性。当函数作为一个对象的方法被调用时，其内的 this 将会指向那个对象。

var obj = {

  prop: 37,
  func: function() {
    return this.prop;
  }
};
console.log(obj.func()); // 输出 37，this 指向 obj

然而，这种情况并不总是很直观，尤其是当一个方法内部有回调函数时，常见的问题是内部函数中的 this 不再指向外层的对象。

四、构造函数中的 THIS

在一个函数用作构造器（或者说用 new 关键字调用）时，this 指向一个全新的对象。这个新建的对象继承自构造函数的 prototype 属性。

function C(){

  this.a = 37;
}
var o = new C();
console.log(o.a); // 输出 37

五、箭头函数中的 THIS

ES6 引入的箭头函数有一个显著特点，就是它们不绑定自己的 this 值。箭头函数内部的 this 值等同于它们被创建时外围函数的 this 值，如果没有外围函数，则是全局对象。

var globalObject = this;

var foo = (() => this);
console.log(foo() === globalObject); // 输出 true

箭头函数适用于需要保留上下文 this 时使用，如回调函数等场景。

六、通过 APPLY、CALL 和 BIND 改变 THIS

在 JavaScript 中，你可以使用 apply、call 和 bind 方法来显式地设定函数的 this 指向。

function add(c, d){

  return this.a + this.b + c + d;
}
var o = {a: 1, b: 3};
// apply 需要将参数放在数组里
console.log(add.apply(o, [2, 4])); // 输出 10
// call 则可以直接传递参数列表
console.log(add.call(o, 2, 4)); // 输出 10
// bind 方法会创建一个新函数
var bound = add.bind(o, 2, 4);
console.log(bound()); // 输出 10

这些方法在函数式编程中是很有用，特别是在你需要将函数传递到另一个调用环境的时候。

总而言之，理解和掌握 JavaScript 中的 this 对于编写高效、减少 bug 和易于维护的代码至关重要。掌握 this 的绑定规则将帮助你在不同的编程环境和框架中更加自如地运用 JavaScript。

相关问答FAQs：

问题一：What are the different ways to reference the 'this' keyword in JavaScript?

答：在JavaScript中，引用this关键字有几种不同的方式。首先，当在全局作用域中使用this关键字时，它将引用全局对象（在浏览器中是window对象）。其次，当在对象方法中使用this关键字时，它将引用调用该方法的对象。此外，this关键字也可以在构造函数中使用，这时它将引用当前正在创建的对象。最后，通过使用call()、apply()或bind()方法，我们可以显式地指定this关键字的值。

问题二：How does JavaScript determine the value of the 'this' keyword?

答：在JavaScript中，this关键字的值是动态确定的，取决于函数的调用方式。当一个函数被调用时，this关键字的值将被自动绑定到一个特定的对象。如果函数作为对象的方法调用，那么this关键字将引用该对象。如果函数作为普通函数调用，this关键字将引用全局对象。如果函数作为构造函数调用，this关键字将引用正在创建的新对象。此外，我们还可以使用call()、apply()或bind()方法显式地指定this关键字的值。

问题三：What is the difference between call(), apply(), and bind() methods for setting the value of the 'this' keyword in JavaScript?

答：在JavaScript中，我们可以使用call()、apply()和bind()方法来显式地设置this关键字的值。call()和apply()方法允许我们临时改变函数的this关键字的绑定，并立即调用函数。它们之间的主要区别在于参数的传递方式，call()方法接收一系列参数列表，而apply()方法接收一个参数数组。

另一方面，bind()方法创建一个新的函数，并将指定的this关键字值绑定到新函数中。与call()和apply()不同，bind()方法不会立即调用函数，而是返回一个绑定了指定this值的新函数。这使得我们可以稍后调用它。

需要注意的是，call()、apply()和bind()方法的目的是改变函数调用时的this关键字的绑定，以便在不同的上下文中使用相同的函数。