原文: Explaining Value vs. Reference in Javascriptjavascript

译者: Fundebugjava

为了保证可读性，本文采用意译而非直译。另外，本文版权归原做者全部，翻译仅用于学习。面试

JavaScript有5种基本的数据类型，分别是：布尔、null、undefined、String和Number。这些基本类型在赋值的时候是经过值传递的方式。值得注意的是还有另外三种类型: Array、Function和Object，它们经过引用来传递。从底层技术上看，它们三都是对象。编程

基本数据类型

若是一个基本的数据类型绑定到某个变量，咱们能够认为该变量包含这个基本数据类型的值。数组

var x = 10;
var y = 'abc';
var z = null;

当咱们使用=将这些变量赋值到另外的变量，其实是将对应的值拷贝了一份，而后赋值给新的变量。咱们把它称做值传递。函数

var x = 10;
var y = 'abc';

var a = x;
var b = y;

console.log(x, y, a, b) // 10, 'abc', 10, 'abc'

a和x都包含10，b和y都包含'abc'，而且它们是彻底独立的拷贝，互不干涉。若是咱们将a的值改变，x不会受到影响。学习

var x = 10;
var y = 'abc';
var a = x;
var b = y;
a = 5;
b = 'def';
console.log(x, y, a, b); // 10, 'abc', 5, 'def'

对象

若是一个变量绑定到一个非基本数据类型(Array, Function, Object)，那么它只记录了一个内存地址，该地址存放了具体的数据。注意以前提到指向基本数据类型的变量至关于包含了数据，而如今指向非基本数据类型的变量自己是不包含数据的。ui

对象在内存中被建立，当咱们声明arr = []，咱们在内存中建立了一个数组。arr记录的是该内存的地址。spa

var arr = []; // (a)
arr.push(1); // (b)

当执行完(a)以后，内存中建立了一个空的数组对象，其内存地址为#001，arr指向该地址。翻译

当执行完(b)以后，数组对象中多了一个元素，可是数组的地址依然没有变，arr也没有变。

引用传递

对象是经过引用传递，而不是值传递。也就是说，变量赋值只会将地址传递过去。

var reference = [1];
var refCopy = reference;

reference和refCopy指向同一个数组。 若是咱们更新reference，refCopy也会受到影响。

reference.push(2);
console.log(reference, refCopy); // [1, 2], [1, 2]

引用从新赋值

若是咱们将一个已经赋值的变量从新赋值，那么它将包含新的数据或则引用地址。

var obj = { first: 'fundebug.com'};
obj = { second: 'fundebug.cn'};

obj从指向第一个对象变为指向第二个对象。

若是一个对象没有被任何变量指向，就如第一个对象(地址为#001)，JavaScript引擎的垃圾回收机制会将该对象销毁并释放内存。

== 和 ===

对于引用类型的变量，==和===只会判断引用的地址是否相同，而不会判断对象具体里属性以及值是否相同。所以，若是两个变量指向相同的对象，则返回true。

var arrRef = ['Hi!'];
var arrRef2 = arrRef;

console.log(arrRef === arrRef2); // true

若是是不一样的对象，及时包含相同的属性和值，也会返回false。

var arr1 = ["Hi!"];
var arr2 = ["Hi!"];

console.log(arr1 === arr2); // false

若是想判断两个不一样的对象是否真的相同，一个简单的方法就是将它们转换为字符串而后判断。

var arr1str = JSON.stringify(arr1);
var arr2str = JSON.stringify(arr2);

console.log(arr1str === arr2str); // true

另外一个方法就是递归地判断每个属性的值，直到基本类型位置，而后判断是否相同。

函数参数

当咱们将基本类型数据传入函数，函数会将这些数据拷贝赋值给函数的参数变量。

var hundred = 100;
var two = 2;
function multiply(x, y) {
 return x * y;
}
var twoHundred = multiply(hundred, two);

hundred的值拷贝给变量x，two的值拷贝给变量y。

纯函数

对于一个函数，给定一个输入，返回一个惟一的输出。除此以外，不会对外部环境产生任何附带影响。咱们机会称该函数为纯函数。全部函数内部定义的变量在函数返回以后都被垃圾回收掉。

可是，若是函数的输入是对象(Array, Function, Object)，那么传入的是一个引用。对该变量的操做将会影响到本来的对象。这样的编程手法将产生附带影响，是的代码的逻辑复杂和可读性变低。

所以，不少数组函数，好比Array.map和Array.filter是以纯函数的形式实现。虽然它们的参数是一个数组变量，可是经过深度拷贝并赋值给一个新的变量，而后在新的数组上操做，来防止原始数组被更改。

咱们来看一个例子：

function changeAgeImpure(person) {
 person.age = 25;
 return person;
}
var alex = {
 name: 'Alex',
 age: 30
};
var changedAlex = changeAgeImpure(alex);
console.log(alex); // { name: 'Alex', age: 25 }
console.log(changedAlex); // { name: 'Alex', age: 25 }

在非纯函数changeAgeImpure中，将对象person的age更新并返回。原始的alex对象也被影响，age更新为25。

让咱们来看如何实现一个纯函数：

function changeAgePure(person) {
 var newPersonObj = JSON.parse(JSON.stringify(person));
 newPersonObj.age = 25;
 return newPersonObj;
}
var alex = {
 name: 'Alex',
 age: 30
};
var alexChanged = changeAgePure(alex);
console.log(alex); // { name: 'Alex', age: 30 }
console.log(alexChanged); // { name: 'Alex', age: 25 }

咱们经过JSON.sringify将对象变为一个字符串，而后再经过JSON.parse将字符串变回对象。经过该操做会生成一个新的对象。

一道简单的面试题

值传递和引用传递常常在面试中被问到，来尝试回答一下以下代码如何输出：

function changeAgeAndReference(person) {
 person.age = 25;
 person = {
 name: 'John',
 age: 50
 };
 
 return person;
}
var personObj1 = {
 name: 'Alex',
 age: 30
};
var personObj2 = changeAgeAndReference(personObj1);
console.log(personObj1); // -> ?
console.log(personObj2); // -> ?

面试题思考：由于person.age=25是传递值因此影响到personObj1的age值，另外一个是构造了一个新函数因此没有影响。