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 相关文章推荐
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
js 通用订单代码
Dec 23 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
jQuery操作之效果详解
May 19 jQuery
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 Javascript
javascript Number 与 Math对象的介绍
Nov 17 Javascript
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从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
php实现word转html的方法
2016/01/22 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
Vue前后端不同端口的实现方法
2018/09/19 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
Python 多线程Threading初学教程
2017/08/22 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
蔬菜基地的创业计划书
2014/01/06 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
亮化工程实施方案
2014/03/17 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
疾病防治方案
2014/05/31 职场文书
同意转租证明
2015/06/24 职场文书
贷款担保书范本
2015/09/22 职场文书
2016年寒假见闻
2015/10/10 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