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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
微信小程序文章详情功能完整实例
Jun 03 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 Token(令牌)设计
2008/03/15 PHP
PHP array 的加法操作代码
2010/07/24 PHP
php里array_work用法实例分析
2015/07/13 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
Python实用日期时间处理方法汇总
2015/05/09 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
实例讲解Python3中abs()函数
2019/02/19 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
经典商业广告词
2014/03/13 职场文书
给学校的建议书范文
2014/05/15 职场文书
七一慰问简报
2015/07/20 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis