引子:
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语言是不允许操作堆内存,因此堆内存的变量并没有被复制,所以复制引用对象复制的值就是堆内存的地址,而复制双方的两个变量使用的对象是相同的,因此复制的变量其中一个修改了对象,另一个变量也会受到影响。