zoukankan      html  css  js  c++  java
  • Javascript之hoisting变量提升

      javascript不仅仅是一门弱类型语言,还是一门解释型语言。一门编程语言的本质就是这样,优点即是缺点,缺点也往往是优点。JS因为有了变量提升,能够使我们在编程时可以忽略“先声明,再使用”的规则,但也正是JS变量提升的存在,使得我们编程时一不留神就掉进了陷阱。

    先来看一段代码:

    1 a="test";
    2 var a;
    3 console.log(a);

      按理说应该输出Undefined,但是结果却是:“test”。

      实际上js代码在执行的整个过程中是有所谓的编译期,只不过这个编译期很短暂,但却不可忽略,编译期间js引擎做了很多事情:词法分析,作用域链的构建等,还有一个就是提升,声明的提升,包括变量的声明和函数的声明,提升到何处?提升到作用域的顶端。

      也就是说,Hoisting:在变量(或者函数)的作用域内,不管变量(或者函数)在何处声明,都会被提升到作用域的顶部,但是变量(或者函数)初始化的顺序不变。换句话说“var a=2”会被拆分成“var a;a=2”两个部分,前一个部分会hoisting到作用域的顶端,而后一部分放在原地不变。 

      下面来看一些JS变量提升的两个规则。

    一、函数声明提升,函数表达式不提升

    1 foo();
    2 var func=function foo(){
    3     console.log(a);
    4     var a="test c";
    5 }

    等价于

    1 var func;
    2 foo();
    3 func=function foo(){
    4    var a;
    5    console.log(a);//Undefined
    6    a="test c";
    7 }

    二、函数提升优先于变量提升

    1 var foo=3;
    2 foo();
    3 function foo(){
    4     console.log(1);
    5 }
    6 foo=function(){
    7     console.log(2);
    8 }

    等价于

    1 function foo(){
    2     console.log(1);
    3 }
    4 var foo;
    5 foo=3;
    6 foo();//TypeError:此时foo被覆盖,已变成一个变量了
    7 foo=function(){
    8     console.log(2);
    9 }
  • 相关阅读:
    dfs模板
    24点
    个人阅读三
    个人阅读作业2:关于项目经历的心得
    代码复审
    Pair Project1:电梯控制程序
    第二次个人项目——阅读经典教材
    THE First Individual Project
    个人阅读作业3
    个人阅读作业2
  • 原文地址:https://www.cnblogs.com/guanghe/p/11126187.html
Copyright © 2011-2022 走看看