了解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 相关文章推荐
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
关于vue的列表图片选中打钩操作
Sep 09 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 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下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
python多线程用法实例详解
2015/01/15 Python
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
Python程序暂停的正常处理方法
2019/11/07 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
python如何更新包
2020/06/11 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
CSS3 分类菜单效果
2019/05/27 HTML / CSS
倡议书格式
2014/04/14 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
群众路线个人整改措施
2014/10/24 职场文书
店铺转让协议书
2014/12/02 职场文书
单位政审意见范文
2015/06/04 职场文书
素质拓展训练感想
2015/08/07 职场文书
mysql的单列多值存储实例详解
2022/04/05 MySQL