zoukankan      html  css  js  c++  java
  • 变量声明提升 Vs. 函数声明提升

    1. 变量声明提升

          先看以下代码:

    1)var in_window = "a" in window; console.log(in_window); 

    2)var in_window = "a" in window; console.log(in_window); if(!("a" in window)) { var a = 1; }

    3)var a; var in_window = "a" in window; console.log(in_window); if(!("a" in window)) { a = 1; }

          控制台输出的结果分别是:false true true。如何解释? 这是由于在js的变量作用域中有个规则:所有变量声明都在范围作用域的顶部!也就是说,在2)代码中,if语句块内的申明的变量a,会自动提到上面去申明。其等价于3)。

          由上述的分析可知,可以理解下面代码的输出结果是undefined。

          if(!("a" in window)) { var a = 1; } console.log(a); //undefined  该代码其实相当于:var a; if(!("a" in window")) { a = 1; } console.log(a);

          再试一次:

    var s = '';
    if (false) {
        var a = 1;
    }

          浏览器中的调试结果如下:

          有图有真相。变量a的声明的确提升了。

          巩固题: 

          var s = ''; while(false) { var a = 1; } console.log(a); //undefined

          if(!("a" in window)) { a = 1 } console.log(a); //1

          console.log(a); //报错,"ReferenceError: a is not defined."

    2. 函数声明提升

          定义函数有两种方式:一种是函数申明,另一种是函数表达式。函数申明形式:function functionName(arg0, arg1, arg2) { //函数体 },函数表达式形式:var functionName = function(arg0, arg1, arg2) { //函数体 } 。关于函数申明,它有一个重要特征就是函数声明提升,看下面的例子。

    sayHi();
    function sayHi() {
        console.log("hi");
    }

          浏览器中的调试结果如下: 发现函数sayHi已经被声明了,并且其值为sayHi函数。第一行代码执行后,输出hi。

     

          若采用函数表式的形式,此时我们能看到变量声明提升的效果。

    sayHi();
    var sayHi = function() {
        console.log("hi");
    }

          在浏览中的调试效果如下:发现变量sayHi提升了,它的值是undefined,第一行代码执行的话,会报错:"TypeError:undefined is not a function"。

          接下来的例子就很好理解。

          if(!("a" in window)) { var a = function() { window.a = 1; } } console.log(a); //undefined 该代码等价于: var a; if(!("a" in window)) { a = function() { window.a = 1; } } console.log(a); 其实无论if语句块中的a被定义成何种类型的值,a的申明都提前了。(变量提升)

          将上述代码变形如下:

          if(!("a" in window)) { function a() { window.a = 1; }} console.log(a); //function a() { window.a = 1;}(函数申明提升)

          由此可以总结出,所有函数声明也在范围作用域的顶部。那么函数声明和变量声明,哪个的优先级高呢?

    3. 变量声明 VS 函数声明

          如下图对比所示:函数声明会覆盖变量声明。

         VS      VS    

          但是如果在变量声明的同时,对变量进行初始化,情况会有所不同。对同一个变量名,声明变量同时初始化变量优先级高于函数

        VS      VS   

          再练几题:

    function a() { return false; }
    var s = '';
    if(a()) {
        var a = 1;
    }
    console.log(a);

          上述代码输出的a值为:function a() { return false; }

    function a() { return true; }
    var s = '';
    if(a()) {
        var a = 1;
    }
    console.log(a);

          上述代码输出的a值为:1

    function a() { return true; }
    var a;
    var s = '';
    if(a()) {
        a = 1;
    }
    console.log(a);

          上述代码输出的a值为:1

          由对上述代码的分析:可以总结出如下规律:

    1)变量声明提升变量申明在进入执行上下文就完成了。

          只要变量在代码中进行了声明,无论它在哪个位置上进行声明, js引擎都会将它的声明放在范围作用域的顶部;

    2)函数声明提升执行代码之前会先读取函数声明,意味着可以把函数申明放在调用它的语句后面。

          只要函数在代码中进行了声明,无论它在哪个位置上进行声明, js引擎都会将它的声明放在范围作用域的顶部;

    3)变量or函数声明函数声明会覆盖变量声明,但不会覆盖变量赋值。

          同一个名称标识a,即有变量声明var a,又有函数声明function a() {},不管二者声明的顺序,函数声明会覆盖变量声明,也就是说,此时a的值是声明的函数function a() {}。注意:如果在变量声明的同时初始化a,或是之后对a进行赋值,此时a的值变量的值。eg: var a; var c = 1; a = 1; function a() { return true; } console.log(a); //1

    时间:2014-10-17

    地点:合肥 

    参考:http://www.cnblogs.com/yexiaochai/archive/2013/04/22/3034949.html 

  • 相关阅读:
    小G的城堡
    最大公约数与扩展欧几里得算法
    阶乘的逆元
    素数的判断
    快速幂
    重载高精度运算符
    Hello World!
    【JavaScript】7-13 日K蜡烛图 (15分)
    【JavaScript】7-12 两个数的简单计算器 (10分)
    【JavaScript】7-11 分段计算居民水费 (10分)
  • 原文地址:https://www.cnblogs.com/sun-mile-rain/p/4029816.html
Copyright © 2011-2022 走看看