了解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的智能提示插件一枚
Feb 18 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
vue之a-table中实现清空选中的数据
Nov 07 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
实用函数8
2007/11/08 PHP
php 一元分词算法
2009/11/30 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
Javascript学习笔记1 数据类型
2010/01/11 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
python计算对角线有理函数插值的方法
2015/05/07 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
探矿工程师自荐信
2014/01/24 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
求职信格式范文
2015/03/19 职场文书
2019感恩宣传标语!
2019/07/05 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python