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 查找iframe父级页面元素的实现代码
Aug 28 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
超详细动手搭建一个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显示MySQL数据的三种方法
2008/06/05 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
jquery获取radio值实例
2014/10/16 Javascript
js查找节点的方法小结
2015/01/13 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
JavaScript实现随机五位数验证码
2019/09/27 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
在Python中使用模块的教程
2015/04/27 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
python绘制立方体的方法
2018/07/02 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
python烟花效果的代码实例
2020/02/25 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
艺术专业大学生自我评价
2013/09/22 职场文书
《将心比心》教学反思
2014/04/08 职场文书
演讲比赛策划方案
2014/06/11 职场文书
音乐教师求职信范文
2015/03/20 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
Java对文件的读写操作方法
2022/04/29 Java/Android