JavaScript中的执行上下文和作用域的关系

在JavaScript中，执行上下文和作用域是两个非常重要的概念。理解这两个概念可以帮助我们更好地编写JavaScript代码。

一、执行上下文

执行上下文是JavaScript中的一个抽象概念，表示JavaScript代码被解析和执行时所处的环境。它包含三个重要的属性：变量对象、作用域链和this。

在JavaScript中，执行上下文可以分为以下三种类型：

• 全局执行上下文
• 函数执行上下文
• eval执行上下文（不常用）

下面我们主要介绍全局执行上下文和函数执行上下文。

1.全局执行上下文

全局执行上下文是最外层的执行上下文，它在页面打开时创建，页面关闭时销毁，只有一个。在全局执行上下文中，变量对象就是全局对象（浏览器中是window对象），作用域链包含了全局对象。

全局执行上下文中的this指向全局对象。

console.log(this); // 输出window

2.函数执行上下文

函数执行上下文是函数被调用时创建的执行上下文。在函数执行上下文中，变量对象包含了函数的参数、函数内部声明的变量和函数声明。作用域链包含了函数对象和全局对象。

函数执行上下文中的this指向函数被调用时的对象（如果没有指定，this指向全局对象）。

function test() {    console.log(this);}test(); // 输出window

二、作用域

作用域是指变量在代码中的可访问范围。在JavaScript中，作用域是由函数和代码块（使用let和const声明）来控制的。

JavaScript采用的是词法作用域，即变量的作用域在代码书写阶段就已经确定。

1.函数作用域

在函数内部声明的变量只能在函数内部访问，函数外部无法访问。

function test() {    var a = 1;    console.log(a);}test(); // 输出1console.log(a); // 报错

2.全局作用域

全局作用域是全局执行上下文的作用域。在全局作用域中声明的变量可以在任何地方访问。

var a = 1;function test() {    console.log(a);}test(); // 输出1console.log(a); // 输出1

3.块级作用域

在块级作用域中声明的变量只能在块级作用域中访问，块级作用域通常由代码块（使用let和const声明）来创建。

if (true) {    var a = 1;    const b = 2;    let c = 3;}console.log(a); // 输出1console.log(b); // 报错console.log(c); // 报错

三、函数和闭包

函数是JavaScript中的一等公民，它可以被赋值给变量，也可以作为参数传递给其他函数。函数和作用域密切相关，函数可以利用作用域链来访问外部变量，这就是闭包。

1.函数参数

JavaScript中的函数参数可以分为两种类型：形参和实参。形参是函数定义时的参数，实参是函数调用时传入的参数。

function test(a, b) {    console.log(a, b);}test(1, 2); // 输出1 2

2.闭包概念

闭包是指函数可以访问定义时所在的词法作用域中的变量，即使函数在其他地方被调用，也可以使用这些变量。

function createCounter() {    var count = 0;    return function() {        count++;        console.log(count);    }}var counter = createCounter();counter(); // 输出1counter(); // 输出2counter(); // 输出3

在这个例子中，createCounter函数返回一个函数，这个函数可以访问createCounter函数中定义的count变量。在调用createCounter函数时，返回的函数被赋值给了counter变量，这个变量也可以被调用，每次调用都会使count加1。

四、总结

本文讲解了JavaScript中的执行上下文和作用域，通过函数和参数的使用，介绍了作用域链、闭包等概念，并提供了通俗易懂的案例来帮助读者深入理解。学习这些概念可以帮助我们更好地理解JavaScript的运行机制，编写更加优秀的JavaScript代码。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： JavaScript中的this关键字的指向及常见使用场景
• 下一篇： JavaScript中的闭包的定义及常见应用场景