[转]谈谈javascript语法里一些难点问题（一）

Javascript的变量

　　Java语言里有一句很经典的话：在java的世界里，一切皆是对象。

　　Javascript虽然跟java没有半点毛关系，但是很多会使用javascript的朋友同样认为：在javascript的世界里，一切也皆是对象。

　　其实javascript语言和java语言一样变量是分为两种类型：基本数据类型和引用类型。

　　基本类型是指：Undefined、Null、Boolean、Number和String；而引用类型是指多个指构成的对象，所以javascript的对象指的是引用类型。在java里能说一切是对象，是因为java语言里对所有基本类型都做了对象封装，而这点在javascript语言里也是一样的，所以提在javascript世界里一切皆为对象也不为过。

 

Javascript里的基本变量是存放在栈区的（栈区指内存里的栈内存），它的存储结构如下图所示：

javascript里引用变量的存储就比基本类型存储要复杂多，引用类型的存储需要内存的栈区和堆区（堆区是指内存里的堆内存）共同完成，如下图所示：

　　在javascript里变量的存储包含三个部分：

　　　　部分一：栈区的变量标示符；

　　　　部分二：栈区变量的值；

　　　　部分三：堆区存储的对象。

　　变量不同的定义，这三个部分也会随之发生变化，下面我来列举一些典型的场景：

场景一：如下代码所示：

    var qqq;

    console.log(qqq);// 运行结果：undefined

 

　　运行结果是undefined，上面的代码的标准解释就是变量被命名了，但是还未初始化，此时在变量存储的内存里只拥有栈区的变量标示符而没有栈区的变量值，当然更没有堆区存储的对象。

　　场景二：如下代码所示：

    var qqq;

    console.log(qqq);// 运行结果：undefined

    console.log(xxx);

 

　　运行之，结果如下图所示：

 

　　会提示变量未定义。在任何语言里变量未定义就使用都是违法的，我们看到javascript里也是如此，但是我们做javascript开发时候，经常有人会说变量未定义也是可以使用，怎么我的例子里却不能使用了？那么我们看看下面的代码：

    xxx = "outer xxx";

    console.log(xxx);// 运行结果：outer xxx

    function testFtn(){

        sss = "inner sss";

        console.log(sss);// 运行结果：outer sss

    }

    testFtn();

    console.log(sss);//运行结果：outer sss

    console.log(window.sss);//运行结果：outer sss

　　在javascript定义变量需要使用var关键字，但是javascript可以不使用var预先定义好变量，在javascript我们可以直接赋值给没有被var定义的变量，不过此时你这么操作变量，不管这个操作是在全局作用域里还是在局部作用域里，变量最终都是属于window对象，我们看看window对象的结构，如下图所示：

由这两个场景我们可以知道在javascript里的变量不能正常使用即报出“xxx is not defined”错误（这个错误下，后续的javascript代码将不能正常运行）只有当这个变量既没有被var定义同时也没有进行赋值操作才会发生，而只有赋值操作的变量不管这个变量在那个作用域里进行的赋值，这个变量最终都是属于全局变量即window对象。

由上面我列举的两个场景我们来理解下引子里网友提出的问题，下面我修改一下代码，如下所示：

    //var a = 1;

    function hehe()

    {

        console.log(a);

        var a = 2;

        console.log(a);

    }

    hehe();

　　结果如下图所示：

 

　　我再改下代码：

    //var a = 1;

    function hehe()

    {

        console.log(a);

       // var a = 2;

        console.log(a);

    }

    hehe();

　　运行之，结果如下所示：

 

　　对比二者代码以及引子里的代码，我们发现问题的关键是var a=2所引起的。在代码一里我注释了全局变量的定义，结果和引子里代码的结果一致，这说明函数内部a变量的使用和全局环境是无关的，代码二里我注释了关键代码var a = 2，代码运行结果发生了变化，程序报错了，的确很让人困惑，困惑之处在于局部作用域里变量定义的位置在变量第一次使用之后，但是程序没有报错，这不符合javascript变量未定义既要报错的原理。

　　其实这个变量任然被定义即内存存储里有了标示符，只不过没有被赋值，代码一则说明，内部变量a已经和外部环境无关，怎么回事？如果我们按照代码运行是按照顺序执行的逻辑来理解，这个代码也就没法理解。

　　其实javascript里的变量和其他语言有很大的不同，javascript的变量是一个松散的类型，松散类型变量的特点是变量定义时候不需要指定变量的类型，变量在运行时候可以随便改变数据的类型，但是这种特性并不代表javascript变量没有类型，当变量类型被确定后javascript的变量也是有类型的。但是在现实中，很多程序员把javascript松散类型理解为了javascript变量是可以随意定义即你可以不用var定义，也可以使用var定义，其实在javascript语言里变量定义没有使用var，变量必须有赋值操作，只有赋值操作的变量是赋予给window，这其实是javascript语言设计者提升javascript安全性的一个做法。

