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 相关文章推荐
javascript indexOf函数使用说明
Jul 03 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
浅析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采集相关教程之一 CURL函数库
2010/02/15 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
react 生命周期实例分析
2020/05/18 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
python使用fork实现守护进程的方法
2017/11/16 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
Python中的类与类型示例详解
2019/07/10 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
草船借箭教学反思
2014/02/03 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
搞笑的获奖感言
2014/08/16 职场文书
债务纠纷委托书
2014/08/30 职场文书
大学生团员个人总结
2015/02/14 职场文书
小学生节水倡议书
2015/04/29 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
2016大学军训心得体会
2016/01/11 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript