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 相关文章推荐
jquery 新浪网易的评论块制作
Jul 01 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
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变量修饰符static的使用
2013/06/28 PHP
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
python实现比较两段文本不同之处的方法
2015/05/30 Python
Python基本语法经典教程
2016/03/11 Python
python实现多线程的两种方式
2016/05/22 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
Python错误处理操作示例
2018/07/18 Python
对Python中画图时候的线类型详解
2019/07/07 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
小学教师学期末自我评价
2013/09/25 职场文书
学生的自我鉴定范文
2013/10/24 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android