深入理解js变量提升和函数提升

深入理解js的变量提升和函数提升

  1. 变量提升
    在ES6之前,JavaScript没有块级作用域的概念(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域,变量提升即是将变量声明提升到它所在的作用域的最开始的部分。
    意思即是:在我们的js中,代码的执行是分两步进行走的,1、预解析 2、一步一步执行
    在预解析阶段,首先会在全局作用域内,js解析器会找到所有的var、function、参数,并提前到当前作用域的最顶上去(变量的赋值操作不会提前,还在原来的地方),此时并没有执行代码。然后再开始一行一行执行代码。遇到了函数调用,于是进入到函数作用域内,又开始分两步骤走,预解析 一步一步执行,以此类推。如例子:
   console.log(global); //undifined
   var global="222";
    console.log(global); //222
    
   f() {
    console.log(a);  //undifined
    var a="111"; 
    console.log(a); //111
   }
   f();

之所以会是以上打印的结果,是由于js的变量提升,实际上上面的代码是按照以下来执行的:

 var global; //变量提升,全局作用域范围内,此时只是声明,并没有赋值
 console.log(global); //undifined
 var global="222"; //此时才进行赋值
 console.log(global); //打印变量上面赋的值
    
 f() {
 	var a;//先进行变量提升,函数作用域范围内
    console.log(a);  //undifined
    var a="111"; 
    console.log(a); //111
  }
 f();
  1. 函数提升
    js中创建函数由两种方式,函数声明式和函数赋值式。注意:只有函数声明才会存在函数提升(如变量提升一样),如下:
console.log(f1); //function f1() {}
console.log(f2); //undifined
function f1() {} //函数声明式
var f2=function () {}//函数赋值式

之所以会有这样的输出结果,正是由于js中的函数提升起到了效果。

function f1() {} //函数提升,整个代码块提升到文件的最开始
console.log(f1);
var f2=function(){}

深入理解js变量提升和函数提升

上一篇:js的执行顺序


下一篇:JS 运算符的优先级 (来自MDN)