变量的值

ECMAScript 变量可能包含两种不同数据类型的值：

• 基本类型值：string , number , boolean , undefined , null
• 引用类型值：object

堆和栈

在理解它们之间的差异之前，我们先需要来了解一下关于堆和栈的概念

• 基本类型的变量的存储只利用栈区
  可以看看这个例子

  var name = 'Sumi';
  var age = '22';
  var city = 'ShangHai';
  

  可以看一下下图方便理解
  基本类型的变量存放在栈区
  栈区包括了变量的标识符和值

• 引用类型的变量的存储要同时利用到栈区和堆区

这里是一个简单例子

var person1 = new Object();
var person2 = new Object();
var person3 = new Object();
 ```
![对象赋值的变量同时要用到堆区和栈区](https://img.haomeiwen.com/i2964515/2a1dc8421490bad7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
每次`new`一个对象的时候，都会在堆区中新建一个对象，所以这里是三个不同的对象，分别赋值给了person1、person2、person3这三个变量

 -   **栈区**保存的是对对象的**引用**（变量的标识符（名字）、指针（即该对象在堆内存的地址））
 -   **堆区**保存的是对象的**值**（属性、方法） 

####分析和总结

>   JavaScript 不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象（这句话不太严谨，当复制保存着对象的某个变量时，操作的是对象的引用。但在为对象添加属性时，操作的是实际的对象）

先贴上高程里面对于对象的总结，这里的指针可能对于很多人来说不太好理解，我们采用一种较为形象的方式来便于理解
-   对于基本数据变量：可以理解为一个`p`标签，标签里面是它的内容，即变量的值，它的值是显而易见的显示在网页上面的，你可以直接在这个网页看到`p`的内容
-   对于引用数据变量：可以理解为一个`a`标签，`a`标签有一个`href`属性包含了一个链接，只有当你通过这个链接访问到另外一个网页的时候，才能看到另外网页的真正内容，在当前页是无法查看到的。这里的栈区保存的指针可以理解为`a`标签的`href`的属性，另外一个网页的内容可以理解为堆区的对象
 >   对于`a`标签来说，只有通过`href`里面的链接访问进另外一个网页，才能看到另外一个网页真正的内容
 >   对于对象复制的变量来说，只有通过栈区的指针访问进堆区的对象，才能获取到对象的值


##基本类型变量特性
1.   基本类型的值是**不可变**的，也不能给基本类型添加属性和方法
 -   任何方法都无法改变一个基本类型的值，比如这里有一个字符串：
     ```javascript
     var name = 'Sumi';
     name.toUpperCase();
     console.log(name);      //'Sumi'
     ```
     最后输出时会发现原始的name并未发生改变，这里调用了toUpperCase()方法后，返回的是一个新的字符串

 -   **不能**给基本类型添加属性和方法，再次说明基本类型不可变
     ```javascript
     var person = 'Sumi';
     person.age = 22;
     console.log(person.age);        //undefined
     person.method = function(){};
     console.log(person.method);     //undefined
     ```
2.   基本类型的变量的存储只利用**栈区**

3.   基本类型的比较是**值**和**数据类型**比较，只有在值和数据类型都相等的时候它们才全等（`===`）
 不过有个例子很容易让人混淆
 ```javascript
 var a = 1;
 var b = true;
 console.log( a == b );          //true
 ```
 这里涉及到了数据类型转换和`==`运算符的知识，它们等于不代表全等

##引用类型变量特性
1.   引用类型的值是**可变**的
 我们可为为引用类型动态地添加属性和方法，也可以动态地删除其属性和方法
 ```javascript
 var person = new Object();
 person.name = 'Sumi';           //给变量动态添加属性name
 person.sayName = function(){    //给变量动态添加方法sayName
     console.log(person.name);
 };
 person.sayName();               //'Sumi'

 delete person.name;             //动态删除变量的属性name
 console.log(person.name);       //undefined
 ```

2.   引用类型的变量的存储要同时利用到**栈区**和**堆区**

3.   引用类型的比较是**栈区存储的指针**和**堆区存储的对象的值**的比较，只有在这两者相等时，它们才全等（`===`）
```javascript
var person1 = new Object();
var person2 = new Object();
console.log( person1 == person2 );    //false

就像上文中说到的，每次new一个对象时，都会在堆区新建一个对象，那么person1和person2的指向是不同的，它们分别指向了两个对象，所以结果为false

变量的复制原理以及访问类型

其实复制原理可以算作是特性里面的内容，由于这里需要设计到访问类型，特意拿出来做一个比较明显的对比

对于基本类型变量来说（按值访问）

从一个变量向另一个变量复制基本类型的值，会在变量对象上创建一个新值，然后把该值复制到为新变量分配的位置上，两个变量的值相互独立，互不影响

来看一个例子：

var num1 = 5;
var num2 = num1;
num2 = 4;
console.log(num1);    //5

基本类型变量复制：前后栈区对比

在这里，将num1复制给了num2，会在num1上新建一个变量num2，当我修改num2的值时，num1的值是不会受到影响的

对于引用类型变量来说（按引用访问）

当从一个变量向另一个变量复制引用类型的值时，同样也会将存储在变量对象中的值复制一份放到为新变量分配的空间中。不同的是，这个值的副本实际上是一个指针（堆内存地址），而这个指针指向存储在堆中的一个对象。复制操作结束后，两个变量实际上将引用堆区的同一个对象，而对象的值都保存在这里，因此，改变其中一个变量的值，就会影响另一个变量的值

来看一个例子：

var obj1 = new Object();
var obj2 = obj1;
obj1.name = 'Sumi';
alert(obj2.name);    //'Sumi'

引用类型变量复制
在这里，obj1 在栈区存储的指针指向 Object，然后将 obj1 复制给变量 obj2，会使得 obj2 也同时指向 Object。Object 才是真正的对象，而 obj1 和 obj2 都是对于 Object 的引用，它们在修改值（属性、方法）的时候都会修改堆区的 Object 从而使得 obj1 的修改反应到 ob2 身上

对于函数传参（按值访问）

函数传参在也是属于变量的复制

原理就是把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一个变量一样。参数不管是基本类型还是引用类型，都属于按值访问

基本类型变量于上面说过的复制方式相同，这里着重说一下参数为引用类型的情况：
当参数为引用类型时，并不会将对象本身传进函数内，而是会在函数内新建一个局部变量，并将对象的指针复制给函数内的局部变量。此时，局部变量和外部的变量都指向堆区的同一个对象，导致的结果就是内部对于对象的修改会影响到外部变量，外部对于对象的修改也会反应到内部，在函数内的局部变量被重新赋值之前，这种现象都会一直存在。如果函数内的变量被重新赋值，那么外部变量和局部变量的指向将不同，这种现象也会消失

注意：在《高级程序设计》里提出了一个例子来对按引用访问和按值访问进行了区分，如果对例子的描述进行分析会发现，实际上会发现例子并不能证明按引用访问和按值访问的区别，笔者暂时也无法总结出关于按引用访问和按值访问的差别和特性，这里只推荐大家记住相关结论，如果进行深究会很容易把自己绕进去。

小结

关于概念的深抠和总结不太适合初学者，JS作为一门弱类型语言还是会存在很多概念不清楚的地方，咱的目标是清楚原理（变量的值在堆、栈中的存储方式等），知道结论（访问方式是按值访问还是按引用访问）。这也是我这篇文章想表达的意思，你说是不？