JavaScript中的上下文（Context）

在JavaScript中，上下文（Context）是指当前代码执行的环境。具体来说，上下文可以分为两种：全局上下文和函数上下文。全局上下文是指没有被包含在任何函数中的代码块，而函数上下文则是指被包含在函数中的代码块。

全局上下文

全局上下文是JavaScript代码的默认上下文，当没有函数被调用时，代码会在全局上下文中执行。

在全局上下文中，有两个重要的变量：this 和 window。

this

在全局上下文中，this 的值指向全局对象 window。

console.log(this === window); // true

window

window 是全局对象，在浏览器环境中，它表示浏览器窗口。你可以使用它访问浏览器窗口的所有属性和方法。

console.log(window.innerWidth); // 窗口的内部宽度

函数上下文

每当一个函数被调用时，都会创建一个新的函数上下文。函数上下文会继承自它的父级上下文，同时也可以覆盖一些属性。

在函数上下文中，同样有两个重要的变量：this 和 arguments。

this

在函数上下文中，this 的值取决于函数的调用方式。如果函数是作为对象的方法被调用，this 会指向该对象；如果函数被普通函数调用，this 会指向全局对象。

const obj = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

obj.sayHello(); // Hello, John!

function sayWorld() {
  console.log(`Hello, ${this}!`);
}

sayWorld(); // Hello, [object Window]!

arguments

arguments 对象包含了函数被调用时传入的参数。

function sum() {
  let result = 0;
  for (let i = 0; i < arguments.length; i++) {
    result += arguments[i];
  }
  return result;
}

console.log(sum(1, 2, 3, 4)); // 10

改变上下文

有时候我们希望改变函数的 this 值，可以使用 call() 或 apply() 方法来实现。

const person1 = {
  name: 'John',
  age: 20
};

const person2 = {
  name: 'Tom',
  age: 25
};

function sayHello() {
  console.log(`Hello, ${this.name}!`);
}

sayHello.call(person1); // Hello, John!
sayHello.call(person2); // Hello, Tom!

总结

上下文是JavaScript中非常重要的概念，理解上下文对于编写高质量的JavaScript代码非常重要。全局上下文和函数上下文有许多不同之处，我们可以在开发中灵活地使用它们来实现不同的功能。