JS变量提升及函数提升实例解析


Posted in Javascript onSeptember 03, 2020

1在js中只有两种作用域

a:全局作用域

b:函数作用域

在ES6之前,js是没有块级作用域。

首先来解释一下什么是没有块级作用域?

JS变量提升及函数提升实例解析

所以此时 是可以打印输出变量a的值。

2:什么是变量提升?

在我们的js中,代码的执行时分两步走的,1、预解析 2、一步一步执行

在预解析阶段:首先会在全局作用域内,js解析器会找所有的 var 、function 、参数,并提前到当前作用域的最顶上去(变量的赋值操作不会提前,还在原来的地方),此时并没有执行代码。

然后再开始一行一行执行代码。遇到了函数调用,于是进入到函数作用域内,又开始分两步骤走,1、预解析 2、一步一步执行。以此类推。

那么变量提升就是变量声明会被提升到作用域的最顶上去,也就是该变量不管是在作用域的哪个地方声明的,都会提升到作作用域的最顶上去。

即变量可以在声明之前使用,值为undefined。

JS变量提升及函数提升实例解析

那么上面这种写法其实等价于下面这种写法:

JS变量提升及函数提升实例解析

看几个例子:

JS变量提升及函数提升实例解析

把上面的例子稍作改动:

结果就会大不一样,

JS变量提升及函数提升实例解析

再看一个例子:

JS变量提升及函数提升实例解析

3:什么是函数提升?

JS变量提升及函数提升实例解析

输出的结果是:

JS变量提升及函数提升实例解析

注意:函数声明式,会将函数的声明和定义一起提升到作用域的最顶上去。

如果是这种写法:函数表达式声明的函数

JS变量提升及函数提升实例解析

例子:

JS变量提升及函数提升实例解析

输出的结果是:

JS变量提升及函数提升实例解析

最后的总结:

1:所有的声明都会提升到作用域的最顶上去。

2:同一个变量只会声明一次,其他的会被忽略掉。

3:函数声明的优先级高于变量申明的优先级,并且函数声明和函数定义的部分一起被提升。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 #Javascript
Vue js with语句原理及用法解析
Sep 03 #Javascript
Vue通过provide inject实现组件通信
Sep 03 #Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 #Javascript
Vue父组件监听子组件生命周期
Sep 03 #Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 #Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 #Javascript
You might like
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
javascript Math.random()随机数函数
2009/11/04 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
Python多线程原理与用法详解
2018/08/20 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
python 实现矩阵填充0的例子
2019/11/29 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
np.dot()函数的用法详解
2020/01/17 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
Django ORM filter() 的运用详解
2020/05/14 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
python tkinter实现连连看游戏
2020/11/16 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
华为c/c++笔试题
2016/01/25 面试题
教师节促销方案
2014/03/22 职场文书
公司承诺书怎么写
2014/05/24 职场文书
任命书标准格式
2015/03/02 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
初中政治教师教学反思
2016/02/23 职场文书