Javascript中的变量使用说明


Posted in Javascript onMay 18, 2010

javascript中的所有变量都是类型松散的,不同于其他面向对象语音的变量声明都是强类型的.因此Javascript 的变量声明是不包括类型的。通过var关键字或者直接写变量名来声明一个变量,如:
var v = 1;
v=1;

这时有人可能会问,上述的两种声明有什么区别,为什 么会有这两种不同的声明方式,这就涉及到javascript中变量的作用域了。在javascript中,变量的作用域包括全局和函数级别的。

全局变量可以声明在函数体外,无论使用上述的哪种声明方式,在函数体外 声明的变量都是全局变量。如:

<script type="text/javascript" language="javascript"> 
var v = 1; function foo() 
{ 
alert(v); 
} 
w = 2; 
function bar() 
{ 
alert(w); 
} 
foo(); 
</script>

运行结果:1 2

另外,在函数内部声明的变量如果不使用var关键字,声明的变量也将是全局变量。如:

<script type="text/javascript" language="javascript"> 
function foo() 
{ 
v = 1; 
} foo(); 
alert(v); 
</script>

运行结果:1
但是需要注意,这种情况下,若要使用变量,必须先调用声明变量的函数对变量进行初始化, 如foo(),否则,将会出现“变量v未定义”的错误。

全局变量将作为window对象的属性存在,因为可以 通过window.$($表示变量名)访问。当然也可以通过变量名直接访问。下面会讲到为什么有这两种访问方式。

在函数内部通过var关键字声明的变量将是函数级别的变量,其作用域仅仅限于函数内部。如:

<script type="text/javascript" language="javascript"> 
function foo() 
{ 
var v=1; 
alert(v); 
} alert(v); 
</script>

运行结果:1 变量“v”未定义

通过上面的分析,可以发现关键字var主要作用 是定义函数级别的变量。

细心的朋友可以会问,如果在函数内部和外部定义了相同的变量,会是什么样的结果呢?如:

<script type="text/javascript" language="javascript"> 
var v=1; 
function foo() 
{ 
alert(v); 
var v=2; 
} foo(); 
</script>

运行结果:undefined
!!!!!也许有人会比较郁闷了,v明明白白的定义在函数foo()体外,为什么会是 undefined呢?这就涉及到javascript的解析了。根据经验,javascript对于函数体内变量的解析过程是:
搜索所有的 var关键字,将其变量声明放到函数体的最前面,赋值和使用仍然保持不变,这样,上面的javascript实际上是等同于:
<script type="text/javascript" language="javascript"> 
var v=1; 
function foo() 
{ 
var v; 
alert(v); 
v=2; 
} foo(); 
</script>

照此分析,产生上述 的结果就显而易见了,由于函数内部的变量的优先级高于全局变量的优先级(大部分的编程语言都是这样), 函数内部的变量v覆盖了全局变量v,但是由于在使用函数内部变量v时,它仅仅声明,但未赋值,因此结果是undefined。

如果在方法 体内仍然要使用定义的全局变量v,window对象此时派上大大的用场了,可以通过window.v来访问。如:

<script type="text/javascript" language="javascript"> 
var v=1; 
function foo() 
{ 
alert(window.v); 
alert(v); 
var v=2; 
} foo(); 
</script>

运行结果:2 undefined
Javascript 相关文章推荐
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
javascript定义函数的方法
Dec 06 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
Javascript实现的鼠标经过时播放声音
May 18 #Javascript
JavaScript 继承机制的实现(待续)
May 18 #Javascript
JavaScript 面向对象编程(2) 定义类
May 18 #Javascript
JavaScript 面向对象编程(1) 基础
May 18 #Javascript
Javascript Object.extend
May 18 #Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 #Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 #Javascript
You might like
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
apache php模块整合操作指南
2012/11/16 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
高级技校毕业生自荐信
2013/11/18 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
防震减灾主题班会
2015/08/14 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL