js变量提升和函数提升

Posted 2020-09-21 瓜牛

　　变量，作为编程语言最基础的部分，每种语言的变量不尽相同，但又大径相庭。大部分编程语言的变量有块级作用域，如if、for、while... 但javascript不纯在块级作用域，而是函数作用域，并且有自己独有的特性--变量提升。（ES6新添加的let、const使其可以用块级作用域）

　　对于函数的变量访问时遵循作用域链的，即当前函数运行时会有一个当前作用域，当饮用某个变量时，会先查找当前作用域内是否存在该变量的定义，如果不存在则根据作用域链向上去查找父函数的作用域，有则拿来使用，没有则继续向上直到全局作用域。关于作用域链这里就不仔细描述，简单而言，类似原型链，从全局函数直到当前函数的作用域存在一种相互包含的关系，子可以向上访问，但是父不可以向下访问子函数的变量，这样层层嵌套的关系链。

作用链域如下：

var num = 10;

　　function a (){
　　　　console.log(num);
　　}

　　a() ;   //结果alert(10)，a函数作用域里没有num 所以向上查找外层的作用域，有且等于10所以弹出10而不是undefined.

 

变量的提升：

var num = 10;

　　function a (){
       //var num；
　　　　console.log(num);
　　　　var num = 11; //num = 11；
　　}

     a();    // undefined

这段代码中，function a(){}里的var num = 11；就拆分等价于被注释掉的蓝色部分，这就是变量提升--所有的变量都事先被提升到所属函数作用域的头部声明。

 

再来看看有关函数形参的问题，第一段代码稍加改动：

var num = 10;

　　function a (num){
　　　　console.log(num);　　
   }

　　a() ;   //结果undefined，a函数作用域定义形参num，由于没赋值，所以为undefined

 

函数的提升：

函数的声明方式有俩种：函数声明和函数表达式，在函数提升方面会有所不同

 

　　函数声明的函数提升：

console.log(fn);  //function fn(){console.log(1);}

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

等同下面一段代码：
function fn(){
    console.log(1);
}

console.log(fn);  //function fn(){console.log(1);}

函数声明中，声明的函数整体被提升到作用域最顶部。

 

　　函数表达式的函数提升：

console.log(fn);  // undefined

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

等同下面一段代码：
var fn;
console.log(fn); // undefined

fn = function (){
   console.log(1);
}

函数表达式中，类似于上面讲的变量提升，var出来的变量被提到作用域最顶部声明。

 

 如有发现错误之处，欢迎拍砖指正，感激不尽！

 

最后附加一道经典面试题：http://www.codeceo.com/article/one-javascript-interview.html