深入理解JS中的变量及作用域、undefined与null

 更新时间:2014年03月04日 10:10:12   投稿:jingxian  
本篇文章主要是对JS中的变量及作用域、undefined与null进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助

1、Javascript变量作用域

javascript中,变量主要分为局部变量和全局变量两种,对应的作用域也是局部作用域和全局作用域。

1 局部变量和作用域
局部变量一般在函数体内部声明使用:

function func(){
  var i=12;//局部变量
  ......
}

局部变量的作用域在声明这个变量的函数体范围内使用。
局部变量的声明周期从函数被调用执行开始初始化,在函数调用执行完毕之后被销毁。

2、全局变量和作用域

全局变量一般在函数体外面声明:

var i=12;//全局变量
function func(){
  ......
}

还有一种没有声明而直接使用的变量,默认为全局变量:

function func(){
  i=12;//没有被声明(使用var 关键字声明),默认为全局变量
}

全局变量在当前页面中所有的脚本和方法中都可以使用,作用域为当前页面脚本中。
全局变量的声明周期在变量被初始化时被创建,在当前页面关闭的时候被销毁。

2、typeof关键字

typeof关键字主要用来检测变量的数据类型,JavaScript中主要的数据类型有string、number、Boolean、object等

console.log(typeof 'str');//string
console.log(typeof 23);//number
console.log(typeof false);//boolean
console.log(typeof [1,3,12]);//object
console.log(typeof {name:'jack',age:12});//object
console.log(typeof new Date());//object

注意: js中的数组、json对象都是object数据类型的

3、null和undefined

null和undefined在JavaScript中经常出现,表示一个变量的值为空或者是一个变量未被定义。在表示值的时候,都可以表示为空值,但是在数据类型方面还是不一样。

console.log(typeof null);//object
var persion = null;
console.log(persion);//null

console.log(typeof undefined);//undefined
var persion2;
console.log(persion2);//undefined

null的数据类型为object,undefined的数据类型就是undefined。
变量声明,值为null,变量值为null;变量只声明,没有赋值,值为undefined。
再看一组对比:

console.log(null==undefined);//true 值相等
console.log(null===undefined);//false  类型不相等

这就可以看出来,null和undefined的表示值的时候,都表示空;null的数据类型为object,undefined的数据类型就是undefined。只声明而没有初始化的值都是undefined。

下面是补充

Situation One

<script>
  var i; //全局变量
  //方法名是camel命名法
  //方法里面的变量是局部变量

  function sayHello(){
  var x=100;
  alert(x);
  x++;
  }
  sayHello(); //输出100
  alert(x); //报错,因为x是局部变量,访问不到
</script>

Situation Two

<script>
function sayHello(){
  var x=100;
  if(x==100){
    var y=x+1;
    alert(y); //输出101
  }
  alert(y); //也输出101,在方法内部,不存在块级作用域,在C#中就不可以了!!!

  for(var i=0;i<2;i++){
    alert(i)
  } //在for循环里面定义的变量是块级作用域
  alert(i); //因为i是局部变量,所以输出2

}
sayHello();
</script>

注:变量使用前可以不用var声明,这样的变量会被认为是“全局变量”,但很少这样用

关于undefined与null

有以下几种情况的,变量的值为undefined
1、变量定义,但没有赋值,则变量的值为undefined
2、调用的方法没有返回值,在返回的值为undefined
3、对象的属性值不存在,则返回值为undefined,如:document.ddd

Example1:

var xx;
var yy=null;

if(xx==yy){

  alert('相等');

}

else{

  alert('不等');
}

输出结果为相等,因为在进行if判断时,浏览器会对xx及yy进行值的判断,因为两者都没有具体的值,认为他们都是false。
如果if判断中换成===[全等于符号],则输出不等!因为===表示要求xx及yy的数据类型和值都要相同才可以!
 
Example2:

var xx=10
var yy='10';

if(xx==yy){

  alert('相等');
}

else{

  alert('不等');
}

输出相等,如果换成===,则输出不等

Example3:

var n='10';
switch(n){
  case 10:

    alert('数字');
  break;

  case '10':

    alert('字符串');
  break;
}

输出 字符串
switch中的判断要考虑类型

总结:if中的判断是判断数值,不考虑类型

相关文章

  • js实现图片上传预览原理分析

    js实现图片上传预览原理分析

    这篇文章主要为大家详细介绍了js实现图片上传预览的原理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 微信小程序input框中加入小图标的实现方法

    微信小程序input框中加入小图标的实现方法

    这篇文章主要介绍了微信小程序input框中加入小图标的实现方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • 深入了解JavaScript中的垃圾回收机制

    深入了解JavaScript中的垃圾回收机制

    JavaScript中的垃圾回收机制负责自动管理内存,回收不再使用的对象所占用的内存空间。本文主要介绍了JS中垃圾回收机制的相关知识,需要的可以参考一下
    2023-04-04
  • JavaScript+html5 canvas绘制的小人效果

    JavaScript+html5 canvas绘制的小人效果

    这篇文章主要介绍了JavaScript+html5 canvas绘制的小人效果,涉及JavaScript结合html5 canvas图形绘制及颜色随机填充的技巧,需要的朋友可以参考下
    2016-01-01
  • 使用layer.msg 时间设置不起作用的解决方法

    使用layer.msg 时间设置不起作用的解决方法

    今天小编就为大家分享一篇使用layer.msg 时间设置不起作用的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • javascript校验价格合法性实例(必须输入2位小数)

    javascript校验价格合法性实例(必须输入2位小数)

    这篇文章主要介绍了javascript校验价格合法性实例,其中价格必须是数字且必须输入2位小数,需要的朋友可以参考下
    2014-05-05
  • JS实现根据用户输入分钟进行倒计时功能

    JS实现根据用户输入分钟进行倒计时功能

    倒计时功能大家无论在各大网站都可以看到,今天小编给大家分享一段基于js实现的根据用户输入分钟进行倒计时功能,非常不错,需要的朋友参考下吧
    2016-11-11
  • 利用xlsx.js读取excel文件的详细过程

    利用xlsx.js读取excel文件的详细过程

    如果你需要在浏览器端处理Excel文件,那么xlsx.js可能是一个不错的选择,这篇文章主要介绍了利用xlsx.js读取excel文件的详细过程,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-04-04
  • JavaScript使用Fetch的方法详解

    JavaScript使用Fetch的方法详解

    Fetch API提供了一个JavaScript接口,用于访问和操纵HTTP管道的部分。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。本文将详解JS如何使用Fetch,感兴趣的可以学习一下
    2022-05-05
  • JavaScript实现一个带AI的井字棋游戏源码

    JavaScript实现一个带AI的井字棋游戏源码

    这篇文章主要介绍了基于JavaScript实现一个带AI的井字棋游戏源码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05

最新评论