JavaScript作用域及预解析

mzmm403
124 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天

Javascript作用域

定义及分类

  • 定义

一段代码中所用到的名字并不是总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域

  • 分类（JS作用域（es6）之前）现阶段我们js没有块级作用域，es6新增块级作用域
  1. 全局作用域
  • 整个script或者是一个单独的js文件内
  1. 局部作用域(函数作用域)
  • 在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用

变量的作用域

变量作用域分类

在JavaScript中，根据作用域不同，变量可分为两种：

  • 全局变量

在全局作用域下的变量，在全局下都可以使用

  • 注意：如果在函数内部没有声明直接赋值的变量也是全局变量（不建议使用）

  • 局部变量

在局部作用域下的变量，后者在函数内部的变量就是局部变量

  • 注意：函数的形参是局部变量

从执行效率来看全局变量和局部变量

  • 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源

  • 局部变量，当我们程序执行完毕就会销毁，比较节约内存资源

块级作用域

就是在{}内部的叫做块级作用域

  • 块级作用域只限于在块中有效，在外部不能调用
  • if条件判断，for循环，函数等

作用域链

  • 只要是代码，就至少有一个作用域

  • 写在函数内部的是局部作用域

  • 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域

  • 根据内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

  • 链式查找就是逐级往上一层一层的查取

var num = 10;
function fn(){
    var num = 20;
    
    function funn(){
        console.log(num);
    }
}

作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构我们称为作用域链

  • 上述代码中的 console.log(num);语句先是查找自己内部的作用域，如果没有往上查找即查找fn函数内部，若fn函数内部无num变量则去查找全局变量

JavaScript预解析

预解析

引例

eg1

console.log(num);

image-20220625153604507.png eg2

console.log(num);
var num = 10;

image-20220625153808849.png

eg3

fn();
function fn(){
   console.log(10); 
}

image-20220625154032600.png eg4

fn();
var fun = function(){
    console.log(10);
}

image-20220625154509859.png

定义

  • js解析器在运行JavaScript代码的时候分为两步：预解析和代码执行

  • 预解析：js引擎会把里面所有的var还有function

提升到当前作用域的最前面

  • 代码执行：按照代码的顺序从上往下

分类

  • 变量预解析（变量提升）

  1. 变量预解析（变量提升）就是把所有的变量声明提升到当前作用域的最前面，不提升赋值操作

  2. eg2中先预解析num变量，然后按照代码执行

  • 函数预解析（函数提升）
  1. 函数预解析（函数提升）就是把所有的函数声明提升到当前作用域的最前面，不调用函数
avatar
文章
阅读
粉丝