Javascript:对变量的认识


引子:

var a = 1;
function show(){
   alert(a);
   var a = 2;
  alert(a); 
}

结果:第一个弹出为 undefined 第二个弹出为 2;  
这是一个令人诧异的结果,为什么第一个弹出框显示的是undefined,而不是1呢?带着这种疑惑,我们慢慢来揭开他的面纱

Javascript 的变量:

**知识点一: **javascript变量和java等语言一样,也分为基本数据类型和引用类型。
** 基本数据类型 **:string number undefined null boolean
**引用数据类型 **:object

给一个基本数据类型添加属性,将会是undefined;添加方法时,会报错。
如:

var str = "haoqixin";
str.name = "qdaily";
alert(str.name)  //*undefined;*
str.fn = function(){
  console.log(1);
}
str.fn(); //* 报错  str.fn is not a function*

** 知识点二:**在JavaScript定义变量需要var关键字,但是JavaScript定义变量也可以不需要关键字。当不使用var 关键字定义变量时候,不管变量是属于全局作用域还是局部作用域,都将属于window 对象的。由知识点一和知识点二知:只有当一个变量既没有使用var,又没有赋值,才会报出:xxx is not defined;

下面来修改引子里内容:

//var a = 1;
function hehe()
{
  alert(a);
  var a = 2;
  alert(a); 
}  
hehe();

结果为:*第一个弹出 undefined, 第二个弹出 2 *

//var a = 1;
function hehe(){
  alert(a);
  //var a = 2;
  alert(a);
}
hehe();

结果为:报错 a is not defined

对比二者代码以及引子里的代码,我们发现问题的关键是var a = 2 引起的。在代码一里面,我注释掉了 var a =1,结果和引子里的结果一样,这说明函数内部a 变量的使用和全局环境无关。 在代码二里,我注释掉了 var a = 2, 代码报错了,这的确让人困惑。其实,javascript代码在运行前还有一个过程就是:预加载,预加载的目的是要事先构造运行环境例如全局环境,函数运行环境,还要构造作用域链(关于作用域链和环境,本文后续会做详细的讲解),而环境和作用域的构造的核心内容就是指定好变量属于哪个范畴,因此javascript语言里变量的定义是在预加载完成而非在运行时期。

对比,引子里的代码在函数的局部作用域下变量a被重新定义了,在预加载时候a的作用域范围也就被框定了,a变量不再属于全局变量,而是属于函数作用域,只不过赋值操作是在运行期执行(这就是为什么javascript语言在运行时候会改变变量的类型,因为赋值操作是在运行期进行的),所以第一次使用a变量时候,a变量在局部作用域里没有被赋值,因此结果就是undefined了。

知识点三:复制变量的值和函数传递参数
首先看看这个场景:
基本类型变量:

var s1 = '111';
var s2 = s1;

console.log(s1);  //111
console.log(s2);  //111

s2 = '123';

console.log(s1);  // 111
console.log(s2);  // 123

引用变量:

var obj1 = new Object();
obj1.name = "obj1 name";

console.log(obj1.name);  // obj1 name

var obj2 = obj1;

console.log(obj2.name);

obj1.name = "obj1 newName";

console.log(obj2.name);

我们发现复制的是对象的时候,obj1 和 obj2 两个对象串联起来,obj1 的属性被改变的时候,obj2 的属性也被改变。
函数传递参数的本质是:外部的变量复制到函数参数变量里。是值传递
再来看看下面的代码:

function testFn(sNm,pObj){
  console.log(sNm); //newName
  console.log(pObj.oName); //newObj

  sNm = 'changeName';
  pObj.oName = 'changeObj';
}

var sNm = 'newName';
var pObj = {oName:'newObj'};
testFn(sNm,pObj);

console.log(sNm);
console.log(pObj.oName);

这个结果和变量赋值的结果是一致的。在JavaScript中传递参数是按值传递的
为了说明这个问题的原理,需要了解变量在内存中的形式:

这是引用类型存储的内存结构。
在javascript里变量的存储包含三个部分:
部分一:栈区的变量标示符;
部分二:栈区变量的值;
部分三:堆区存储的对象。

在javascript里变量的复制(函数传参也是变量赋值)本质是传值,这个值就是栈区的值,而基本类型的内容是存放在栈区的值里,所以复制基本变量后,两个变量是独立的互不影响,但是当复制的是引用类型时候,复制操作还是复制栈区的值,但是这个时候值是堆区对象的地址,因为javascript语言是不允许操作堆内存,因此堆内存的变量并没有被复制,所以复制引用对象复制的值就是堆内存的地址,而复制双方的两个变量使用的对象是相同的,因此复制的变量其中一个修改了对象,另一个变量也会受到影响。

参考文献:http://www.cnblogs.com/sharpxiajun/p/4133462.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容