JavaScript变量提升和严格模式实例分析

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行结果。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

(0)

相关推荐

  • JavaScript中的回调函数实例讲解

    在JS中,函数可以作为参数传递给函数,不止可以传递值或者对象,案例如下: 定义: /** *@project: data_overnance *@package: *@date:2018/11/30 0030 15:07 *@author 郭宝 *@brief: 回调函数 */ export default class Person { constructor(){ } /** * 设置名称 * @param nameCallback 传入回调函数 */ setName(nameCallback

  • JavaScript之解构赋值的理解

    1. ES6的新特性 允许将对象或者数组'分解'成多个单独的值, 以对象的解构开始. 代码示例 2. 说明 1).  定义一个对象 const obj={b:2,c:3,d:4}; 此时系统中没有变量b, 变量c与变量d 2). 开始解构该对象, const {a,b,c} = obj 这句话的意思是, 定义a,b,c三个变量, 然后在obj对象中寻找a,b,c变量, 如果找到, 则赋值给对应的变量 所以, a, 已定义, 但是未赋值. 定义是在const{a,b,c}中定义的, 而没有在obj

  • JavaScript动态创建二维数组的方法示例

    本文实例讲述了JavaScript动态创建二维数组的方法.分享给大家供大家参考,具体如下: 学过C语言的我太耿直 一般这种情况下我会直接 var arr = new Array[10][10]; 但是不出意外的话这样是会报错的,因为在js中根本没有这样的语法 在这之前,让我们先来回顾一下js中是怎么样创建一维数组的: 使用数组直接量,这个是最简单的,在方括号内将数组元素用逗号隔开即可: var arr = [ ]; //空数组 var s = [1,2,3,4]; //4个元素的数组 var n

  • JavaScript对JSON数组简单排序操作示例

    本文实例讲述了JavaScript对JSON数组简单排序操作.分享给大家供大家参考,具体如下: 我们经常回使用到数据格式 var arr=[{num:1},{num:3},{num:2}] 如何根据数组里面的JSON数据的某个key进行排序 javascript有一个sort()方法,直接通过 arr.sort()进行排序,默认只对数组的值进行排序,然而以上的数组的值却是个JSON格式的. 我们在看看sort方法的定义: 定义和用法 sort() 方法用于对数组的元素进行排序. 语法 array

  • 谈谈JavaScript中super(props)的重要性

    我听说 Hooks 最近很火.讽刺的是,我想用一些关于 class 组件的有趣故事来开始这篇文章.你觉得如何? 本文中这些坑对于你正常使用 React 并不是很重要. 但是假如你想更深入的了解它的运作方式,就会发现实际上它们很有趣. 开始第一个. 首先在我的职业生涯中写过的super(props) 自己都记不清: class Checkbox extends React.Component { constructor(props) { super(props); this.state = { i

  • 深入探讨JavaScript的最基本部分之执行上下文

    在这篇文章中,我将深入探讨JavaScript的最基本部分之一,即Execution Context(执行上下文). 在本文结束时,你应该对解释器了解得更清楚:为什么在声明它们之前可以使用某些函数或变量?以及它们的值是如何确定的? 什么是执行上下文? JavaScript的执行环境非常重要,当JavaScript代码在行时,会被预处理为以下情况之一: Global code - 首次执行代码的默认环境. Function code - 每当执行流程进入函数体时. Eval code - 要在ev

  • JavaScript中.min.js和.js文件的区别讲解

    Q&A Q: .js和.min.js文件分别是什么? A: .js是JavaScript 源码文件, .min.js是压缩版的js文件. Q:为什么要压缩为.min.js文件? 减小体积  .min.js文件经过压缩,相对编译前的js文件体积较小,传输效率快. 防止窥视和窃取源代码  经过编码将变量和函数原命名改为毫无意义的命名,以防止他人窥视和窃取 js 源代码 Q:.js 和.min.js文件的优缺点? .js文件:   优点: 可读性较好,易于debug和更改.   缺点:体积较大,传输时

  • JavaScript两种计时器的实例讲解

    通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.我们称之为计时事件.提供了两种计时器的方法如下: window.setInterval(): 这个方法就是在一个周期内反复执行一直到窗口关闭或者 clearInterval() window.setTimeout(); 延迟执行内容 setInterval()的使用方法: setInterval(code,millisec); code:可以是方法名,如果是方法不要加小括号.同时也可以

  • JavaScript常用工具方法封装

    因为工作中经常用到这些方法,所有便把这些方法进行了总结. JavaScript 1. type 类型判断 isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String' } isNumber (o) { //是否数字 return Object.prototype.toString.call(o).slice(8, -1) === 'Number' } isBoolean (o)

  • Javascript迭代、递推、穷举、递归常用算法实例讲解

    累加和累积 累加:将一系列的数据加到一个变量里面.最后的得到累加的结果 比如:将1到100的数求累加和 小球从高处落下,每次返回到原来一半,求第十次小球落地时小球走过的路程 <script> var h=100; var s=0; for(var i=0;i<10;i++){ h=h/2; s+=h; } s=s*2+100; </script> 累积:将一系列的数据乘积到一个变量里面,得到累积的结果. 常见的就是n的阶乘 var n=100; var result= 1;

随机推荐