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