JS中作用域、预解析和变量提升总结

129 阅读3分钟

作用域

作用域就是变量的有效范围。在一定的空间里可以对数据进行读写操作,这个空间就是数据的作用域。

  1. 全局作用域:最外层函数定义的变量拥有全局作用域,即对任何内部函数来说,都是可以访问的:
  2. 局部作用域:局部作用域一般只在固定的代码片段内可访问到,而对于函数外部是无法访问的,最常见的例如函数内部。在ES6 之前,只有函数可以划分变量的作用域.所以在函数的外面无法访问函数内的变量
  3. 块级作用域:凡是代码块就可以划分变量的作用域,这种作用域的规则就叫块级作用域块级作用域函数作用域 词法作用域之间的区别:
  • 块级作用域和函数作用域描述的是,什么东西可以划分变量的作用域;
  • 词法作用域描述的是,变量的查找规则。 之间的关系:
  1. 块级作用域包含函数作用域
  2. 词法作用域与块级作用域,函数作用域之间没有任何交集,他们从两个角度描述了作用域的规则。

预解析

Javascript代码的执行是由浏览器中的解析器来执行的,在执行代码是分为两个过程:

  1. 预解析过程
  1. 把变量的声明提升到当前作用域的最前面,只会提升声明,不会提升赋值;
  2. 把函数的声明提升到当前作用域的最前面,只会提升声明,不会提升调用;
  3. 先提升var,在提升 function。
  1. 执行过程
//案例1
let a = 25;
function abc() {
    alert(a);
    let a = 10;
}
abc();           //Cannot access 'a' before initialization
//案例2
console.log(a);
function a(){
    console.log(aaaa);
}
let a=1;
console.log(a);    //Identifier 'a' has already been declared

变量提升

  1. 变量提升

定义:定义变量的时候,变量的声明会被提升到作用域的最上面,二而变量的赋值不会提升,只有var关键字定义的变量才具有变量提升。

  1. 函数提升

javascript解析器首先会把当前作用域的函数声明提升到整个作用域的最前面。

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

变量提升与函数提升的区别

  1. 变量提升 简单说就是在JavaScript代码执行前引擎会先进行预编译,预编译期间会将变量声明与函数声明提升至其对应作用域的最顶端,函数内声明的变量只会提升至该函数作用域最顶层当函数内部定义的一个变量与外部相同时,那么函数体内的这个变量就会被上升到最顶端举例来说:
console.log(a);    //undefined
 var a = 3;

预编译后的代码结构可以看做如下运行顺序 var a将变量a的声明提升至最顶端,赋值逻辑不提升。

console.log(a);    // undefined
 a = 3

代码执行到原位置即执行原赋值逻辑。

  1. 函数提升
  • 函数提升只会提升函数声明式写法,函数表达式的写法不存在函数提升;
  • 函数提升的优先级大于变量提升的优先级,即函数提升在变量提升之上。

【往期分享】

  1. JS冒泡排序

  2. JS实现秒杀倒计时