第4章 变量、作用域和内存问题

按照ECMA-262的定义，JavaScript变量和语言的变量有很大的区别。JavaScript变量是松散类型的本质。决定了它只是在特定的时间保存特定的值的一个名字而已。由于不存在定义某个变量必须要保持何种数组类型值的规则，变量的值以及数据类型在脚本的声明周期内改变。尽管从某种角度看，这可能是一个即强大有趣，同时又容易出现问题的特性，但是JavaScript变量实际的复杂程度远不如此。

4.1 基本类型和引用类型的值

ECMAScript变量可能包含两种不同类型的值：基本类型和引用类型的值。基本类型的值是指简单的数据段，而应用类型是指那些由多个值构成的对象。

在将一个值赋值给一个变量的时候，解析器必须确定这个值是基本类型还是引用类型。第3张讨论了5中基本数据类型：Undefined、Null、Boolean、Number和String。这5中数据类型都是按值访问的，因为可以操作保存在变量的实际值。

引用类型的值是保存在内存的对象。与其他语言不通，JavaScript不允许直接访问内存中的位置，也就是说不能直接访问对象的内存空间。在操作对象的时，实际上是操作对象的引用而不是实际的对象。为此引用类型的值是按照引用访问的。

4.1.1 动态的属性

定义基本类型和引用类型值的方式是类似的：创建一个变量并且为其赋值。但是，当这个值保存在变量以后，对不同类型值可执行的曹组大相径庭。对于引用类型的值，我们可以为其添加属性和方法，也可以改变和删除其属性和方法。请看下面的例子：

var person = new Object();
person.name = "Nicholas";
alert(person.name);

以上代码创建了一个对象并为其保存在变量person中。然后，我们为该对象添加了一个为名字为name的属性，并将字符转”Nicholas”赋值给了这个属性。紧接着，又通过alert()函数访问这个新的属性。如果对象不销毁或者属性不删除，则这个属性已知存在。

但是，我们不能给基本类型的值添加属性，尽管这样做不会导致任何错误。比如：

var name = "Nicholas";
name.age = 27;
alert(name.age);    // undefined

在这个例子中，我们为字符串name定义了一个名为age的属性，并为该属性赋值27。但是在下一行访问这个属性的时候，发现属性不见了。这说明只能给引用类型值动态的添加属性，以便将来使用。

4.1.2 复制变量值

除了保存的方式不对之外，在从一个变量向另外一个变量复制基本类型和引用类型值时，也存在不同。如果从一个变量向另外一个变量复制基本类型值时候，会在变量对象上创建一个新值，然后把该值复到为新变量分配的位置上。来看下面的例子：

var num1 = 5;
var num2 = num1;

在此，num1中保存的值是5，当使用num1的值来初始化num2时，num2中也保存了值5。但是num2中的值与num1中的值是完全独立的，该值只是num1中5的一个副本。此后，这两个变量可以草鱼任何操作而不会影响。

当从一个变量向另外一个变量复制应用类型的值的时候，同样也会将存储变量对象中的值复制一份放到新变量分配的空间中。不同的是，这个值的副本实际上是一个指针，而这个指针指向存储堆中的一个对象。复制操作之后，两个变量实际上将引用同一个对象。因此，改变其中一个变量，就会影响到另外一个变量，如下面的例子所示：

var obj1 = new Object();
var obj2 = obj1;
obj1.name = "Nicholas";
alert(obj2.name);   // "Nicholas"

首先，变量obj1保存了一个对象的新的实例。然后，这个值被复制到了obj2中；换句话说，obj1和obj2都指向同一个对象。这样，当为obj1添加name属性之后，可以通过obj2来访问这个属性。因为这两个变量都引用同一个对象。

4.1.3 传递参数

ECMAscript中所有函数的参数都是按值传递的。也就是说，把函数外部的值复制给函数内部的参数，就是把值从一个变量复制到另外一个变量一样。基本类型值的传递如同基本类型变量复制一样，而引用类型的传递，则如同引用类型变量复制一样。有不少开发人员可能会困惑，因为访问变量有按值和按引用访问两种方式，而参数只能按照值传递。

在向参数传递基本数据类型的时候，被传递的值就会被赋值给一个局部变量(即命名参数，或者用ECMAScript概念来说，就是arguments对象中的一个元素)。在向参数传递引用类型的值的时候，会把这个值在内存中的地址复制给一个局部变量，因此这个局部变脸的变化会反映在函数外部。请看下面这个例子：

function addTen(num){
    num += 10;
    return num;
}
var count = 20;
var result = addTen(count);
alert(count);   // 没有变化
alert(result);

这里的函数addTen()有一个参数num,而参数实际上是函数的局部变量。在调用这个函数时，变量count作为参数传递给函数，这个变量的值是20。于是数值20被赋值给参数num以便在addTen()中使用。在函数内部，参数num的值被加上了10，但是这一变化不会影响到外部的count变量。参数count的值也将变成30，从而反映函数内部的修改。当然，使用数值等基本数据类型的值来说名按值传递参数比较简单，如果使用对象，那问题就不怎么好理解了。下面再举一个例子：

function setName(obj){
    obj.name = "Nicholas";
}
var person = new Object();
setName();
alert(person.name);

以上代码中创建了一个对象，并将其保存在了变量person中。然后，这个变量被传递到函数中之后被复制给了obj。在这个函数内部，obj也会按引用来访问同一个对象。于是，挡在函数内部为obj添加name属性后，函数外部的person也将有所反映；因为person指向的对象在堆内内存中只有一个，而且是全局对象。很多开发人员错误的认为：在局部作用域中修改全局的对象会在全局作用域中反映出来，就说明参数是按照应用来传递的。为了证明对象是按值传递的。我们再来看看下面这个修改过的例子：

function setName(obj){
    obj.name = "Nicholas";
    obj = new Object();
    obj.name = "Greg";
}
var person = new Object();
setName(person);
alert(person.name);

这个例子与前一个例子的唯一区别，就是在setName()函数中添加了两行代码：一行代码为obj重新定义了一个对象，另一行代码是为该对象定义了一个带有不同值的name属性。在把person传递给setName()后，其name属性被设置为”Nicholas”。然后又将一个新对象赋给变量obj，同时将其name属性设置为”Greg”。如果person是按照引用传递的话，那么person就会自动被修改为指向其name属性值为”Greg”的新对象。但是接下来访问person.name时，显示接的值仍然是”Nicholas”。这说明即使在函数内部修改了参数的值，但是原始的引用仍然保持不变。实际上在当函数内部重写obj时，这个变量引用就是一个局部对象了。而这个局部对象会在函数执行完毕后立即销毁。

可以把ECMAscript函数的参数写成局部变量。

4.1.4 检测类型

要检测一个变量是不是基本数据类型？第3章介绍的typeof操作符是最佳工具。要说的具体的一点，typeof操作符是确定一个变量是字符串、数值、布尔值，还是undefined的最佳工具。如果变量的值是一个对象或null，则typeof操作符会想下面的例子中所示的那样返回”object”：

var s = "Nicholas";
var b = true;
var i = 22;
var u;
var n = null;
var o = new Object();

alert(typeof s);    // string
alert(typeof i);    // number
alert(typeof b);    // boolean
alert(typeof u);    // undefined
alert(typeof n);    // object
alert(typeof 0);    // object

虽然在检测基本数据类型时typeof是非常得力的助手，但是在检测引用数据类型值的时候，它的作用不大。通常我们并不想知道那个值是对象，而是想知道他是什么类型的对象。为此ECMAScript提供了instanceof操作符，其语法如下所示：

result = varibale instanceof constructor;

如果变量是给定引用类型的实例，那么instanceof操作符就会返回true。请看下面的例子：

alert(person instanceof Object);    // 变量person是Object吗？
alert(colors instanceof Array);     // 变量colors是Array吗？
alert(pattern instaneof RegExp);    // 变量pattern是RegExp吗？

使用typeof操作符检测函数的时候，该操作符将会返回”function”。在Safri 5以及之前的版本和chrome 7以及之前的版本中使用typeof检测正则表达式时，由于规范的原因，这个操作符也返回”function”。ECMA-262对顶任何在内部实现[[Call]]方法的对象都应该在应用typeof操作符时返回”function”。由于上述浏览器中正则表达式也实现了这个方法，因此对正则表达式应用typeof会返回”function”。在IE和Firefox中，对正则表达式应用typeof会返回”object”。

4.2 执行环境以及作用域

执行环境(excution context，为简单起见，有时候称为环境)是JavaScript中最为重要的一个概念。执行环境定义了变量或者函数有权访问其他数据，决定了它们各自的行为。每个执行环境都有一个与之相关的变量对象(variable object)，环境中定义的所有变量和函数都保存在这个对象中，虽然我们编写的代码无法访问这个对象，但是解析器才处理数据时会在后台使用它。

