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 面向对象编程基础:封装
Aug 21 Javascript
学习ExtJS form布局
Oct 08 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
checkbox勾选判断代码分析
Jun 11 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
小程序实现搜索框
Jun 19 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
JavaScript实现轮播图效果
Oct 30 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调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
php删除指定目录的方法
2015/04/03 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
全面了解js中的script标签
2016/07/04 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
Node.js开发第三方微信公众平台
2017/06/05 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
通信研究生自荐信
2014/02/01 职场文书
出生证明公证书
2014/04/09 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
关于读书的活动方案
2014/08/14 职场文书
交通安全横幅标语
2014/10/07 职场文书
开除员工通知
2015/04/22 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
python cv2图像质量压缩的算法示例
2021/06/04 Python