深入理解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 相关文章推荐
css值转换成数值请抛弃parseInt
Oct 24 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 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
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
php中变量及部分适用方法
2008/03/27 PHP
php Smarty 字符比较代码
2011/02/27 PHP
PHP判断远程图片是否存在的几种方法
2014/05/04 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
php计算整个目录大小的方法
2015/06/19 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
python中有关时间日期格式转换问题
2019/12/25 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
三星印度官网:Samsung印度
2019/08/03 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
毕业生就业推荐信范文
2013/12/01 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
Redis 异步机制
2022/05/15 Redis