全局执行环境是最外围的一个执行环境。根据ECMAScript实现的宿主环境不同，表示执行环境的对象也不一样。在web浏览器中，全局执行环境被认为是window对象，因此所有全局变量和函数都是作为window对象的属性和方法来创建的。某个执行环境中的所有代码执行完毕之后，该环境被销毁，保存在其中的所有变量和函数也随之销毁（全局执行环境知道应用程序退出–例如关闭网页和浏览器–时才会被销毁）。

每个函数都有自己的执行环境。当执行流进入一个函数的时候，函数的环境会被推入到一个环境栈中。而在执行完毕之后，其环境客栈弹出，把控制权返回之前的执行环境。ECMAScript程序中的执行正是由这个方便的机制控制着。

当代码在一个环境中执行的时候，会创建变量对象的一个作用域链(scope chain).。作用域链的用途，是保证对执行环境有权访问的所有变量和函数有序访问。作用域链的前端，始终都是当前执行的变量对象。如果这个环境是函数，则将其活动对象(activation object)作为变量对象。活动对象在最开始只包含一个变量，即arguments对象（这个对象在全局环境中是不能存在的）。作用域链中的下一个变量对象依赖包含环境，再下一个对象则来自下一个包含对象。这样，一直延续到全局执行环境；全局执行环境的变量对象始终都是作用域中的最后一个对象。

标识符解析是沿着作用域链一级一级地向上搜索标识符的过程。搜索国政始终从作用域链的前端开始，然后逐级地向后回溯，知道找到表示符为止（如果找不到标识符通常会报错）。

var color = "blue";
function changeColor(){
    if(color == "blue"){
        coloe = "red";
    }else{
        color = "blue";
    }
}
changeColor();
alert("Color is now " + color);

在这个简单的例子中，函数changColor()的作用域链包含两个对象：它们自己的变量对象(其中定义这arguments对象)和全局环境的变量对象。可以在函数内部访问变量color，这是因为可以在这个作用域中找到它。

此外，在局部作用域中定义的变量可以在局部环境中与全局变量互换使用，如下面这个例子：

var color = "blue";
function changeColor(){
    var anotherColor = "red";
    function swapColors(){
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
        // 这里可以访问color、anotherColor和tempColor
    }
    // 这里访问color和antherColor，但是不能访问temoColor
    swapColors();
}
changeColors();

以上代码涉及3个执行环境：全局环境、changeColor()的局部环境和swapColor()的局部环境。全局环境中有一个名为color和一个函数changeColor()，changeColor()的局部环境中有一个名为anotherColor的变量和一个名为swapColors()的函数，但它可以访问全局环境中的变量color。swapColors()的局部环境中有一个变量tempColor，该变量只能在这个环境中访问到。无论全局环境还是changeColor()的局部环境都无法访问tempColor。然而，在swapColors()内部则可以访问其他两个环境中的所有变量，因为两个环境是他的父执行环境。

其中，内部环境可以通过作用域链访问所有的外部环境，但是我不环境不能访问内部环境中任何变量和函数。这些环境之间的联系是线性、有次序的。每个环境都可以向上搜索作用域链，以查询变量和函数名；但任何环境都不能通过向下搜索作用域链而进入另一个执行环境。对于这个例子中的swapColors()而言，其作用域链中包含3个对象：swapColors()的变量对象、changeColor()的变量对象和全局对象。swapColors()的局部环境开始时候hi在自己的变量对象中搜索变量和函数名，如果搜索不到在搜索上一级作用域链。changeColor()的作用域链只包含两个对象：它自己的变量对象和全局变量对象。也就是说，他不能访问swapColors()的环境。

4.2.1 延长作用域链

虽然执行环境的类型总共只有两种–全局和局部(函数),但是还是有其它的办法来延长作用域链。这么说是因为有些语句在作用域链的前端临时增加一个变量对象，该变量对象会在代码执行后被移除。在两种情况下发生会发生这种想象。具体来说，就是当执行流进入下列任何一个语句时，作用域链加长：

• try-catch语句的catch块

• with语句

  这两个语句都会在作用域的前端添加一个变量对象。对with语句来说，会将指定的对象添加到作用域链中。对catch语句来说，会创建一个新的变量对象。其中被包含的是被抛出的错误对象的声明。看下面的一个例子：

function buildUrl(){
    var qs = "?debug=true";
    with(localtion){
        var url = href + qs;
    }
    return url;
}

在此，with语句接收的是location对象，因此其变量对象就包含了location对象的所有属性和方法，而这个变量被添加到了作用域链的前端。buildUrl()函数定义了一个变量qs。当在with语句中引用变量href时，可以在当前执行环境的变量对象中找到。当引用变量qs的时候，引用则是在buildUrl()中定义的那个变量，而该变位于函数环境的变量对象中。至于with语句内部，则定义了一个名为url的变量，因而url就成了函数执行环境中的一部分。至于with语句内部，则定义了一个名为url的变量，因而url就成了函数执行环境的一部分，所以可以作为函数的值返回。

