了解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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
Javascript执行流程细节原理解析
May 14 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生成缩略图的类代码
2008/10/02 PHP
php生成随机密码的三种方法小结
2010/09/04 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
JavaScript指定断点操作实例教程
2018/09/18 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
Python单链表简单实现代码
2016/04/27 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
Python插件机制实现详解
2020/05/04 Python
python和php学习哪个更有发展
2020/06/17 Python
如何用Python徒手写线性回归
2021/01/25 Python
标准离婚协议书范文下载
2014/11/30 职场文书
撤诉书怎么写
2015/05/19 职场文书
微观世界观后感
2015/06/10 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