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 写类方式之六
Jul 05 Javascript
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
vue实现按钮切换图片
Jan 20 Vue.js
使用react-virtualized实现图片动态高度长列表的问题
May 28 Javascript
用JS写一个发布订阅模式
Nov 07 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连接Access数据库错误及解决方法
2013/06/20 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
校园创业策划书
2014/01/14 职场文书
高二英语教学反思
2014/01/19 职场文书
给学校建议书范文
2014/05/13 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
免职证明样本
2014/10/23 职场文书
英文导游词
2015/02/13 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
MySQL root密码的重置方法
2021/04/21 MySQL
Vue vee-validate插件的简单使用
2021/06/22 Vue.js