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

2016-02-19 09:20 8 1 收藏

下面这个不错的JS中变量相关的细节分析教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

【 tulaoshi.com - Web开发 】

这里讨论一下我对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的存取,实际上都是操作的同一块内存区域。如果希望重新分配内存空间存储引用型变量,那么我就需要使用克隆方法或者自定义方法来复制引用变量的数据。

来源:http://www.tulaoshi.com/n/20160219/1590440.html

延伸阅读
存储过程中的TOP后跟一个变量会如何? 代码如下: Create proc getWorkPlan2 (@intCounter int ,@lngUserID int) as select Top 5 lngWorkID,strWorkName,strExecHumanName,strBeginDate from worklist where lngExecHumanID= @lngUserID order by lngWorkID desc 现在想将这里的Top 5 改为变量· Top @intCounter 如下 代码如下...
标签: Web开发
getElementById getElementsByName getElementsByTagName 大概介绍 getElementById ,getElementsByName ,getElementsByTagName 后两个是得到集合,byid只是得到单个对象 getElementById 的用法 举个例子: a id="link1" name="link1" href=http://homepage.yesky.com网页陶吧/a 同一页面内的引用方法: ...
1.条件变量替换: Bash Shell可以进行变量的条件替换,既只有某种条件发生时才进行替换,替换条件放在{}中. (1) ${value:-word} 当变量未定义或者值为空时,返回值为word的内容,否则返回变量的值. (2) ${value:=word} 与前者类似,只是若变量未定义或者值为空时,在返回word的值的同时将word赋值给v...
标签: PHP
      自PHP4.1.0以后将HTTP_GET_VARS使用GET变量来保存,GET的变量主要来自以下的方法 对服务器以获取资料信息为请求方法的例如,URL,使用FORM的METHOD为GET方式。这样所有的请求变量将通过 URL传递给服务器,服务器根据配置调用相关的解释器来处理这些GET出来的变量。        ...
标签: Web开发
    相信用过google的analytics的朋友都了解其功能的强大.     由于工作需要,最近将其urchin.js的代码down了一份下来研究了一下.由于其注释很少,命名也很难读懂.研究了1个月.小有所成.将其代码重写并加上了注释.与大家一同分享.这里面将google的用户识别代码删除. /**//*  ===================...

经验教程

113

收藏

46
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部