深入理解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 相关文章推荐
jquery 学习之二 属性(类)
Nov 25 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
12个提高JavaScript技能的概念(小结)
May 09 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
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 object转数组示例
2014/01/15 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
python optparse模块使用实例
2015/04/09 Python
使用Python生成url短链接的方法
2015/05/04 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
Python3常见函数range()用法详解
2019/12/30 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
小学二年级评语
2014/04/21 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
文言文辞职信
2015/02/28 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
用php如何解决大文件分片上传问题
2021/07/07 PHP
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js
python热力图实现的完整实例
2022/06/25 Python