在写javascript代码的时候,经常会碰到一些奇怪的问题,例如:

console.log(typeof hello);
var hello = 123;//变量
function hello(){//函数声明 }
console.log(typeof hello);
var hello = function(){//函数表达式
}
console.log(typeof hello);
//function number function

对于为什么会是这样的一个结果:function number function  很多人可能会抱着一种疑问的态度,为什么不是 undefined  function function ?

在上面的代码中其实就涉及到了变量提升函数提升这个概念,在javascript引擎中,对于javascript代码的解析并不是从上往下,逐行进行解析的,而是以代码块进行解析:

在相同作用域下,首先是将声明函数提升到代码的最顶端,其次就是变量提升,最后就是函数表达式,上述代码在javascript引擎中的解析就是可以看成如下:


function hello(){//函数声明

}
console.log(typeof hello);//function
var hello;
hello = 123;
console.log(typeof hello);//number
var hello;
hello = function(){}
console.log(typeof hello);//function //function number function
var hello = 123;的解析是先对变量hello进行定义,var hello;然后再给变量赋值,这里的var hello 就是对变量的一个提升。如:
console.log(typeof hello);//undefined
var hello = 123;
console.log(typeof hello);//number //这里的变量hello被声明到作用域的顶端

常见的例子还有:

var hello = 123;
function test(){
  console.log(hello);//undefined
  var hello = 'haha';
  console.log(hello);//haha
}
test();
console.log(hello);//123
//undefined haha 123

在test函数的作用域下,由于hello 变量被提升,所以第一个console.log(hello);打印的就是undefined,第二个console.log(hello);打印的就是haha

最终结果就是 undefined haha 123

对javascript变量提升跟函数提升的理解的更多相关文章

  1. JavaScript系列文章:变量提升和函数提升

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...

  2. JavaScript:变量提升和函数提升

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...

  3. 谈谈javascript中的变量提升还有函数提升

    在很多面试题中,经常会看到关于变量提升,还有函数提升的题目,所以我就写一篇自己理解之后的随笔,方便之后的查阅和复习. 首先举个例子 foo();//undefined function foo(){ ...

  4. JavaScript: 变量提升和函数提升

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...

  5. JS 变量提升与函数提升

    JS 变量提升与函数提升 JS变量提升 变量提升是指:使用var声明变量时,JS会将变量提升到所处作用域的顶部.举个简单的例子: 示例1 console.log(foo); // undefined ...

  6. JS——变量提升和函数提升

    一.引入 在了解这个知识点之前,我们先来看看下面的代码,控制台都会输出什么 var foo = 1; function bar() { if (!foo) { var foo = 10; } aler ...

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

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

  8. ES6-LET,变量提升,函数提升

    1:let命令 ①类似var,但只在let所在代码块内有效 ②不存在变量提升 ③暂时性死区(TDZ)—有let命令时,在此命令前都没法使用此变量 ④不允许重复声明 ⑤ES6允许块级作用域任意嵌套 ⑥E ...

  9. js变量提升与函数提升的详细过程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. nyoj 269 VF

    VF 时间限制:1000 ms  |  内存限制:65535 KB 链接:NYOJ269 原创在:点击打开链接 题意:1-1000000000之间,各位数字之和等于给定s的数的个数. 每行给出一个数s ...

  2. Java中String args[]起什么作用?

    在百度知道上看到这样一个答案: 在命令提示符中运行该程序时 可以附加参数运行 输入的参数会存入到字符传数组 args[]中例如:在命令提示符中运行该程序的时候假设该程序在D的JAVA文件夹中D:JAV ...

  3. SDOI2017 Round1 Day2 题解

    T2好厉害啊……AK不了啦……不过要是SCOI考这套题就好了240保底. BZOJ4819 新生舞会 模板题,分数规划+二分图最大权匹配. 费用流跑得过,可以不用KM. UPD:分数规划用迭代跑得飞快 ...

  4. [SHOI 2007] 善意的投票

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1934 [算法] 首先 , 选择睡觉的人和不选择睡觉的人构成两个集合 这启发我们用最小 ...

  5. poj2226Muddy Fields——二分图匹配

    题目:http://poj.org/problem?id=2226 把行连通块作为左部点,列连通块作为右部点,行列连通块有相交的格子就连边: 则问题转化为求最小点覆盖,即最大匹配. 代码如下: #in ...

  6. 增加,删除GMS包

    1. device/hiteq/vtab_1050_standard/httek.mk BUILD_GMS:=yes GMS_VARIANT:=mini 2. rm out/target/produc ...

  7. JAVA 需要理解的重点 二

    1.常用设计模式 单例模式:懒汉式.饿汉式.双重校验锁.静态加载,内部类加载.枚举类加载.保证一个类仅有一个实例,并提供一个访问它的全局访问点. 代理模式:动态代理和静态代理,什么时候使用动态代理. ...

  8. mysql : mysql 5.6.13 免安装版配置

    前言:真正用到mysql是在公司的第二个项目下,具体的一些在之前的博客文章(http://www.cnblogs.com/zhengzeze/p/5623440.html)中也提到了,其中涉及到,免安 ...

  9. java集合框架之Collection

    参考http://how2j.cn/k/collection/collection-collection/366.html Collection是 Set List Queue和 Deque的接口Qu ...

  10. JSON 下 -- jansson 示例

    JSON 下 —— jansson 示例 参考网址: jansson 库的下载: http://www.digip.org/jansson/ 安装jansson 步骤: http://blog.csd ...