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


Posted in Javascript onMarch 04, 2014

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中的判断是判断数值,不考虑类型

Javascript 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
Vue实现根据hash高亮选项卡
May 27 Javascript
原生JavaScript实现轮播图
Jan 10 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 #Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 #Javascript
js判断url是否有效的两种方法
Mar 04 #Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 #Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 #Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 #Javascript
js实现文本框中焦点在最后位置
Mar 04 #Javascript
You might like
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
Zend Guard一些常见问题解答
2008/09/11 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
python交互式图形编程实例(一)
2017/11/17 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
2014学年自我鉴定
2014/02/23 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
出国留学导师推荐信
2015/03/26 职场文书