对javascript变量提升跟函数提升的理解
在写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变量提升跟函数提升的理解的更多相关文章
- JavaScript系列文章:变量提升和函数提升
第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...
- JavaScript:变量提升和函数提升
第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...
- 谈谈javascript中的变量提升还有函数提升
在很多面试题中,经常会看到关于变量提升,还有函数提升的题目,所以我就写一篇自己理解之后的随笔,方便之后的查阅和复习. 首先举个例子 foo();//undefined function foo(){ ...
- JavaScript: 变量提升和函数提升
第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...
- JS 变量提升与函数提升
JS 变量提升与函数提升 JS变量提升 变量提升是指:使用var声明变量时,JS会将变量提升到所处作用域的顶部.举个简单的例子: 示例1 console.log(foo); // undefined ...
- JS——变量提升和函数提升
一.引入 在了解这个知识点之前,我们先来看看下面的代码,控制台都会输出什么 var foo = 1; function bar() { if (!foo) { var foo = 10; } aler ...
- js中变量提升和函数提升
变量提升和函数提升的总结 我们在学习JavaScript时,会遇到变量提升和函数提升的问题,为了理清这个问题,现做总结如下,希望对初学者能有所帮助 我们都知道 var 声明的变量有变量提升,而 let ...
- ES6-LET,变量提升,函数提升
1:let命令 ①类似var,但只在let所在代码块内有效 ②不存在变量提升 ③暂时性死区(TDZ)—有let命令时,在此命令前都没法使用此变量 ④不允许重复声明 ⑤ES6允许块级作用域任意嵌套 ⑥E ...
- js变量提升与函数提升的详细过程
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- Linux-Nginx和NFS
1 虚拟化 查看系统信息 cat /proc/meninfo cat /proc/cpuinfo 其中 flags里面的信息可以查看该cpu是否支持虚拟化 flags上有vmx svm等表示可以虚拟化 ...
- [ZJOI 2010] 排列计数
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2111 [算法] 一种比较好的理解方式是将该序列看成是一棵堆式存储的二叉树 那么问题转 ...
- bzoj3836
状压dp 图上怎么跑dp?我们跑三进制状压dp,0表示选了,1表示既没选也没覆盖,2表示没选但是被覆盖了. 状态是dp[dep][S]表示当前走到了深度为dep的节点,状态为S,按照dfs序转移 每次 ...
- android项目源码
[置顶] Android精品开源项目整理_V20140221(持续更新中..) 让我们回顾下2013年有哪些精品资源:Android精品开源项目整理_V20131115(持续更新中..) 引言: ...
- python_re函数
1,贪婪和非贪婪模式 重复运算符默认是贪婪的,即会进行尽可能多的匹配 代码示例: >>> import re >>> emphasis_pattern = re.c ...
- awk用法总结
简介 awk的命名来自于他的三位创始人Alfred Aho .Peter Weinberger 和 Brian Kernighan 的姓氏的首字母. 有多种版本:New awk(nawk),GNU a ...
- ASP.NET中的几种弹出框提示基本方法
NET程序的开发过程中,常常需要和用户进行信息交互,对话框的出现将解决了这些问题,下面是本人对常用对话框使用的小结,希望对大家有所帮助 我们在.NET程序的开发过程中,常常需要和用户进行信息交互,比如 ...
- 通过HTTP请求WEBAPI的方式
平时工作中长期需要用到通过HTTP调用API进行数据获取以及文件上传下载(C#,JAVA...都会用到).这里获取的是包括网页的所有信息.如果单纯需要某些数据内容.可以自己构造函数甄别抠除出来!一般的 ...
- C/C++函数调用过程分析
http://www.cnblogs.com/biyeymyhjob/archive/2012/07/20/2601204.html 这里以一个简单的C语言代码为例,来分析函数调用过程 代码: #in ...
- 进击python第一篇:相遇
1.第一句Python代码 在 当前目录下创建 hello.py 文件,内容如下: print "hello,world!" 执行 hello.py 文件,即: python he ...