js基本 4000 类型和引用类型

分类

ECMAScript包含两个不同类型的值：基本类型值和引用类型值。基本类型值指的是简单的数据段；引用类型值指由多个值构成的对象。当我们把变量赋值给一个变量时，解析器首先要做的就是确认这个值是基本类型值还是引用类型值。

常见的五种引用数据类型是：

Object、Function、Array、Date、RegExp

基本类型

常见的五种基本数据类型是：

Undifined、Null、Boolean、Number和String。

这五种基本数据类型可以直接操作保存在变量中的实际值。

看下面例子：

var a = 10;
var b = a;
b = 20;
console.log(a); // 10

var bl = true;
var bl1 = bl;
bl1 = false;
console.log(bl); // true

上面，b获取值是a值的一份拷贝，虽然，两个变量的值是相等，但是两个变量保存两不同的基本数据类型值。b只是保存了a复制的一个副本。所以，当b的值改变时，a的值依然是10;

下面，两个Boolean变量bl和bl1同样是基本数据类型，同样保存两个不同的基本数据据类型值，bl1保存bl复制的一个副本。

下图演示了这种基本数据类型赋值的过程：

引用类型

javascript引用数据类型是保存在堆内存中的对象，与其它语言不同的是，你不可以直接访问堆内存空间中的位置和操作堆内存空间。只能通过操作对象的在栈内存中的引用地址。所以引用类型的数据，在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存在堆内存中的对象。

看下下面的例子：

var obj1 = new Object();
var obj2 = obj1;
obj2.name = "我有名字了";
console.log(obj1.name); // 我有名字了

由上面例子，我们声明了一个引用数据类型变量obj1，并把它赋值给了另外一个引用数据类型变量obj2。当我们obj2添加了一个name属性并赋值”我有名字了”。obj1同样拥有了和obj2一样的name属性。说明这两个引用数据类型变量指向同一个堆内存对象。obj1赋值给obj2，实际只是把这个堆内存对象在栈内存的引用地址复制了一份给了obj2，但它们本质上共同指向了同一个堆内存对象。

下面我们来演示这个引用数据类型赋值过程：



自然，给obj2添加name属性，实际上是给堆内存中的对象添加了name属性，obj2和obj1在栈内存中保存的只是堆内存对象的引用地址，虽然也是拷贝了一份，但指向的对象却是同一个。故而改变obj2引起了obj1的改变。

一般而言，基本数据类型是有固定数目的字节组成，这些字节可以在解析器的较底层进行操作比如Number和Boolean；而引用数据类型，可以包含任意数目的属性和元素，因此它们无法像基本数据类型那样很容易的操作。由于，引用数据类型的值是会发生变化的，所以通过跟基本数据类型一样的值传递方式，也就没什么意义了，因为会牵涉到大量的内存的复制和比较，效率太低。所以引用数据类型是通过引用传递方式，实际传递的只是对象的一个地址。比如Array和Function因为它们都是特殊的对象所以它都是引用类型。另外，引用类型是可以添加属性，基本类型虽然也可以添加属性，也不会报错，经测试添加完之后却是无法访问的。

看下面代码：

var a = 12;
a.name = "myname";
console.log(a.name); // undefined

String——一个特殊的基本数据类型

在很多语言中，String是以对象的形式表示的，但在ECMAScript里没有沿用这种传统，String是当作一种基本数据类型，但它是一个比较特殊的基本类型。

看上去好像String应该做为一个引用类型，可实际上它不是，因为它不是对象。那么看起来它应该是基本数据类型，应该是通过值传递的方式来操作。

看下面例子：

var stra = "这是一个字符串";
var strb = stra;
stra = "这是另外一个字符串";
console.log(strb); // 这是一个字符串

上面例子我们看到，仿佛stra通过值传递的方式复制了一份给了strb。当stra改变的时候，strb并没有改变，似乎我们已经可以下结论，String就是个基本数据类型。

因为字符串具有可变的大小，所以显然它不能被直接存储在具有固定大小的变量中。由于效率的原因，我们希望JS只复制对字符串的引用，而不是字符串的内容。通过值传递，一个一个的复制字节显示效率依然很低，看起来String也可以当作引用类型。

看下面例子：

var a = "myobject";
a.name = "myname";
console.log(a.name); // undefined

显示String无法当作一个对象来处理。实际上，javascript里的String是不可以改变的，javascript也没有提供任何一个改变字符串的方法和语法。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量。

var lang = "Java";
lang=lang+"Script";

以上示例中的变量lang开始时包含字符串“Java”。而第二行代码把lang的值重新定义为“Java”与“Script”的组合，即“JavaScript”。实现这个操作的过程如下：首先创建一个能容纳10个字符的新字符串，然后在这个字符串中填充“Java”和“Script”，最后一步是销毁原来的字符串”Java”和字符串”Script”，因为这两个字符串已经没用了。

var a = "myobject";
a = a.substring(3,5)
console.log(a); // bj

记住这样做，就没有改变String字符串”myobject”,只a引用了另一个字符串”bj”,”myobject”被回收了。

所以可以这样讲，String实际上并不符合上面两种数据类型分类。它是具有两方面属性介于两者之间的一种特殊类型。

区别

存储方式上

内存分为栈区（stack）和堆区（heap），然后在JS中开发人员并不能直接操作堆区，堆区数据由JS引擎操作完成

我们简单的通过下面这张图来分析：



JS中变量的定义在内存中包括三个部分：

变量标识符　　（比如上图中的Str，变量标示存储在内存的栈区）

