Javascript中的执行上下文如何创建

在 Javascript 中，执行上下文（Execution Context，以下简称 EC）是很重要的概念。每当函数执行时，都会创建一个新的执行上下文。EC 包括变量对象（Variable Object，以下简称 VO）、作用域链（Scope Chain）和 this 值。在本文中，我们将讨论创建执行上下文的过程，并提供代码示例。 # 创建执行上下文的过程 执行上下文可以分为全局执行上下文和函数执行上下文。全局执行上下文是在运行全局代码时创建的，而函数执行上下文是在调用函数时创建的。 ## 全局执行上下文 全局执行上下文是在打开浏览器窗口时创建的。它包括全局对象、this 关键字和全局变量。 下面是一段示例代码：

console.log(this); // 全局对象
console.log(window === this); // true
console.log(window.innerHeight); // 窗口内部高度

在这段代码中，全局执行上下文中的 this 关键字是全局对象。我们可以通过 window 属性访问它。 ## 函数执行上下文 当函数被调用时，将创建一个新的执行上下文。每个函数调用都会创建一个新的执行上下文。这些执行上下文按调用顺序形成一个执行栈。代码执行时从栈顶的执行上下文开始，然后依次执行每个上下文。 下面是一个示例代码：

function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet('Jack'); // 输出：Hello, Jack!

在这段代码中，当 greet 函数被调用时，将创建一个新的执行上下文。在这个执行上下文中，VO 是参数 name 和函数自身。作用域链是指向全局作用域的。this 值与全局执行上下文中的 this 关键字相同。 # 执行上下文的组成部分 每个执行上下文都由三个重要的属性组成：变量对象、作用域链和 this 值。 ## 变量对象 变量对象是指当前执行上下文中可访问的变量和函数的容器。它包含了函数参数、函数声明和变量声明等。变量对象分为两种类型：全局上下文中的变量对象和函数上下文中的变量对象。 ### 全局上下文的变量对象 全局上下文的变量对象是在打开浏览器窗口时创建的。它包括全局对象、全局函数和变量声明。 下面是一个示例代码：

console.log(this); // 全局对象
function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet('Jack'); // 输出：Hello, Jack!
console.log(greet); // 函数 greet
console.log(name); // undefined, 因为它是函数的参数

在这个示例中，全局变量 greet 可以从全局上下文中访问。它也可以通过 window.greet 来访问。 ### 函数上下文的变量对象 函数上下文的变量对象是在函数被调用时创建的。它包括函数参数、函数声明和变量声明。 下面是一个示例代码：

function greet(name) {
  var message = `Hello, ${name}!`;
  console.log(message);
}
greet('Jack'); // 输出：Hello, Jack!
console.log(greet); // 函数 greet
console.log(name); // undefined, 因为它是函数的参数
console.log(message); // 报错：message 没有被定义

在这个示例中，message 变量只能从函数上下文中访问。 ## 作用域链 作用域链是执行上下文与其父执行上下文之间的连接。当查找变量时，作用域链会被遍历，直到找到变量为止。 下面是一个示例代码：

function outer() {
  var x = 10;
  function inner() {
    console.log(x);
  }
  inner();
}
outer(); // 输出：10

在这个示例中，当调用 inner 函数时，会在 inner 函数的作用域中查找变量 x。由于 inner 函数的作用域链包括 outer 函数的变量对象，所以 x 变量可以被找到并打印出来。 ## this 值 this 值是在函数调用时确定的。它指向调用该函数的对象。 下面是一个示例代码：

var person = {
  name: 'Jack',
  sayName: function() {
    console.log(this.name);
  }
};
person.sayName(); // 输出：Jack

在这个示例中，当调用 person.sayName() 函数时，this 值指向 person 对象。因此，能够打印出 person 对象的 name 属性。 # 总结 执行上下文是重要的概念，包含有变量对象、作用域链和 this 值。每当函数执行时，都会创建一个新的执行上下文。全局执行上下文是在打开浏览器窗口时创建的。创建执行上下文的过程分为全局执行上下文和函数执行上下文两种类型。变量对象是指当前执行上下文中可访问的变量和函数的容器。作用域链是执行上下文与其父执行上下文之间的连接。this 值是在函数调用时确定的，它指向调用该函数的对象。