深入理解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中的判断是判断数值，不考虑类型