变量值　　 （比如上面中的Str的值souvenir或者是obj1对象的指向堆内存中该对象的指针，也可以说是该对象在堆内存的地址。这个值也是存储在栈区）

对象　　 （比如上图中的对象1或者对象2，对象存储在堆区）

当对基本类型进行操作时，js引擎直接操作变量标识符对应的实际值

当对引用类型进行操作时，js引擎先找到变量标识符对应的堆区地址，取得地址后从堆中取到对象。

String

字符串数据被存储到堆，然后把字符串的引用地址存储在字符串变量中。同时为了避免错误操作，js解释器强制约定字符串在堆存储的数据是不可变的。相当于设置字符串在堆区存储的数据是只读的。

行为上

是否可变

基本类型的值是不可变：

任何方法都无法改变一个基本类型的值，比如一个字符串：

var name = ‘jozo’;

name.toUpperCase(); // 输出 ‘JOZO’

console.log(name); // 输出 ‘jozo’

会发现原始的name并未发生改变，而是调用了toUpperCase()方法后返回的是一个新的字符串。

再来看个：

var person = ‘jozo’;

person.age = 22;

person.method = function(){//…};

console.log(person.age); // undefined

console.log(person.method); // undefined

通过上面代码可知，我们不能给基本类型添加属性和方法，再次说明基本类型时不可变得；

引用类型的值是可变的

我们可为为引用类型添加属性和方法，也可以删除其属性和方法，如：

var person = {};//创建个控对象 –引用类型

person.name = ‘jozo’;

person.age = 22;

person.sayName = function(){console.log(person.name);}

person.sayName();// ‘jozo’

delete person.name; //删除person对象的name属性

person.sayName(); // undefined

上面代码说明引用类型可以拥有属性和方法，并且是可以动态改变的。

比较

基本类型的比较是值的比较：

只有在它们的值相等的时候它们才相等。

但你可能会这样：

var a = 1;

var b = true;

console.log(a == b);//true

它们不是相等吗？其实这是类型转换和 == 运算符的知识了，也就是说在用==比较两个不同类型的变量时会进行一些类型转换。像上面的比较先会把true转换为数字1再和数字1进行比较，结果就是true了。 这是当比较的两个值的类型不同的时候==运算符会进行类型转换，但是当两个值的类型相同的时候，即使是==也相当于是===。

var a = ‘jozo’;

var b = ‘jozo’;

console.log(a === b);//true

引用类型的比较是引用的比较

var person1 = ‘{}’;

var person2 = ‘{}’;

console.log(person1 == person2); // true

上面讲基本类型的比较的时候提到了当两个比较值的类型相同的时候，相当于是用 === ，所以输出是true了。再看看：

var person1 = {};

var person2 = {};

console.log(person1 == person2); // false

可能你已经看出破绽了，上面比较的是两个字符串，而下面比较的是两个对象，为什么长的一模一样的对象就不相等了呢？

别忘了，引用类型时按引用访问的，换句话说就是比较两个对象的堆内存中的地址是否相同，那很明显，person1和person2在堆内存中地址是不同的：



所以这两个是完全不同的对象，所以返回false;

赋值

基本类型：简单赋值

在从一个变量向另一个变量赋值基本类型时，会在该变量上创建一个新值，然后再把该值复制到为新变量分配的位置上：

var a = 10;
var b = a;

a ++ ;
console.log(a); // 11
console.log(b); // 10

此时，a中保存的值为 10 ，当使用 a 来初始化 b 时，b 中保存的值也为10，但b中的10与a中的是完全独立的，该值只是a中的值的一个副本，此后，这两个变量可以参加任何操作而相互不受影响。



也就是说基本类型在赋值操作后，两个变量是相互不受影响的。

引用对象：对象引用

当从一个变量向另一个变量赋值引用类型的值时，同样也会将存储在变量中的对象的值复制一份放到为新变量分配的空间中。前面讲引用类型的时候提到，保存在变量中的是对象在堆内存中的地址，所以，与简单赋值不同，这个值的副本实际上是一个指针，而这个指针指向存储在堆内存的一个对象。那么赋值操作后，两个变量都保存了同一个对象地址，则这两个变量指向了同一个对象。因此，改变其中任何一个变量，都会相互影响：

var a = {}; // a保存了一个空对象的实例

var b = a; // a和b都指向了这个空对象

a.name = ‘jozo’;

console.log(a.name); // ‘jozo’

console.log(b.name); // ‘jozo’

b.age = 22;

console.log(b.age);// 22

console.log(a.age);// 22

console.log(a == b);// true

它们的关系如下图：



因此，引用类型的赋值其实是对象保存在栈区地址指针的赋值，因此两个变量指向同一个对象，任何的操作都会相互影响。

小结

数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，所以放入栈中存储。

引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能。

基本类型变量存的是数据的具体值，而引用类型变量保存的是值的引用。

string类型有些特殊，因为字符串具有可变的大小，所以显然它不能被直接存储在具有固定大小的变量中。由于效率的原因，我们希望JS只复制对字符串的引用，而不是字符串的内容。但是另一方面，字符串在许多方面都和基本类型的表现相似，而字符串是不可变的这一事实（即没法改变一个字符串值的内容），因此可以将字符串看成

行为与基本类型相似的不可变引用类型

参考资料：http://www.jb51.net/article/65911.htm

https://www.cnblogs.com/wpp12345/p/6076659.html

https://segmentfault.com/a/1190000002789651

http://www.cnblogs.com/souvenir/p/4969565.html