深入理解JavaScript变量作用域、数据类型与null/undefined区别

作者:拾光时间:2026-10-27 23:09:39浏览:385

本文详细解析JavaScript中的变量作用域机制,区分局部变量与全局变量的声明方式及生命周期。重点探讨null与undefined在数据类型、赋值状态及比较运算中的差异,结合typeof关键字说明数组、对象等类型的判定规则,并通过代码示例演示==与===在类型转换上的不同表现,帮助开发者避免常见陷阱。

JavaScript变量作用域详解

1、Javascript变量作用域

在JavaScript中,变量主要划分为局部变量和全局变量两类,它们分别对应局部作用域和全局作用域的概念。

1 局部变量和作用域 局部变量通常在函数体内部进行声明和使用:


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

局部变量的作用范围仅限于声明该变量的函数体内部。其生命周期始于函数被调用并执行初始化时,结束于函数执行完毕后被销毁。

2、全局变量和作用域

全局变量通常在函数体外部进行声明:


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

此外,还存在一种未显式声明而直接使用的变量,这类变量默认被视为全局变量:


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

全局变量可以在当前页面中的所有脚本和方法中访问,其作用域覆盖当前页面的脚本范围。全局变量的生命周期从变量被初始化时开始创建,直到当前页面关闭时才被销毁。

typeof关键字与数据类型检测

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

需要注意的是,在JavaScript中,数组和JSON对象均属于object数据类型。

null与undefined的区别及比较

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中的判断主要关注数值,不考虑类型。

作者最新文章