在IE8之前的版本中的JavaScript实现中，存在于标准不一致的地方，即在catch语句中捕获错误的对象会被添加到执行环境的变量对象，而不是catch语句的变量对象中。换句话说，即使在catch块的外部也可以访问到错误的对象。IE9修复了这个问题。

4.2.2 没有块级作用域

JavaScript没有块级作用域经常会导致理解上的困惑。在其他类C的语言中，由括号封闭的代码块都有自己的作用域（如果用ECMAScript的话来讲，就是它们的执行环境），因而支持根据条件来定义变量。例如，下面的代码在JavaScript中并不会得到想象的结果：

if(true){
    var color = "blue";
}
alert(color);   // "blue"

这里是一个if语句定义了变量color。如果在C、C++或者Java中，color会在执行完毕知乎销毁。但是在JavaScript中，if语句的变量声明会将变量添加到当前的执行环境中。在使用for语句时候尤其要记住这一差异，例如

for(var i=0;i<10;i++){
    deSomething(i);
}
alert(i);   // 10

对于有块级作用域的语言来说，for语句初始化表达式所定义的变量，只会在循环的环境中。对于JavaScript来说，由for语句创建的变量i即使在循环结束之后，也依旧会存在于循环外部的执行环境中。

1.声明变量
使用var声明变量会自动被添加到最近的环境中。在函数内部，最接近的环境就是函数的局部环境。如果出事话变量的时候没有使用var关键字声明，也依旧会存在循环外部的执行环境中。如下所示：

function add(num1,num2){
    var sum = num1 + num2;
    return sum;
}
var result = add(10,10);
alert(sum);

以上代码中的函数add()定义了一个名为sum的局部变量，该变量包含加法操作的结果。虽然结果值从函数中返回了，但是变量sum在函数外部是访问不到的。如果省略这个例子中的var关键字，那么当add()执行完毕之后，sum也将可以访问到：

function add(num1,num2){
    sum = num1 + num2;
    return sum;
}
var result = add(10,20);
alert(sum);

这个例子中的变量sum在初始化赋值的时候没有使用关键字var。于是，当调用完add()之后，添加到全局环境中的变量sum将继续存在；即使函数已经执行完毕，后面的代码依旧可以访问它。

在编写JavaScript代码的过程中，不声明而直接初始化变量一个常见的错误做法，因为这样会导致意外。我们建议在初始化变量之前，一定要先声明，这样就可以避免类似的问。在严格模式下，初始化声明未经声明的变量会导致错误。

2.查询标识符
当在某个环境中为了读取或者写入而引入一个标识符的时，必须通过搜索来确定标识符实际代表什么。搜索过程从作用域的前端开始，向上逐级查询与给定名字像匹配的标识符。如果在环境中找到了该标识符，搜索过程停止，变量就绪。如果在局部环境中没有找到该变量名，则继续沿着作用域量向上搜索。搜索过程将一直追溯到全局变量对象。如果在全局环境中也没有找到该标识符，则意味着该变量尚未声明。

通过下面这个示例，可以理解查询标识符的过程：

var color = "blue";
function getColor(){
    return color;
}
alert(getColor());

调用本例中的函数getColor()时会引用变量color。为了确定变量color的值，将开始包含一个名为color的标识符。在没有找到的情况下，搜索到下一个变量对象，然后在哪里找到名为color的标识符。以内搜索到定义这个变量的变量对象，搜索过程宣布结束。

在这个搜索过程中，如果存在一个局部变量的定义，则搜索会自动停止，不再进入另一个变量对象。换句话说，如果局部环境中存在着同名标识符，就不会使用位于父环境中的标识符，如下面的例子所示：

var color = "blue";
function getColor(){
    var color = "red";
    return color;
}
alert(getColor());

修改后的代码在getColor()函数中声明了一个名为color的局部变量。调用函数的时候，该变量就会被声明。而当函数中的第二行代码执行的时候，意味着必须找到并返回变量color的值。搜索过程首先从局部环境中开始，而且这里发现了一个名为color的变量，其值为”red”。也就是说，任何位于局部变量color的声明之后的代码，如果不使用window.color都无法访问全局color变量。

变量查询也不是没有代码的。很明显，访问局部变量对象要比访问全局变量更快，因为不用向上搜索作用域链。JavaScriupt引擎在优化查询方面做得不错，因此这个差别将来恐怕就可以忽略不计了。

