zoukankan      html  css  js  c++  java
  • 关于JS中变量提升的规则和原理的一点理解(二)

    上篇文章中讲到变量提升和函数提升的先后顺序时蒙了,后来去查了一下资料,特别整理一下。

    在《你不知道的JavaScript(上卷)》一书的第40页中写到:函数会首先被提升,然后才是变量

    书中的一个代码示例是:

    foo(); //1
    var foo;
    function foo() {
    	console.log(1);
    }	
    foo = function() {
    	console.log(2);
    }
    

    这个例子相对比较好理解,就是foo这个函数会先被声明再作用域的开始部分,实际上这个代码片段会被引擎理解为如下形式:

    function foo() {
    	console.log(1);
    }
    foo(); //1
    foo = function() {
    	console.log(2);
    }
    

    可是,当在网上看到这个一个例子时一开始我也是对运行结果不太理解的:

    console.log(foo);    // function foo(){...}
    function foo(){
        console.log("函数声明");
    }
    var foo = "变量";
    

    咋一看这段代码输出的应该是undefined啊,因为根据规则是先提升函数,然后才是变量,所以不应该是这样吗?

    function foo(){
        console.log("函数声明");
    }
    var foo = undefined;
    

    这个理解最大的一个误区在于变量提升时只是声明了变量,并没有赋值,也就是

    var foo;
    

    仅此而已!我们平时在这种声明之前打印变量之所以是undefined是因为只是声明了,其他地方并没有赋值,所以是undefined,像这样的:

    console.log(wanc);  //undefined
    var wanc = '66';
    

    可是在上面的例子中,变量和函数都是存在的,而且是先提升的函数foo,然后是声明变量var foo;声明变量的过程中并没有改变变量的值,所以最上面打印的还是函数foo;

    由此一个小问题引出的思考:有问题就要多查资料,包括网上的和书上的,对比不同人的理解,最终的目的就是要做到知其然并且知其所以然,加油!

    参考资料:

  • 相关阅读:
    多种方式实现数组的扁平化处理
    利用node中的内置模块fs实现对简单文件的读取 拷贝 创建等功能
    浅谈es5和es6中的继承
    js之冒泡排序与快速排序
    IE5,IE6,IE7,IE8的css兼容性列表[转自MSDN]
    css3 动画
    各种浏览器css hack
    解决li在ie,firefox中行高不一致问题
    Css:背景色透明,内容不透明之终极方法!兼容所有浏览器
    png-24在ie6中的几种透明方法
  • 原文地址:https://www.cnblogs.com/wancheng7/p/8324159.html
Copyright © 2011-2022 走看看