了解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实现点击同时更改两个iframe的网址
Jul 01 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
javascript学习小结之prototype
Dec 03 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
Vue实现双向数据绑定
May 03 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 Javascript
基于JavaScript实现简单的轮播图
Mar 03 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
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Python学习笔记_数据排序方法
2014/05/22 Python
如何搜索查找并解决Django相关的问题
2014/06/30 Python
python3实现基于用户的协同过滤
2018/05/31 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
python实现按首字母分类查找功能
2019/10/31 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
《中彩那天》教学反思
2014/02/22 职场文书
读书小明星事迹材料
2014/05/03 职场文书
英文产品推荐信
2015/03/27 职场文书
入党群众意见范文
2015/06/02 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
python基于turtle绘制几何图形
2021/06/15 Python
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
Vue.Draggable实现交换位置
2022/04/07 Vue.js