JavaScript中的\this\是 this page 的意思吗

$JavaScript中的\this\是 this page 的意思吗$

不是，JavaScript中的this关键字并不表示“this page”，而是指向函数正在执行的上下文。 在不同的情况下，this可以指向不同的对象：在全局执行上下文中，this指向全局对象；在对象的方法中，this指向调用该方法的对象；在事件处理函数中，this通常指向接收事件的元素；在严格模式下，this的值为undefined，除非被明确设置；在箭头函数中，this被设置为它在定义时的上下文，并不会随着函数的调用而改变。

一、全局上下文中的 `this`

在JavaScript代码的最顶层，也即非任何函数内部的位置，用this会指向全局对象。在浏览器中，全局对象通常是window对象。因此，在全局上下文中，this有时可以与window互换使用。但在Node.js中，全局对象并不是window，而是global。

console.log(this === window); // 在浏览器中返回true
var a = 37;
console.log(window.a); // 输出37

二、函数上下文中的 `this`

在函数内部，this的值取决于函数的调用方式。如果是简单调用，即直接调用函数而不是作为一个对象的方法或通过new关键字调用，非严格模式下this会指向全局对象，而在严格模式下，this会是undefined。

function f1(){
  return this;
}
// 在浏览器的非严格模式中，这将返回全局对象
f1() === window; // true
// 在严格模式下，则返回undefined
function f2(){
  'use strict';
  return this;
}
f2() === undefined; // true

三、对象方法中的 `this`

当函数作为对象里的方法被调用时，this将指向那个对象。

var obj = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};
console.log(obj.f()); // 输出37

这里f作为obj的一个属性被调用，因此函数内的this指向obj对象。

四、构造函数中的 `this`

构造函数内部的this指的是正在被创建的新对象。当你使用new关键字调用函数时，该函数就会作为构造函数去创建一个新实例，this就会绑定到这个新实例上。

function Gadget(name, color) {
  this.name = name;
  this.color = color;
  this.whatAreYou = function(){
    return 'I am a ' + this.color + ' ' + this.name;
  }
}
var newGad = new Gadget('iPhone', 'Silver');
console.log(newGad.whatAreYou()); // 输出"I am a Silver iPhone"

五、绑定 `this`

JavaScript 提供了 .bind()、.call()、和 .apply()方法来设置函数的this值，无论函数如何被调用。

.bind() 方法创建一个新的函数，你可以传入参数列表作为新函数被调用时this的前置参数。

function f(){
  return this.a;
}
var g = f.bind({a: 'azerty'});
console.log(g()); // 输出 'azerty'
var o = {a: 37, f: f, g: g};
console.log(o.f(), o.g()); // 输出 '37, azerty'

使用 .call() 和 .apply() 方法，你可以直接设置函数调用时的this值，并且立即执行函数。

function add(c, d){
  return this.a + this.b + c + d;
}
var o = {a: 1, b: 3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

六、箭头函数中的 `this`

箭头函数不绑定自己的this，它们在自己的作用域中继承this。以下代码示例展示了箭头函数与普通函数的this行为差异。

function NormalFunction() {
  this.value = 20;
  setTimeout(function() {
    console.log(this.value); // 在非严格模式下输出undefined或全局对象的value属性值，在严格模式下报错
  }, 100);
}
function ArrowFunction() {
  this.value = 20;
  setTimeout(() => {
    console.log(this.value); // 输出20
  }, 100);
}
new NormalFunction();
new ArrowFunction();