不错的JS中变量相关的细节分析


Posted in Javascript onAugust 13, 2007

这里讨论一下我对Javascript中变量相关细节的认识,有不当之处欢迎来批。

一、变量的类型

Javascript和Java、C这些语言不同,它是一种无类型、弱检测的语言。它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量。例如:

i=100;//Number类型
i="variable";//String类型
i={x:4};//Object类型
i=[1,2,3];//Array类型

JS的这种特性虽然让我们的编码更加灵活,但也带来了一个弊端,不利于Debug,编译器的弱检测让我们维护冗长的代码时相当痛苦。

二、变量的声明

JS中变量申明分显式申明和隐式申明。

var i=100;//显式申明
i=100;//隐式申明

在函数中使用var关键字进行显式申明的变量是做为局部变量,而没有用var关键字,使用直接赋值方式声明的是全局变量。

 

当我们使用访问一个没有声明的变量时,JS会报错。而当我们给一个没有声明的变量赋值时,JS不会报错,相反它会认为我们是要隐式申明一个全局变量,这一点一定要注意。

三、全局变量和局部变量

当JS解析器执行时,首先就会在执行环境里构建一个全局对象,我们定义的全局属性就是做为该对象的属性读取,在顶层代码中我们使用this关键字和window对象都可以访问到它。而函数体中的局部变量只在函数执行时生成的调用对象中存在,函数执行完毕时局部变量即刻销毁。因此在程序设计中我们需要考虑如何合理声明变量,这样既减小了不必要的内存开销,同时能很大程度地避免变量重复定义而覆盖先前定义的变量所造成的Debug麻烦。

四、变量作用域

任何程序语言中变量的作用域都是一个很关键的细节。JS中变量的作用域相对与JAVA、C这类语言显得更自由,一个很大的特征就是JS变量没有块级作用域,函数中的变量在整个函数都中有效,运行下面代码:

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
//定义一个输出函数
function outPut(s){
document.writeln(s)
}
//全局变量
var i=0;
//定义外部函数
function outer(){
//访问全局变量
outPut(i); // 0
//定义一个类部函数
function inner(){
//定义局部变量
var i = 1;
// i=1; 如果用隐式申明 那么就覆盖了全局变量i
outPut(i); //1
}
inner();
outPut(i); //0
}
outer();
</SCRIPT>

输出结果为0 1 0,从上面就可以证明JS如果用var在函数体中声明变量,那么此变量在且只在该函数体内有效,函数运行结束时,本地变量即可销毁了。

由于上面的这个JS特性,还有一个关键的问题需要注意。此前一直使用ActionScript,虽然它和JS都是基于ECMA标准的,但在这里还是略有不同的。例如下面代码:

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
//定义一个输出函数
function outPut(s){
document.writeln(s)
}
//全局变量
var i=0;
//定义外部函数
function outer(){
//访问全局变量
outPut(i); // 0
//定义一个类部函数
function inner(){
outPut(i); //undefiend
var i=1;
outPut(i); //1
}
inner();
outPut(i); //0
}
outer();
</SCRIPT>

你可能认为输出结果是0 0 1 0,事实上在AS中确实是这样的,而在JS中的输入却是0 undefined 1 0,为何会这样了?刚才我们说到了JS函数体中声明的本地变量在整个函数中都有效,因此在上面代码中var i = 1 ;在inner函数中都有效,实际上显式声明的变量i是在预编译时就已经编译到调用对象中了,不同于隐式声明变量在解释时才被定义为全局变量,只是在调用outPut(i)时,还没有将它初始化变量,此时的本地变量i是未赋值变量,而不是未定义变量,因此输出了undefined。上面的代码等效于下面代码:

function inner(){
var i; //定义但不赋值
outPut(i); //undefiend
i=1;
outPut(i); //1
}

为了避免上面的这类问题,因此在函数开始位置集中做函数声明是一个极力推荐的做法。

五、基本类型和引用类型

JS不同于JAVA、C这些语言,在变量申明时并不需要声明变量的存储空间。变量中所存储的数据可以分为两类:基本类型和引用类型。其中数值、布尔值、null和undefined属于基本类型,对象、数组和函数属于引用类型。

基本类型在内存中具有固定的内存大小。例如:数值型在内存中占有八个字节,布尔值只占有一个字节。对于引用型数据,他们可以具有任意长度,因此他们的内存大小是不定的,因此变量中存储的实际上是对此数据的引用,通常是内存地址或者指针,通过它们我们可以找到这个数据。

引用类型和基本类型在使用行为上也有不同之处:

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
//定义一个输出函数
function outPut(s){
document.writeln(s)
}
var a = 3;
var b = a;
outPut(b);
//3
a = 4;
outPut(a);
//4
outPut(b);
//3
</SCRIPT>

对基本类型b进行赋值时,实际上是又开辟了一块内存空间,因此改变变量a的值对变量b没有任何影响。

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
//定义一个输出函数
function outPut(s){
document.writeln(s)
}
var a_array = [1,2,3];
var b_array = a_array;
outPut(b_array); //1,2,3 
a_array[3] = 4;
outPut(b_array);//1,2,3,4
</SCRIPT>

上面是对引用类型的变量赋值,实际上他们传递的是对内存地址的引用,因此对a_array和b_array的存取,实际上都是操作的同一块内存区域。如果希望重新分配内存空间存储引用型变量,那么我就需要使用克隆方法或者自定义方法来复制引用变量的数据。

Javascript 相关文章推荐
Ext 今日学习总结
Sep 19 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 #Javascript
TopList标签和JavaScript结合两例
Aug 12 #Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 #Javascript
IE和Mozilla的兼容性汇总event
Aug 12 #Javascript
收藏Javascript中常用的55个经典技巧
Aug 12 #Javascript
JavaScript-世界上误解最深的语言分析
Aug 12 #Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 #Javascript
You might like
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
jQuery事件对象总结
2016/10/17 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
复习Python中的字符串知识点
2015/04/14 Python
Python中logging实例讲解
2019/01/17 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
python sqlite的Row对象操作示例
2019/09/11 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
初一地理教学反思
2014/01/16 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
辞职离别感言
2015/08/04 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python