javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS执行机制、作用域及作用域链

JavaScript执行机制、作用域及作用域链详解

作者：亦妤

JavaScript中,作用域链(Scope Chain)是实现变量和函数访问的核心机制,它决定了代码中变量和函数的可访问范围,这篇文章主要介绍了JavaScript执行机制、作用域及作用域链的相关资料,需要的朋友可以参考下

要了解js的执行机制，那么首先需要明白执行上下文、执行栈以及作用域和作用域链的概念。

执行上下文

执行上下文（Execution Context）,缩写为EC。js代码在执行之前需要做一些准备，类比我们在上课之前需要在教室中准备好粉笔，黑板课桌等等。js代码在执行之前也需要做一些准备，给代码的执行创建一个环境 —— 执行上下文。

执行上下文的类型

现在了解了执行上下文，但是js代码在执行过程中怎么去找到不同的执行上下文呢？那么就需要一个存放这些不同执行上下文的地方 —— 执行栈。执行栈，顾名思义是一个栈的数据结构，有先入后出的特点。执行栈栈顶的执行上下文就是当前的执行上下文

现在两个重要的概念都了解之后，我们学习一下执行上下文到底是什么，它运作的过程是什么样的？

执行上下文的结构

可以看到执行上下文中主要包含四个部分：

  1. 变量环境用来存储所有的var声明的变量以及函数声明；
  2. 词法环境用来存储let/const/class声明的变量和全局对象；
  3. this绑定对于全局执行上下文，如果是浏览器绑定的是window，如果是node.js指向的就是global，函数执行上下文中的this指向取决于函数的调用方法；
  4. 外部引用其实就是作用域链，全局执行上下文引用为null，函数执行上下文指向函数定义时的词法环境。

了解了执行上下文的结构，我们来用一个小的代码片段说明一下执行上下文的创建和执行。

创建和执行步骤

  1. 创建全局执行上下文，并加入执行栈顶
  2. 分析：
    • 找到所有的非函数中的var声明，在变量环境中创建绑定
    • 找到所有的顶级函数声明，在变量环境中创建绑定
    • 找到顶级let、const、class声明，在词法环境中创建绑定
    • 块级作用域中的变量声明（let/const）创建新的词法环境放入其中，函数声明特殊，类似于let
  3. 变量名重复处理：let const class声明的变量名不能重复，他们与var function的名字也不能重复；若var 和 function 名字重复，function声明的函数名优先
  4. 创建绑定：
    • 变量环境绑定：var初始化为undefined,函数初始化为函数对象，并且会把函数定义时的词法环境保存到函数对象中。
    • 词法环境绑定：let/const/class 创建但未初始化 —— 暂时性死区
  5. 执行语句
var a = 10
function foo(){
  console.log(a)
  let a
}
foo()

以上面的代码块为例

到这里就说完了这个简单代码块的执行上下文的创建和执行，那么会不会有一个疑问，我在上面的描述中着重强调函数执行上下文的词法环境的一个指向，但是似乎也没有起到什么作用。

那么如果把函数foo中的let声明去掉我们就可以看出这个指向的用处了！如果去掉的话，函数执行上下文中就找不到这个变量a，那么就会沿着outer指向找到父级的执行上下文查看其中是否有变量a，最后会输出10。

这也就引出了作用域链！

作用域

那么在介绍作用域链之前，我们先了解什么是作用域

作用域是解析（查找）变量名的一个集合，规定了变量和函数的可访问范围，也就是它定义了在哪里可以访问什么变量。作用域就类比规则，当前执行上下文的词法环境就类比实现规则的数据结构。

作用域的类型

我们再举一个例子来说明

function foo(){
    console.log(a)
}

funtion bar(){
    var a = 3
    foo()
}
var a = 2
bar()

以上的代码最终会输出2。

这就是作用域链！经过以上的分析，我们也发现函数的作用域是函数定义时的作用域决定的，和函数调用时的作用域没有关系，否则输出就应该是3。

现在对于函数作用域有了一定的了解后，我们继续看块级作用域。

遇到块级作用域，也有以下几个步骤：

  1. 创建新的记录环境（词法环境）,连接在原来记录之前
  2. 分析：
    • 所有的顶级函数声明
    • let/const声明
  3. 名字重复处理
  4. 创建绑定：
    • 登记function,初始化为函数对象
    • 登记let const,未初始化
  5. 执行语句

细心的同学肯定已经发现，遇到块级作用域{}，我们的处理方式其实之前类似，但是不会创建新的执行上下文了，而是改成了创建新的一个记录指向原来的记录。

用以下代码块来说明：

let inIf = 'out of statement'

if(true){
    let inIf = 'in of statement'
    console.log(inIf)
}

console.log(inIf)

最后会先输出in of statement，再输出 out of statement

如上图，执行完块级作用域后，这个记录就会销毁，然后把原先的记录重新接回。

那么我们再看下面这个例子，体会闭包的作用

var liList = []

for(var i = 0; i < 5; i++){
    liList[i] = function(){
        console.log(i)
     }
}

liList[0]()
liList[1]()
liList[2]()
liList[3]()
liList[4]()

以上代码我们执行会发现，五个函数调用后输出的结果都是5。这是因为var没有块级作用域，会直接把变量i存放在全局执行上下文中，后面块级作用域中定义的所有函数的environment属性都指向全局执行上下文的词法环境，所以循环结束 i为5，每个函数调用创建的新的函数执行上下文中的outer都指向全局执行上下文，也会去全局中找i输出都为5。

将上述代码改为：

var liList = []

for(let i = 0; i < 5; i++){
    liList[i] = function(){
        console.log(i)
     }
}

liList[0]()
liList[1]()
liList[2]()
liList[3]()
liList[4]()

就可以利用闭包，让调用输出的i不再是共享的值。因为let声明创建了块级作用域，每次循环都会创建一个新的词法环境存储变量i,定义的五个函数的enviroment属性也会指向不同的块级作用域。最后调用沿着作用域链找到的也是不同的i值。

闭包

这个例子清晰地展示了闭包的核心机制：函数能够记住并访问其定义时所处的词法作用域，即使该函数在其词法作用域之外被调用。在上面的例子中，每个函数都通过闭包"记住"了定义时所在的块级作用域（及其中的 i值）。

闭包的主要用途

闭包的注意事项

总结 

到此这篇关于JavaScript执行机制、作用域及作用域链的文章就介绍到这了,更多相关JS执行机制、作用域及作用域链内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

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