了解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 相关文章推荐
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
Vue进度条progressbar组件功能
Apr 17 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 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读取excel文件的简单实例
2013/08/26 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
php blowfish加密解密算法
2016/07/02 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
python实现的文件夹清理程序分享
2014/11/22 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
施工人员岗位职责
2013/12/12 职场文书
公务员转正考察材料
2014/02/07 职场文书
六查六看剖析材料
2014/02/15 职场文书
大型营销活动计划书
2014/04/28 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang