js中的值类型和引用类型的区别

1.JavaScript中的变量类型有哪些？

（1）值类型（基本类型）：字符串（string）、数值（number）、布尔值（boolean）、undefined、null  （这5种基本数据类型是按值访问的，由于能够操做保存在变量中的实际的值）(ECMAScript 2016新增了一种基本数据类型：symbol http://es6.ruanyifeng.com/#docs/symbol )

（2）引用类型：对象（Object）、数组（Array）、函数（Function）

 

2.值类型和引用类型的区别

（1）值类型：一、占用空间固定，保存在栈中（当一个方法执行时，每一个方法都会创建本身的内存栈，在这个方法内定义的变量将会逐个放入这块栈内存里，随着方法的执行结束，这个方法的内存栈也将天然销毁了。所以，全部在方法中定义的变量都是放在栈内存中的；栈中存储的是基础变量以及一些对象的引用变量，基础变量的值是存储在栈中，而引用变量存储在栈中的是指向堆中的数组或者对象的地址，这就是为什么修改引用类型总会影响到其余指向这个地址的引用变量。）

                        二、保存与复制的是值自己

                        三、使用typeof检测数据的类型

                        四、基本类型数据是值类型

（2）引用类型：一、占用空间不固定，保存在堆中（当咱们在程序中建立一个对象时，这个对象将被保存到运行时数据区中，以便反复利用（由于对象的建立成本一般较大），这个运行时数据区就是堆内存。堆内存中的对象不会随方法的结束而销毁，即便方法结束后，这个对象还可能被另外一个引用变量所引用（方法的参数传递时很常见），则这个对象依然不会被销毁，只有当一个对象没有任何引用变量引用它时，系统的垃圾回收机制才会在核实的时候回收它。）

                           二、保存与复制的是指向对象的一个指针

                           三、使用instanceof检测数据类型

                           四、使用new()方法构造出的对象是引用型

 

实例：

// 值类型：Number、string、bollean、undefined
var a = 100
var b = a
a = 200
console.log(b) // 100 保存与复制的是值自己


// 引用类型：对象、数组、函数、null(空指针)
// 能够扩展属性
var a = {age:20}
var b = a
b.age = 21 
console.log(a.age) // 21 

// 利用typeof来区分
typeof undefined // undefined
typeof 'abc' // string
typeof 123 // number
typeof true // boolean
// typeof 区分不出来引用类型（除了函数）
typeof {} // object
typeof [] // object
typeof null // object
typeof console.log //function

// 用instanceof来区分引用类型

// 若是变量是给定引用类型（根据它的原型链来识别）的实例，那么instanceof 操做符就会返回 true。

console.log(person instanceof Object); // 变量 person 是 Object 吗？

console.log(colors instanceof Array); // 变量 colors 是 Array 吗？

console.log(pattern instanceof RegExp); // 变量 pattern 是 RegExp 吗？

 

3. 几方面的区别举例：

（1）动态的属性： 定义基本类型值和引用类型值的方式是相似的。可是，当这个值保存到变量中之后，对不一样类型值能够执行的操做则截然不同。对于引用类型的值，咱们能够为其添加属性和方法，也能够改变和删除其属性和方法，可是，咱们不能给基本类型的值添加属性，只能给引用类型值动态地添加属性，以便未来使用。例如

var person = new Object(); 
person.name = "Nicholas"; 
alert(person.name); //"Nicholas"

（2）复制变量值： 若是从一个变量向另外一个变量复制基本类型值，会在变量对象上建立一个新值，而后把该值复制到为新变量分配的位置上。

var num1 = 5;
var num2 = num1

上述例子中，num1保存的值是5，当使用 num1 的值来初始化 num2 时，num2 中也保存了值 5。但 num2中的 5 与 num1 中的 5 是彻底独立的，该值只是 num1 中 5 的一个副本。此后，这两个变量能够参与任何操做而不会相互影响。

复制基本类型的过程：

 

当从一个变量向另外一个变量复制引用类型的值时，一样也会将存储在变量对象中的值复制一份放到为新变量分配的空间中。不一样的是，这个值的副本其实是一个指针，而这个指针指向存储在堆中的一个对象。复制操做结束后，两个变量实际上引用同一个对象。所以，改变其中一个变量，就会影响另一个变量：例

var obj1 = new Object(); 
var obj2 = obj1; 
obj1.name = "Nicholas"; 
alert(obj2.name); //"Nicholas" 

 

首先，变量 obj1 保存了一个对象的新实例。而后，这个值被复制到了 obj2 中；换句话说，obj1和 obj2 都指向同一个对象。这样，当为 obj1 添加 name 属性后，能够经过 obj2 来访问这个属性，由于这两个变量引用的都是同一个对象。
复制值类型的过程以下图：

（3）传递参数：在向参数传递基本类型的值时，被传递的值会被复制给一个局部变量（即命名参数，或者用ECMAScript 的概念来讲，就是 arguments 对象中的一个元素）。在向参数传递引用类型的值时，会把这个值在内存中的地址复制给一个局部变量，所以这个局部变量的变化会反映在函数的外部。

function addTen(num) { 
 num += 10; 
 return num; 
} 

var count = 20; 
var result = addTen(count); 
alert(count); //20，没有变化
alert(result); //30 

在函数内部，参数 num 的值被加上了 10，但这一变化不会影响函数外部的 count 变量。参数num 与变量 count 互不相识，它们仅仅是具备相同的值。

function setName(obj) { 
 obj.name = "Nicholas"; 
} 
var person = new Object(); 
setName(person); 
alert(person.name); //"Nicholas" 

为了证实对象是按值传递的，咱们再看一看下面这个通过修改的例子：

function setName(obj) { 
 obj.name = "Nicholas"; 
 obj = new Object(); 
 obj.name = "Greg"; 
} 
var person = new Object(); 
setName(person); 
alert(person.name); //"Nicholas" 

若是 person 是按引用传递的，那么 person 就会自动被修改成指向其 name 属性值为"Greg"的新对象。可是，当接下来再访问 person.name 时，显示的值仍然是"Nicholas"。

这说明即便在函数内部修改了参数的值，但原始的引用仍然保持未变。实际上，当在函数内部重写 obj 时，这个变量引用的就是一个局部对象了。而这个局部对象会在函数执行完毕后当即被销毁。

4. 变量计算--强制类型转换

// 字符串拼接
var a = 100 + 10 //100
var b = 100 + '10' //10010
// == 运算符
100 == '100' //true
0 == '' //true
null == undefined //true
//  语句
var a = true
if(a){}
var b = 100
if(b){} // 把数字转换为true
var c = ''
if(c){} // 把空字符串转换为false
// 逻辑运算
console.log(10&&0); // 0 把10转换成true
console.log('' || 'abc'); // 'abc' 把空字符串转换为false
console.log(!window.abc); // window.abc是undefined 把非undefined转换成true

//判断一个变量会被当作true仍是false
var a = 100
console.log(!!a); // true