1)    引子

前不久我建立的技术群里一位MM问了一个这样的问题，她贴出的代码如下所示：

执行结果如下所示：

第一个alert：

第二个alert：

这是一个令人诧异的结果，为什么第一个弹出框显示的是undefined，而不是1呢？这种疑惑的原理我描述如下：

一个页面里直接定义在script标签下的变量是全局变量即属于window对象的变量，按照javascript作用域链的原理，当一个变量在当前作用域下找不到该变量的定义，那么javascript引擎就会沿着作用域链往上找直到在全局作用域里查找，按上面的代码所示，虽然函数内部重新定义了变量的值，但是内部定义之前函数使用了该变量，那么按照作用域链的原理在函数内部变量定义之前使用该变量，javascript引擎应该会在全局作用域里找到变量定义，而实际情况却是变量未定义，这到底是怎么回事呢？

当时群里很多人都给出了问题的解答，我也给出了我自己的解答，其实这个问题很久之前我的确研究过，但是刚被问起了我居然还是有个卡壳期，在加上最近研究javascriptMVC的写法，发现自己读代码时候对new 、prototype、apply以及call的用法任然要体味半天，所以我觉得有必要对javascript基础语法里比较难理解的问题做个梳理，其实写博客的一个很大的好处就是写出来的知识逻辑会比你在脑子里反复梳理的逻辑映像更加的深刻。

下面开始本文的主要内容，我会从基础知识一步步讲起。

2)    Javascript的变量

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

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

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

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

但是实际开发里如果我们对基本类型和引用类型的区别不是很清晰，就会碰到我们很多不能理解的问题，下面我们来看看下面的代码：

运行之，我们发现作为基本数据类型，我们没法为这个变量添加属性，当然方法也同样不可以，例如下面的代码：

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

当我们使用引用类型时候，结果就和上面完全不同了，大家请看下面的代码：

javascript里的基本类型和引用类型的区别和其他语言类似，这是一个老调长谈的问题，但是在现实中很多人都理解它，但是却很难应用它去理解问题。

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

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

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

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

部分二：栈区变量的值；

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

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

场景一：如下代码所示：

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

场景二：如下代码所示：

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