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 研究心得 取得属性的值
Nov 30 Javascript
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
vue制作toast组件npm包示例代码
Oct 29 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
调频问题解答
2021/03/01 无线电
一个改进的UBB类
2006/10/09 PHP
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
python3让print输出不换行的方法
2020/08/24 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
学习党课思想汇报
2013/12/29 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
工伤调解协议书
2016/03/21 职场文书
公司周年庆寄语
2019/06/21 职场文书
基于Python实现射击小游戏的制作
2022/04/06 Python