符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
译者按: 机智如你,应该可以答对文末的面试题吧?如果不能,请好好学习,天天编程:)
晋中网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作,到程序开发,运营维护。创新互联从2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。原文: Explaining Value vs. Reference in Javascript
为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。
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),那么它只记录了一个内存地址,该地址存放了具体的数据。注意之前提到指向基本数据类型的变量相当于包含了数据,而现在指向非基本数据类型的变量本身是不包含数据的。
对象在内存中被创建,当我们声明arr = []
,我们在内存中创建了一个数组。arr
记录的是该内存的地址。
var arr = []; // (a)
arr.push(1); // (b)
当执行完(a)之后,内存中创建了一个空的数组对象,其内存地址为#001
,arr
指向该地址。
变量 | 地址 | 对象 |
---|---|---|
arr | #001 | [] |
当执行完(b)之后,数组对象中多了一个元素,但是数组的地址依然没有变,arr
也没有变。
变量 | 地址 | 对象 |
---|---|---|
arr | #001 | [1] |
对象是通过引用传递,而不是值传递。也就是说,变量赋值只会将地址传递过去。
var reference = [1];
var refCopy = reference;
变量 | 地址 | 对象 |
---|---|---|
reference | #001 | [1] |
refCopy | #001 |
reference
和refCopy
指向同一个数组。 如果我们更新reference
,refCopy
也会受到影响。
reference.push(2);
console.log(reference, refCopy); // [1, 2], [1, 2]
变量 | 地址 | 对象 |
---|---|---|
reference | #001 | [1, 2] |
refCopy | #001 |
如果我们将一个已经赋值的变量重新赋值,那么它将包含新的数据或则引用地址。
var obj = { first: 'fundebug.com'};
obj = { second: 'fundebug.cn'};
obj
从指向第一个对象变为指向第二个对象。
变量 | 地址 | 对象 |
---|---|---|
obj | #001 | {first: 'fundebug.com'} |
#002 | {second: 'fundebug.cn'} |
如果一个对象没有被任何变量指向,就如第一个对象(地址为#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);
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了7亿+错误事件,得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用!
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/08/09/explain_value_reference_in_js/
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。