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实现存储HTML字符串示例
Apr 21 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
React路由管理之React Router总结
May 10 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
微信小程序input抖动问题的修复方法
Mar 03 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
模仿OSO的论坛(五)
2006/10/09 PHP
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
python的re模块应用实例
2014/09/26 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
详解supervisor使用教程
2017/11/21 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
python中使用while循环的实例
2019/08/05 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
小学评语大全
2014/04/22 职场文书
公司承诺书怎么写
2014/05/24 职场文书
Java基础——Map集合
2022/04/01 Java/Android