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

在《你不知道的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;

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

参考资料:

关于JS中变量提升的规则和原理的一点理解(二)的更多相关文章

  1. 关于JS中变量提升的规则和原理的一点理解

        关于变量提升,以前在一些教程和书籍上都听到过,平时开发中也知道有这个规律,但是今天突然在一个公开课中听到时,第一反应时一脸懵逼,然后一百度,瞬间觉得好熟悉啊,差点被这个概念给唬住了,不信我给你 ...

  2. js中变量提升(一个是变量,一个是函数表达式都会存在变量提升,函数声明不存在)

    一.变量提升 在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域.变量提升即将变量声明提升到它所在作用域的最开始的部分.上个简历的例子如: ...

  3. js中变量提升和函数提升

    变量提升和函数提升的总结 我们在学习JavaScript时,会遇到变量提升和函数提升的问题,为了理清这个问题,现做总结如下,希望对初学者能有所帮助 我们都知道 var 声明的变量有变量提升,而 let ...

  4. 深入理解js的变量提升和函数提升

    一.变量提升 在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域.变量提升即将变量声明提升到它所在作用域的最开始的部分.上个简历的例子如: ...

  5. JavaScript中变量提升是语言设计缺陷

    首先纠正下,文章标题里的 “变量提升” 名词是随大流叫法,“变量提升” 改为 “标识符提升” 更准确.因为变量一般指使用 var 声明的标识符,JS 里使用 function 声明的标识符也存在提升( ...

  6. 深入理解js的变量提升和函数提升(转)

    一.变量提升 在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域.变量提升即将变量声明提升到它所在作用域的最开始的部分.上个简历的例子如: ...

  7. js中变量的声明

    大家都知道js中变量的声明是要提前的,下面有4个样例: 1.if(!"t" in window){  var t = 1; }       alert(t);答案是undefine ...

  8. php面试专题---1、php中变量存储及引用的原理

    php面试专题---1.php中变量存储及引用的原理 一.总结 一句话总结: 查看变量的存储结构可以安装xdebug扩展,用xdebug_debug_zval()方法,不推荐使用memory_get_ ...

  9. js中call和apply的实现原理

    js中call和apply的实现原理            实现call的思路: /* 还有就是call方法是放在Function().prototype上的也就是构造函数才有的call方法 (我门可 ...

随机推荐

  1. 《编程珠玑(第2版)》【PDF】下载

    <编程珠玑(第2版)>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382225 内容简介 书的内容围绕程序设计人员面对的一系列实 ...

  2. 排查程序死循环,死锁的方法 ——pstack

    pstack命令可显示每个进程的栈跟踪,pstack $pid即可,pstack命令须由$pid进程的属主或者root运行. 这次出现cpu占比100%的情况,但看memory占比,并无异常,怀疑是某 ...

  3. spring boot入门 -- 介绍和第一个例子

    "越来越多的企业选择使用spring boot 开发系统,spring boot牛在什么地方?难不难学?心动不如行动,让我们一起开始学习吧!" 使用Spring boot ,可以轻 ...

  4. java递归实现文件夹文件的遍历输出

    学习java后对一个面试小题(今年年初在团结湖面试的一个题目) 的习题的编写. ''给你一个文件,判断这个文件是否是目录,是目录则输入当前目录文件的个数和路径,''' /** * @author li ...

  5. 顶点/片元 shader 总结

    Cg顶点程序必须在结构中传递顶点数据.几种常用的顶点结构定义在文件UnityCG.cginc中,有如下三种结构体: 1.appdata_base: 包含顶点位置,法线和一个纹理坐标.2.appdata ...

  6. Q:记学习枚举过程中的一个小问题

    在学习有关java枚举的时候,我们知道了所有的枚举类型均是继承自java.lang.Enum类的,且所有的枚举常量均是该枚举类型的一个对象,且对象名即为该枚举常量的名称.例子如下:源码: public ...

  7. KandQ:单例模式的七种写法及其相关问题解析

    设计模式中的单例模式可以有7种写法,这7种写法有各自的优点和缺点: 代码示例(java)及其分析如下: 一.懒汉式 public class Singleton { private static Si ...

  8. C#语言和SQL Server第十章笔记

    第十章 :使用关键字模糊查询 笔记 一:使用关键字 :LIKE  BETWEEN  IN进行模糊查询 通配符:  一类字符,代替一个或多个真正的字符 与LIKE关键字一起使用 通配符: 解释 实例 符 ...

  9. 本地Git仓库同步到Bitbucket 远程Git仓库

    转载自:http://blog.csdn.net/lue2009/article/details/46553829 本地仓库内容可以和多个远程仓库同步,本地仓库出问题或者远程仓库其中一个有问题,那么剩 ...

  10. 快速开发基于 HTML5 网络拓扑图应用1

    今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D ...