JavaScript的变量声明提升问题浅析(Hoisting)


Posted in Javascript onNovember 30, 2016

一、变量声明提升

      hoisting 英[‘hɔɪstɪŋ] 美[‘hɔɪstɪŋ]

      n. 起重,提升

      v. 把…吊起,升起( hoist的现在分词 )

先来看一个栗子

var cc = 'hello';
function foo(){
 console.log(cc);
 var cc = 'world';
 console.log(cc);
}
foo();
console.log(cc);

这里将会输出 undefined'world' 'hello'

此处主要有两个知识点:

      1、作用域

      2、变量声明提升

JavaScript是一门解释性语言,当代码在解释器(如Chrome的V8引擎)环境中执行时,会有一个预解析的过程,此时会将变量声明和函数声明提升至当前作用域的最前方,这个行为被称为声明提升(Hoisting)

再来看上面的例子,此代码有两层作用域,全局作用域和函数foo作用域,而foo中的变量声明在预解析的过程中会被提升至函数作用域的前方,于是代码就会变成这样:

var cc = 'hello';
function foo(){
 var cc;
 console.log(cc);
 cc = 'world';
 console.log(cc);
}
foo();
console.log(cc);

当执行到第一个log时,变量cc只是进行了声明,并未赋值,所以打印出的是undefined

二、 函数声明提升

函数的声明有两种方式:函数声明和函数表达式

// 函数声明
function foo(a, b) {
 return a + b;
}
// 函数表达式
var foo = function(a, b) {
 return a + b;
}

解析器在向执行环境中加载数据时,对函数声明和函数表达式并非一视同仁。解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问);至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解释执行。

当然,也可以函数声明和函数表达式同时使用,如var a = function b(){} ,其结果是只具有函数表达式的作用,b会被自动忽略,所以只会发生变量提升效果。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
Node.js插件安装图文教程
May 06 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
vue中使用input[type="file"]实现文件上传功能
Sep 10 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
浅析script标签中的defer与async属性
Nov 30 #Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 #Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 #Javascript
html判断当前页面是否在iframe中的实例
Nov 30 #Javascript
vue.js实现表格合并示例代码
Nov 30 #Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 #Javascript
Javascript 闭包详解及实例代码
Nov 30 #Javascript
You might like
PHP生成静态页
2006/11/25 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
基于php下载文件的详解
2013/06/02 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
vue 更改连接后台的api示例
2019/11/11 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
python实现sublime3的less编译插件示例
2014/04/27 Python
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
python tkinter canvas使用实例
2019/11/04 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
民主评议党员工作总结
2014/10/20 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
员工给公司的建议书
2019/06/24 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
使用Python开发冰球小游戏
2022/04/30 Python