javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript变量提升

浅析JavaScript中变量提升的原理与使用

作者:剑老师_

前端的小伙伴大概都知道,js中的var变量存在变量提升,在es6以后随着let变量的出现,变量提升问题得以解决,那么变量提升的原理是什么,es6又是怎么解决变量提升问题的,下面我们来共同探寻答案

前端的小伙伴大概都知道,js中的var变量存在变量提升,在es6以后随着let变量的出现,变量提升问题得以解决。那么变量提升的原理是什么?es6又是怎么解决变量提升问题的?下面我们来共同探寻答案:

我们首先来了解几个概念,执行上下文、变量环境、词法环境。(本文不涉及闭包、this指向等问题)

执行上下文

当一段js代码被执行时,js引擎会先对其进行编译,并创建执行上下文。执行上下文分为三种:全局执行上下文、函数执行上下文、eval执行上下文

js文件执行时,首先会创建全局执行上下文,并压入调用栈,当调用js函数时,会创建函数执行上下文,并压入调用栈。当函数执行完之后,函数执行上下文便会从栈中移出。如以下代码的执行:

var a = "123"
function func1() {
    var b = "123"
    console.log(b)
    func2()
}
funcgion func2() {
    const c = "456"
    console.log(c)
}
func1()

执行上下文中其实还包含了另外两个对象,一个变量环境对象和一个词法环境对象。那么接下来我们来看一下什么是变量环境和词法环境

变量环境

变量环境存在于执行上下文中,其本质是一个对象,变量环境中存储的是此作用域内定义的变量、函数信息等信息。如全局执行上下文中的变量环境存储的是全局的变量和函数信息。函数执行上下文中的变量环境则存放的是函数的参数、局部变量等信息。

其实,js的代码在执行前还有一个编译的过程,在编译过程中,var变量和function函数部分会被js引擎放入到变量环境中,并且变量会被默认设置为undefined。在执行阶段,js引擎会在变量环境中查找声明的变量和函数。这就是我们所说的“变量提升”,这也是为什么函数可以在函数的实现之前调用。

例:

console.log(a)
var a = "123"
function func1() {
    console.log(a)
}
func1()

以上代码的执行顺序是:

所以以上代码输出结果为

undefined
123

虽然在a声明之前打印a变量,但是却并没有报错。

词法环境

ES6之前,js中只支持全局作用域和函数作用域,并不支持块级作用域。ES6之后,js引入了letconst关键字,从而解决了变量提升问题并使js支持了块级作用域。

其实说letconst没有变量提升并不准确,当js代码被编译时,letconst变量代码会被存放在词法环境中。此时letconst变量已经被提升了,但是只是创建被提升,初始化和赋值并没有被提升,如果在赋值之前去读写该变量,便会报错,这就是我们所说的“暂时性死区”。

那实现块级作用域的原理是什么呢?其实在词法环境中,维护了一个作用域栈,栈底是函数的最外层变量(letconst声明的变量),进入一个作用域块后,就会把该作用域中的变量入栈;当作用域中的代码执行完成之后,该作用域的信息就会从栈顶弹出。我们举个以下例子来说明

例:

function fun()
{
    let a = 1
    {
        let a = 2
        let b = 3
        console.log(a)
        console.log(b)
    }
    console.log(a)
    console.log(b)
}
fun()

如图:

如果同一个函数中不同作用域存在相同的变量(如上面例子的a),那么变量的查找顺序是怎样的呢?

总结

讲到这里,我想应该可以回答一下文章开始所提的两个问题:

变量提升的原理是什么?在js代码编译阶段,var变量和function函数会被js引擎放入到变量环境中,并且var变量会被默认设置为undefined。需要注意的是,var变量只有创建和初始化被提升,赋值并没有被提升;而function的创建、初始化和赋值均会被提升。所以在变量的声明之前访问,该变量的值是undefined,而函数则可以在声明之前正常调用。

letconst是怎么解决变量提升问题的? 在js代码编译阶段,letconst变量会被js引擎放入到词法环境中。与var一样,letconst变量也被提升了。但只是创建被提升,变量的初始化和赋值并未被提升,如果在赋值之前读写该变量,就会形成暂时性死区。

到此这篇关于浅析JavaScript中变量提升的原理与使用的文章就介绍到这了,更多相关JavaScript变量提升内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文