4.3.1 标记清除

JavaScript中最常用的垃圾收集机制是编辑清除。当变量进入环境（例如，在函数声明一个变量）时，就将这个变量标记为进入环境。从逻辑上讲，永远不不能释放进入环境的变量所占用的内存，因为只要执行流进入环境，既可以用到它们。而当变量离开环境的时候，就将其标记为离开环境。

可以使用任何方式标记变量。比如，可以通过翻转某个特殊的位来记录一个变量如何进入环境，或者使用一个进入环境的变量列表以及一个离开环境的变量列表来追踪那个变量发生了变化。说到底，如果标记变量其实并不重要，关键是采用什么策略。

垃圾回收器在运行的时候会给存储在内存上的所有变量都加上标记。然后，它会去掉环境中的变量以及被环境中的变量引用的变量标记。而在此之后再被加上标记额变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后垃圾回收器完成内存清清除的工作，销毁那些带标记的值并回收它们所占用的空间。

4.3.2 引用计数

另一种不太常见的垃圾回收策略叫做引用计数（reference counting）。引用计数的含义是跟踪就每个值被引用的次数。当声明一个变量并将一个引用类型值赋值给该变量时候，这个值的引用次数就是1。相反，如果包含对这个值引用对的变量又取得了另外一个值，则这个值的引用次数1。当这个值的引用次数变成0的时候，则说明没有办法在访问这个值了，因而就可以将其占用的内存空间收回来。这样，当垃圾收集器下次在运行的时，它就释放那些引用此时为零的值所占用的内存。

Netscape Navigator 3.0是最早使用计数策略的浏览器，但是很快它就很快遇到了一个严重的问题：循环引用指的是对象A中包含一个指向对象A的引用。请看下面的例子：

function problem(){
    var objectA = new Object();
    var objectB = new Object();
    objectA.someOtherObject = objectB;
    objectB.anotherObject = objectA;
}

在这个例子中，objectA和objectB通过各自属性的相互引用；也就是说这两个变量的引用次数都是2。在采用引用计数策略的实现中，当执行完毕后，这两个对象都离开了作用域，因此这种相互引用不是个问题。但是在采用引用计数侧罗的实现中，当函数执行完毕之后，objectA和objectB还将继续存在，因为它们的引用次数永远不会是0。假如这个函数被重复多次调用，就会导致大量内存得不到回收。为此，Netscape在Navigator4.0中放弃了引用计数的方式，转而采用标记清除来实现垃圾回收机制。可是，引用计数导致的麻烦并为就此终结。

4.3.3 性能问题

垃圾回收机制是周期性运行的，而且如果为变量分配的内存数量很可观，那么回收工作量也是很大的。在这种情况下，确定垃圾回收的时间间隔是一个非常重要的问题，说到垃圾回收器多长时间运行一次，不禁让人联想到IE因此而声名狼藉的性能问题。IE的垃圾回收器是根据内存分配量运行的，具体一点就是256个变量、4096个对象字面量和数组元素或者64k的字符串达到上述任何一个临界值，垃圾回收机制就会运行。这种实现方式的问题在于，如果一个脚本包含那么多变量，那么脚本会在其生命周期一直保有那么多变量。而这样一来，来及收集器就不得不频繁地运行。结果，由此引发的严重性能问题促使IE7重写了垃圾回收机制。

4.3.4 管理内存

使用具有垃圾回收机制的语言编写程序，开发人员一般不必要操心内存管理问题。但是，JavaScript在进行内存管理垃圾回收时面临的问题函数有点与众不同。其中最主要的问题是，就是分配给Web浏览器的可用内存数量通常要比分配给桌面的应用程序少。这样做的目的是处于安全方面的考虑，目的是防止运行JavaScript的网页耗尽全部系统内存而导致系统崩溃。内存限制问题不仅会影响给变量分配内存，同时还会影响调用栈以及在一个线程中能够同时执行的语句数量。

因此，确保占用最少的内存可以让页面获得更好的性能。而优化内存占用的最佳方式，就是执行中的代码值保存必要的数据。一旦数据不再使用，最好通过将其设置为null来释放其引用–这个做法叫做解除引用。这一做法适用于大多数全局变量和全局对象属性。局部变量它们离开执行环境时会自动被解除引用。

function cratePerson(name){
    var localPerson = new Object();
    localPerson.name = name;
    return localPerson;
}
var globalPerson = createPerson("Nicj=holas");
// 手工解除globalPerson的引用
globalPerson = null;