JavaScript基本类型与引用类型的核心区别与内存机制

基本类型与引用类型的定义

一、基本类型和引用类型

JavaScript中主要包含五种基本数据类型：undefined、boolean、number、string以及null。

typeof null; //"object"
typeof undefined; //"undefined"
typeof 1; //"number"
typeof false //"boolean"
typeof "1" //"string"

值得注意的是，对null执行typeof操作会返回“object”，这看似矛盾，但根据ECMAScript标准，null实际上被定义为一个独立的独特类型。

为了方便操作基本类型的值，ECMAScript提供了三个特殊的引用类型：Boolean、Number和String。标准库通过构造函数将这些基本值封装为对象。这些包装类型与其他引用类型类似，具备特定的行为。每当访问基本类型值时，后台会自动创建一个对应的基本包装类型对象，从而允许调用相关方法。

var s1 = "some text";
var s2 = s1.substring(2);
var s3 = new String("some text");

然而，String对象与原始字符串不同，它是一个真正的对象实例。

typeof s1; //"string"
typeof s3; //"object"

例如，变量s1包含一个字符串，属于基本类型。但在下一行代码中，我们调用了s1的substring()方法并将结果存入s2。从逻辑上讲，基本类型并非对象，不应具备方法，但JavaScript通过后台自动处理实现了这一直观操作。当访问s1时，系统处于读取模式，从内存中获取字符串值，并自动执行以下处理步骤：

（1）创建String类型的一个实例。

（2）在创建的实例上调用指定的方法。

（3）销毁该实例。

可以使用以下代码表示：

var s1 = new String("some text");
var s2 = s1.substring(2);
s1 = null;

经过上述处理，基本字符串值在行为上变得与对象一致。同样的三个步骤也适用于Boolean和Number类型对应的布尔值和数字值。

对象生命周期与包装类型

二、生命周期

引用类型与基本包装类型的主要区别在于对象的生命周期。使用new操作符创建的引用类型实例，在执行流离开当前作用域之前会一直保留在内存中。而自动创建的基本包装类型对象仅存在于该行代码的执行期间（瞬间），执行完毕后立即销毁。这意味着我们无法在运行时为自动创建的基本包装类型对象添加属性或方法。

var s1 = "some text";
s1.color = "red";
alert(s1.color); //undefined

当然，可以显式调用Boolean、Number和String构造函数来创建基本包装类型的对象，但不建议这样做。对基本包装类型的实例调用typeof会返回“object”，且所有基本包装类型的对象在布尔上下文中都会被转换为true。

var obj = new Object("some text");
alert(obj instanceof String) //true

需要特别注意的是，使用new调用基本包装类型的构造函数与直接调用同名的转型函数是有区别的。

var value = "25";
var number = Number(value);//转型函数
alert(typeof number) //number

var obj = new Number(var); //构造函数
alert(typeof obj) //object

基本类型的核心特性

三、基本类型特点

1. 基本类型的值是不可变的：

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

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

通过上述代码可知，我们无法给基本类型添加属性和方法，这再次证明了基本类型的不可变性。

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

只有当它们的值相等时，它们才被视为相等。 但你可能遇到如下情况：

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

3. 基本类型的变量是存放在栈区的（栈区指内存里的栈内存）

假设有以下几个基本类型的变量：

var name = 'jozo';
var city = 'guangzhou';
var age = 22;

那么它的存储结构如下图：

栈区内存中既包括变量的标识符，也包括变量的值。

引用类型的内存与比较机制

四、引用类型特点

引用类型的处理机制相对复杂有趣。

JavaScript中，除了上述基本类型（number、string、boolean、null、undefined）之外，其余均为引用类型，也就是对象。对象是属性和方法的集合，引用类型可以拥有属性和方法，且属性可以包含基本类型或引用类型。以下是引用类型的一些特性：

1）. 引用类型的值是可变的

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

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

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

2). 引用类型的值是同时保存在栈内存和堆内存中的对象

JavaScript与其他语言不同，它不允许直接访问内存中的位置，即不能直接操作对象的内存空间。我们实际操作的，是对象的引用。因此，引用类型的值是按引用访问的。

准确地说，引用类型的存储需要内存的栈区和堆区（堆区是指内存里的堆内存）共同完成。栈区内存保存变量标识符和指向堆内存中该对象的指针（即对象在堆内存的地址）。 假设有以下几个对象：

var person1 = {name:'jozo'};
var person2 = {name:'xiaom'};
var person3 = {name:'xiaoq'};

则这三个对象在内存中保存的情况如下图：

3). 引用类型的比较是引用的比较

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

它们的关系如下图：

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

以上就是本文的全部内容，希望对大家的学习有所帮助。