了解javascript中变量及函数的提升


Posted in Javascript onMay 27, 2019

javascript中变量以及函数的提升,在我们平时的项目中其实还是挺常用的,尤其是大型项目中,不知不觉就会顺手添加一些变量,而有时候自己的不小心就会酿成一些不必要错误,趁有时间整理一下自己对于js中变量及函数提升的理解。

首先,看一个题目:

console.log(a); // undefined
var a = 1;
console.log(a); // 1
console.log(b());
function b(){return 2;} // 2
console.log(c) //报错
let c = 4;
console.log(d()) // 报错 
var d = function(){return 3;} // 报错
(function(){
var m = n = 1;
})()
console.log(m) //报错
console.log(n) // 1

上面的实例对于javascript变量及函数提升的可谓是淋漓尽致...

一、javascript 变量的提升

-函数及变量的声明都将被提升到函数的最顶部

-变量可以在使用后声明,也就是变量可以先使用再声明

敲黑板,划重点,是变量的声明,声明,声明,当变量或函数已经初始化之后,就不会提升到函数的最顶部。这里上面的变量a已经初始化了,所以第一个console取不到变量a得值,为undefined;

注意:变量的提升只会提升到当前作用域下

二、javascript函数的提升

而函数b仅仅是先声明了一个函数方法,函数c是函数表达式无法提升,所以在严格模式下b=2;d报错

对于m,n,这里就涉及到javascript作用域的问题

首先,var m = n = 1的执行顺序是什么?并不是我们大多数人心中所想的连续赋值,javascript的赋值是从右向左的,而是 n=1;var m = n;很好,一目了然,在函数作用域内的变量m=n,n是全局变量,最后严格模式下输出结果,n=1,m报错;

三、关于es6两个关键字——let和const

let 声明的变量只在 let 命令所在的代码块内有效,不存在变量的提升

const 声明一个只读的常量,一旦声明,常量的值就不能改变。一旦声明必须初始化,否则就会报错

来个对比很明显的栗子(完美的体现出let命令只在代码块内有效的意思):

{
let test = 2;
var web = 'font';
}
console.log(test); // 报错
console.log(web); // font

再次回到上面的题目,c就是报错的

ES6 明确规定,代码块内如果存在 let 或者 const,代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内,在声明变量 PI 之前使用它会报错。

var PI = "a";
if(true){
console.log(PI); // 报错,即使函数外面全局声明了PI,但在代码块内还是会报错
const PI = "3.1415926";
}

以上,就是关于javascript中变量提升的理解。

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

Javascript 相关文章推荐
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
jQuery选择器实例应用
Jan 05 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
基于vue实现一个禅道主页拖拽效果
May 27 #Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 #jQuery
初学node.js中实现删除用户路由
May 27 #Javascript
jquery实现动态创建form并提交的方法示例
May 27 #jQuery
jquery实现动态改变css样式的方法分析
May 27 #jQuery
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 #Javascript
通过jQuery学习js类型判断的技巧
May 27 #jQuery
You might like
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
php常用正则函数实例小结
2016/12/29 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
让焦点自动跳转
2006/07/01 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
Python内置数据类型详解
2014/08/18 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
Python编程之string相关操作实例详解
2017/07/22 Python
python模拟事件触发机制详解
2018/01/19 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
python SOCKET编程基础入门
2021/02/27 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
"火柴棍式"程序员面试题
2014/03/16 面试题
2019年c语言经典面试题目
2016/08/17 面试题
全国优秀辅导员事迹材料
2014/05/14 职场文书
法制宣传标语
2014/06/23 职场文书
慰问信模板
2015/02/14 职场文书
初中军训感想
2015/08/07 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
Vue的过滤器你真了解吗
2022/02/24 Vue.js
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android
Python matplotlib绘制雷达图
2022/04/13 Python