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 相关文章推荐
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
javascript继承之为什么要继承
Nov 10 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
js实现简单数字变动效果
Nov 06 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
JavaScript实现雪花飘落效果
Dec 27 Javascript
JavaScript控制台的更多功能
Apr 28 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
elgg 获取文件图标地址的方法
2010/03/20 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
Django的models中on_delete参数详解
2019/07/16 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
python反转列表的三种方式解析
2019/11/08 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
python 常见的反爬虫策略
2020/09/27 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
大学生个人简历中的自我评价
2013/12/27 职场文书
公司停电通知
2015/04/15 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
旗帜观后感
2015/06/08 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
Nginx反向代理、重定向
2022/04/13 Servers