了解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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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 PDOStatement::bindValue讲解
2019/01/30 PHP
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
jquery下json数组的操作实现代码
2010/08/09 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
Javascript中的 “&” 和 “|” 详解
2017/02/02 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
Python的动态重新封装的教程
2015/04/11 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python列表切片用法示例
2017/04/19 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
python实现单链表的方法示例
2019/09/03 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
python爬虫基础之urllib的使用
2020/12/31 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
英国在线花园中心:You Garden
2018/06/03 全球购物
小学社会实践活动总结
2014/07/03 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
实习生矿工检讨书
2014/10/13 职场文书
家长高考寄语
2015/02/27 职场文书
爱的教育读书笔记
2015/06/26 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
XX部保密工作制度范本
2019/08/27 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python
Nginx利用Logrotate实现日志分割
2022/05/20 Servers