了解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 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
jquery自适应布局的简单实例
May 28 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
基于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中eclipse 用空格替换 tab键
2013/06/24 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
php发送邮件的问题详解
2015/06/22 PHP
关于php中一些字符串总结
2016/05/05 PHP
PHP递归算法的简单实例
2019/02/28 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
js实现小星星游戏
2020/03/23 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
python比较两个列表是否相等的方法
2015/07/28 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
Python修改DBF文件指定列
2020/12/19 Python
h5封装下拉刷新
2020/08/25 HTML / CSS
Linux机考试题
2015/07/17 面试题
八年级英语教学反思
2014/01/09 职场文书
家长写给老师的建议书
2014/03/13 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书