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 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
Javascript中For In语句用法实例
May 14 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 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 xml文件操作实现代码(二)
2009/03/20 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
javascript下function声明一些小结
2007/12/28 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
JavaScript实现更换背景图片
2019/10/18 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
Python和php通信乱码问题解决方法
2014/04/15 Python
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
python下MySQLdb用法实例分析
2015/06/08 Python
python中os模块详解
2016/10/14 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
Python3开发环境搭建详细教程
2020/06/18 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
印刷工程专业应届生求职信
2013/09/29 职场文书
焊接专业毕业生求职信
2013/10/01 职场文书
运动会解说词100字
2014/01/31 职场文书
委托书怎么写
2014/07/31 职场文书
农村文化活动总结
2014/08/28 职场文书
检讨书模板大全
2015/05/07 职场文书
党小组评议意见
2015/06/02 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js