JavaScript的执行机制——块级作用域，前端开发技术

最新推荐文章于 2024-08-04 16:33:59 发布

HUAXIAL

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量840

点赞数 15

分类专栏： 2024年程序员学习文章标签： javascript java 开发语言

本文链接：https://blog.csdn.net/HUAXIAL/article/details/137311894

版权

2024年程序员学习专栏收录该内容

316 篇文章 0 订阅

订阅专栏

块级作用域

作用域（scope）
变量提升所带来的问题
- 变量容易在不被察觉的情况下被覆盖掉
本应销毁的变量没有被销毁
ES6 是如何解决变量提升带来的缺陷
JavaScript 是如何支持块级作用域的

作用域（scope）

=========================================================================

为什么 JavaScript 中会存在变量提升这个特性，而其他语言似乎都没有这个特性呢？要讲清楚这个问题，我们就得先从作用域讲起。

作用域是指在程序中定义变量的区域，该位置决定了变量的生命周期。通俗地理解，作用域就是变量与函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期。

在 ES6 之前，ES 的作用域只有两种：全局作用域和函数作用域。

全局作用域中的对象在代码中的任何地方都能访问，其生命周期伴随着页面的生命周期。
函数作用域就是在函数内部定义的变量或者函数，并且定义的变量或者函数只能在函数内部被访问。函数执行结束之后，函数内部定义的变量会被销毁。

在 ES6 之前，JavaScript 只支持这两种作用域，相较而言，其他语言则都普遍支持块级作用域。块级作用域就是使用一对大括号包裹的一段代码，比如函数、判断语句、循环语句，甚至单独的一个{}都可以被看作是一个块级作用域。

为了更好地理解块级作用域，你可以参考下面的一些示例代码：

//if块

if(1){}

//while块

while(1){}

//函数块

function foo(){}

//for循环块

for(let i = 0; i<100; i++){}

//单独一个块

{}

ES6 之前是不支持块级作用域的，因为当初设计这门语言的时候，并没有想到 JavaScript 会火起来，所以只是按照最简单的方式来设计。没有了块级作用域，再把作用域内部的变量统一提升无疑是最快速、最简单的设计，不过这也直接导致了函数中的变量无论是在哪里声明的，在编译阶段都会被提取到执行上下文的变量环境中，所以这些变量在整个函数体内部的任何地方都是能被访问的，这也就是 JavaScript 中的变量提升。

变量提升所带来的问题

=========================================================================

由于变量提升作用，使用 JavaScript 来编写和其他语言相同逻辑的代码，都有可能会导致不一样的执行结果。那为什么会出现这种情况呢？主要有以下两种原因。

变量容易在不被察觉的情况下被覆盖掉

比如下面JavaScript 代码如下：

var myname = “极客时间”

function showName(){

console.log(myname);

if(0){

var myname = “极客邦”

}

console.log(myname);

}

showName()

执行上面这段代码，打印出来的是 undefined，为什么输出的内容是 undefined 呢？我们再来分析一下。

首先当刚执行到 showName 函数调用时，执行上下文和调用栈的状态是怎样的？这里我就直接展示出来了，最终的调用栈状态如下图所示：

在这里插入图片描述

showName 函数的执行上下文创建后，JavaScript 引擎便开始执行 showName 函数内部的代码了。首先执行的是：

console.log(myname);

执行这段代码需要使用变量 myname，结合上面的调用栈状态图，你可以看到这里有两个 myname 变量：一个在全局执行上下文中，其值是“极客时间”；另外一个在 showName 函数的执行上下文中，其值是 undefined。那么到底该使用哪个呢？

相信做过 JavaScript 开发的同学都能轻松回答出来答案：“当然是先使用函数执行上下文里面的变量啦！”的确是这样，这是因为在函数执行过程中，JavaScript 会优先从当前的执行上下文中查找变量，由于变量提升，当前的执行上下文中就包含了变量 myname，而值是 undefined，所以获取到的 myname 的值就是 undefined。

本应销毁的变量没有被销毁

接下来我们再来看下面这段让人误解更大的代码：

function foo(){

for (var i = 0; i < 7; i++) {

}

console.log(i);

}

foo()

如果你使用 C 语言或者其他的大部分语言实现类似代码，在 for 循环结束之后，i 就已经被销毁了，但是在 JavaScript 代码中，i 的值并未被销毁，所以最后打印出来的是 7。

这同样也是由变量提升而导致的，在创建执行上下文阶段，变量 i 就已经被提升了，所以当 for 循环结束之后，变量 i 并没有被销毁。

这依旧和其他支持块级作用域的语言表现是不一致的，所以必然会给一些人造成误解。

ES6 是如何解决变量提升带来的缺陷