　　此外javascript语言的松散类型的特点以及运行时候随时更改变量类型的特点，很多程序员会认为javascript变量的定义是在运行期进行的，更有甚者有些人认为javascript代码只有运行期，其实这种理解是错误的，javascript代码在运行前还有一个过程就是：预加载，预加载的目的是要事先构造运行环境例如全局环境，函数运行环境，还要构造作用域链（关于作用域链和环境，本文后续会做详细的讲解），而环境和作用域的构造的核心内容就是指定好变量属于哪个范畴，因此在javascript语言里变量的定义是在预加载完成而非在运行时期。

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

var ooo = null;

    console.log(ooo);// 运行结果：null

    console.log(ooo == undefined);// 运行结果：true

    console.log(ooo == null);// 运行结果：true

    console.log(ooo === undefined);// 运行结果：false

    console.log(ooo === null);// 运行结果：true

 

　　运行之，结果很震惊啊，null居然可以和undefined相等，但是使用更加精确的三等号“===”，发现二者还是有点不同，其实javascript里undefined类型源自于null即null是undefined的父类，本质上null和undefined除了名字这个马甲不同，其他都是一样的，不过要让一个变量是null时候必须使用等号“=”进行赋值了。

　　当变量为undefined和null时候我们如果滥用它javascript语言可能就会报错，后续代码会无法正常运行，所以javascript开发规范里要求变量定义时候最好马上赋值，赋值好处就是我们后面不管怎么使用该变量，程序都很难因为变量未定义而报错从而终止程序的运行，例如上文里就算变量是string基本类型，在变量定义属性程序还是不会报错，这是提升程序健壮性的一个重要手段，由引子的例子我们还知道，变量定义最好放在变量所述作用域的最前端，这么做也是保证代码健壮性的一个重要手段。

　　下面我们再看一段代码：

var str;

    if (undefined != str && null != str && "" != str){

        console.log("true");

    }else{

        console.log("false");

    }

    if (undefined != str && "" != str){

        console.log("true");

    }else{

        console.log("false");

    }

    if (null != str && "" != str){

        console.log("true");

    }else{

        console.log("false");

    }

    if (!!str){

        console.log("true");

    }else{

        console.log("false");

    }

    str = "";

    if (!!str){

        console.log("true");

    }else{

        console.log("false");

    }

 

　　运行之，结果都是打印出false。

　　使用双等号“==”，undefined和null是一回事，所以第一个if语句的写法完全多余，增加了不少代码量，而第二种和第三种写法是等价，究其本质前三种写法本质都是一致的，但是现实中很多程序员会选用写法一，原因就是他们还没理解undefined和null的不同，第四种写法是更加完美的写法，在javascript里如果if语句的条件是undefined和null，那么if判断的结果就是false，使用！运算符if计算结果就是true了，再加一个就是false，所以这里我建议在书写javascript代码时候判断代码是否为未定义和null时候最好使用！运算符。

　　代码四里我们看到当字符串被赋值了，但是赋值是个空字符串时候，if的条件判断也是false，javascript里有五种基本类型，undefined、null、boolean、Number和string，现在我们发现除了Number都可以使用！来判断if的ture和false，那么基本类型Number呢？

    var num = 0;

    if (!!num){

        console.log("true");

    }else{

        console.log("false");

    }

 

　　运行之，结果是false。

　　如果我们把num改为负数或正数，那么运行之的结果就是true了。

　　这说明了一个道理：我们定义变量初始化值的时候，如果基本类型是string，我们赋值空字符串，如果基本类型是number我们赋值为0，这样使用if语句我们就可以判断该变量是否是被使用过了。

　　但是当变量是对象时候，结果却不一样了，如下代码：

var obj = {};

    if (!!obj){

        console.log("true");

    }else{

        console.log("false");

    }

 

　　运行之，代码是true。

　　所以在定义对象变量时候，初始化时候我们要给变量赋予null，这样if语句就可以判断变量是否初始化过。

　　其实if加上！运算判断对象的现象还有玄机，这个玄机要等我把场景三讲完才能说清楚哦。

区的标示名称，因此结果就是undefined了。

　　不过赋值操作也不是完全不对预加载产生影响，预加载时候javascript引擎会扫描所有代码，但不会运行它，当预加载扫描到了赋值操作，但是赋值操作的变量有没有被var定义，那么该变量就会被赋予全局变量即window对象。

　　根据上面的内容我们还可以理解下javascript两个特别的类型：undefined和null，从javascript变量存储的三部分角度思考，当变量的值为undefined时候，那么该变量只有栈区的标示符，如果我们对undefined的变量进行赋值操作，如果值是基本类型，那么栈区的值就有值了，如果栈区是对象那么堆区会有一个对象，而栈区的值则是堆区对象的地址，如果变量值是null的话，我们很自然认为这个变量是对象，而且是个空对象，按照我前面讲到的变量存储的三部分考虑：当变量为null时候，栈区的标示符和值都会有值，堆区应该也有，只不过堆区是个空对象，这么说来null其实比undefined更耗内存了，那么我们看看下面的代码：

 

var obj = {}相当于var obj = new Object(),虽然对象里没什么内容，但是在堆区里，对象的内存已经分配了，而变量栈区的值已经是内存地址了，所以if语句判断就是true了。