zoukankan      html  css  js  c++  java
  • js变量提升和函数提升

      变量,作为编程语言最基础的部分,每种语言的变量不尽相同,但又大径相庭。大部分编程语言的变量有块级作用域,如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

  • 相关阅读:
    eclipse maven Errors while generating javadoc on java8
    log4j升级到logback
    httpclient新旧版本分割点4.3
    javadoc中{@link}与@see的简单使用以及区别
    maven-shade-plugin插件
    jar中META-INF
    dubbo环境搭建与tomcat集成、DEMO示例、常见问题(最完整版本、带管理控制台、监控中心、zookeeper)
    叶亚明:合格CTO的六要素(转)
    rocketmq安装与基本操作
    当我们在谈论技术时,技术的本质和价值究竟是什么?
  • 原文地址:https://www.cnblogs.com/chenwenhao/p/6959604.html
Copyright © 2011-2022 走看看