了解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 相关文章推荐
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
AngularJS自动表单验证
Feb 01 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 Javascript
微信小程序实现可长按移动控件
Nov 01 Javascript
基于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实现的最大正向匹配算法示例
2017/12/19 PHP
PHP强制转化的形式整理
2020/05/22 PHP
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
在Python中使用成员运算符的示例
2015/05/13 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
Python:slice与indices的用法
2019/11/25 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
关于VPN
2012/06/10 面试题
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
大课间活动实施方案
2014/03/06 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
海弦WR-800F
2022/04/05 无线电
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers