JavaScript 中基本类型和引用类型赋值的区别

 

一、基本类型(Number、String、Undefined、Null、Boolean):

 

1.基本类型的值是不可变的,我们不能给基本类型添加属性和方法

 

验证:基本类型的值不可变

var person = "jozo";

// 添加age属性

person.age = 22;

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

如图所示：

 

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

var a = 1;

var b = true;

// == : 比较会先把true 转换为数字1

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

如图所示：

 

var a = 10;

var b = true; // 转换成 1

// == : 比较 会先把true 转换为数字1

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

如图所示：

 

var a = 0;

var b = false; // 0

// == : 比较 会把false 转换为数字0

console.log( a == b , a === b ) // true , false

如图所示：

 

 

// 基本类型,值的比较

var person1 = '{}';

var person2 = '{}';

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

如图所示：

 

3.基本类型的变量是存放在栈区的（栈区指内存里的栈内存）,栈区包括了 变量的标识符和变量的值。

 

基本类型存储:

 

基本类型赋值过程：

var a = 10;

// 将a赋值给b

var b = a;

// 修改a,不会影响b的变化

a = 20;

// b = 10?

console.log("b = " + b + ", a = " + a);

 

4.基本类型赋值: 拷贝赋值,值的拷贝,赋值完成后,两个变量就没有任何联系了。

var a = 10;

// 将a赋值给b

var b = a;

// 修改a,不会影响b的变化

a = 20;

// b = 10?

console.log("b = " + b + ", a = " + a);

如图所示：

 

 

二、引用类型(数组、对象、函数):

 

1.引用类型的值是可变的,引用类型添加属性和方法，也可以删除其属性和方法

 

验证:引用类型是可变的

var person = {};

// 添加age属性

person.age = 22;

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

如图所示：

 

// 删除person 对象的age属性

delete person.age;

console.log(person.age) // undefined

如图所示：

 

2.引用类型的值是同时保存在栈内存和堆内存中的对象,.引用类型的赋值其实是对象保存在栈区地址指针的赋值,拷贝赋值,地址的拷贝

(-引用类型的存储需要内存的栈区和堆区（堆区是指内存里的堆内存）共同完成，栈区内存保存变量标识符和指向堆内存中该对象的指针，也可以说是该对象在堆内存的地址。)

 

引用类型存储：

 

引用类型存储过程：

// {} , [] , function(){} 在堆区创建一块存储区域,返回一个新的地址

var person1 = function() {};

var person2 = function() {};

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

如图所示:

 

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

如图所示：

 

 

3.引用类型的比较是引用的比较(地址/指针的比较)

var person1 = {};

var person2 = {};

var person3 = person2;

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

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

如图所示: