Javascript中的作用域和上下文深入理解

在理解Javascript中的作用域和上下文之前，需要先了解一些基本的概念。

作用域

作用域定义了变量和函数的可访问性。在Javascript中，作用域分为全局作用域和函数作用域。全局作用域是在整个程序中都可访问的作用域，而函数作用域只有在函数内部才能访问。

var关键字的作用域

使用var关键字声明的变量的作用域是函数作用域，而不是块级作用域。这意味着，在函数内部声明的变量只能在函数内部访问，而不会被外部代码访问到。

function example() {
  var x = 10;
  if (true) {
    var y = 20;
    console.log(x);
    console.log(y);
  }
  console.log(x);
  console.log(y);
}
example();
// Output:
// 10
// 20
// 10
// 20

在这个例子中，由于使用var声明变量x和y，它们的作用域都是example函数的作用域，因此我们可以在函数内的任何位置使用它们。

let和const关键字的作用域

使用let和const关键字声明的变量的作用域是块级作用域。这意味着，在if语句或循环语句内部声明的变量只能在该块级作用域内部访问，而不会被外部代码访问到。

function example() {
  let x = 10;
  if (true) {
    const y = 20;
    console.log(x);
    console.log(y);
  }
  console.log(x);
  console.log(y); // ReferenceError: y is not defined
}
example();
// Output:
// 10
// 20
// 10

在这个例子中，由于使用let和const声明变量x和y，它们的作用域都是if语句的块级作用域，因此我们只能在if语句内访问变量y，而不能在外部访问到它。

上下文

上下文表示代码执行时所处的环境。在Javascript中，上下文分为全局上下文和函数上下文。

全局上下文表示代码在全局作用域执行时的执行环境。

console.log(this); // Output: Window
console.log(window); // Output: Window

在全局作用域内执行代码时，上下文就是Window对象。此时的this指向的是全局对象Window。

函数上下文表示代码在函数作用域内执行时的执行环境。

function example() {
  console.log(this);
}
example(); // Output: Window

在函数作用域内执行代码时，上下文就是函数本身。此时的this指向的是全局对象Window。

改变上下文的方法

通过call、apply和bind方法可以临时改变this的指向。这些方法将函数的this指向指定的对象，可以用于调用某个函数时临时改变函数的上下文。

const person = {
  firstName: "John",
  lastName: "Doe"
};

function greeting() {
  console.log(`Hello, ${this.firstName} ${this.lastName}`);
}

greeting.call(person); // Output: Hello, John Doe

greeting.apply(person); // Output: Hello, John Doe

const newGreeting = greeting.bind(person);
newGreeting(); // Output: Hello, John Doe

以上代码中，我们定义了一个person对象和一个greeting函数。通过call、apply和bind方法，我们将greeting函数的上下文改变为person对象，从而在调用greeting函数时，可以访问person对象中的属性。

示例：

示例1

let i = "global scope";
function foo() {
  console.log(i);
  let i = "function scope";
  console.log(i);
}

foo();
console.log(i);
// Output:
// undefined
// function scope
// global scope

在这个例子中，我们在函数中使用了let关键字声明变量i，这实际上创建了一个新的变量，它的作用域是函数作用域。在函数中调用console.log(i)时，输出undefined，是因为变量i已经被声明，但还没有被赋值。在后面调用console.log(i)时，输出函数作用域中的变量i的值。最后，我们在全局作用域中访问变量i时，输出了全局作用域中变量i的值。

示例2

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function () {
    console.log(this.firstName + " " + this.lastName);
  }
}

person.fullName(); // Output: John Doe

在这个例子中，我们定义了一个person对象和一个fullName方法。在fullName方法中，this始终指向当前的person对象。当我们调用person.fullName()时，输出了person对象中firstName和lastName属性的值，即输出了John Doe。