JavaScript变量提升和严格模式实例分析


Posted in Javascript onJanuary 27, 2019

本文实例讲述了JavaScript变量提升和严格模式。分享给大家供大家参考,具体如下:

1.什么是变量提升

所谓的变量提升指的是:函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体(作用域)的最顶部。

下面我们通过一个例子来详细说明一下。

//变量声明在使用之前
var x;
console.log(x);//undefined
//变量声明在使用之后
console.log(y);//undefined
var y;
//上面的式子可以写成下面的样子
/*
变量提升:把x,y提升到顶部
var x;
var y;
console.log(x);
console.log(y);
*/

从上面这个例子我们可以看到:

①变量的使用有两种形式,先声明再使用或者先使用后声明;

②无论是哪一种形式都不影响变量的使用,这是因为有变量提升的存在,每一个你定义的变量都会被提升到顶部,也就是函数最开始的部分,这就变成了你在使用变量时其实都已经声明变量了。

下面我举一个经典的例子来更好地理解一下。

//经典案例:window表示全局,判断条件(变量a是否有在全局下)是在变量a声明之前
if(a in window){
  var a;
  console.log('a in window');
}else{console.log('a not in window');}
//a in window
//相当于:
/*
var a; //a被提升到顶部
if(a in window){
  console.log('a in window');
}else{console.log('a not in window');}
*/

这是变量提升的一个很好的例子,可以看到打印出来的结果表明,在我们使用a之前,声明变量a就被提升到顶部。

但是,要注意的是JavaScript 只有声明的变量会提升,初始化的不会。

console.log(c);//undefined
var c = 1; //初始化
/*
var c;
console.log(c);
c = 1;
*/
var d;//声明d
d = 1;//初始化
console.log(d);//1

上面的c打印结果为undefined,这是因为提升的只有声明变量var c,而初始化的c=1没有提升而在使用之后。

为了避免上面出现的变量提升的问题,通常我们在每个作用域开始前声明我们要使用的变量。

2.严格模式

严格模式的写法就是在代码编写之前加上"use strict",严格模式要求你不能使用未声明的变量,否则会报错。

例如:

"use strict"; //严格模式
m =1;
console.log(m);//m is not defined
//在严格模式下,因为m未被声明就被使用或者初始化则会报错
var n = 1;
console.log(n);//1

但是在没有使用严格模式的时候:

m =1;
console.log(m);//1
//在非严格模式下,同样这样写就不会报错

虽然还是没有声明变量m但还是可以使用的。

所以,还是建议大家尽可能得使用严格模式来编写javascript代码,以消除Javascript语法的一些不合理、不严谨之处,让自己成为一个更优秀的程序员。

感兴趣的朋友还可以使用本站在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行结果。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript 兼容firefox的一些问题
May 21 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
回顾Javascript React基础
Jun 15 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 #Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 #Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 #Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 #Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 #Javascript
vue-cli构建vue项目的步骤详解
Jan 27 #Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 #Javascript
You might like
关于文本留言本的分页代码
2006/10/09 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
PHP反射实际应用示例
2019/04/03 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
Python实现的二维码生成小软件
2014/07/11 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
opencv与numpy的图像基本操作
2019/03/08 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
python PIL模块的基本使用
2020/09/29 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
优秀班集体先进事迹材料
2014/05/28 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
教师远程培训心得体会
2016/01/09 职场文书
python基于turtle绘制几何图形
2021/06/15 Python
Python实现制作销售数据可视化看板详解
2021/11/27 Python
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
我的收音机情缘
2022/04/05 无线电