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算法学习(直接插入排序)
Apr 12 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
js实现模拟购物商城案例
May 18 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
php无限极分类递归排序实现方法
2014/11/11 PHP
php实现的通用图片处理类
2015/03/24 PHP
php curl发送请求实例方法
2019/08/01 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
运动会通讯稿300字
2014/02/02 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
防沙治沙典型材料
2014/05/07 职场文书
地球上的星星观后感
2015/06/02 职场文书
竞聘书的秘诀
2019/04/02 职场文书
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python
MySQL存储过程及语法详解
2022/08/05 MySQL
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL