JavaScript 值传递和引用传递

原文地址:https://blog.fundebug.com/2017/08/09/explain_value_reference_in_js/

JavaScript的值传递和引用传递

译者按: 机智如你,应该可以答对文末的面试题吧?如果不能,请好好学习,天天编程:)

原文: Explaining Value vs. Reference in Javascript

译者: Fundebug

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

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

基本数据类型

如果一个基本的数据类型绑定到某个变量,我们可以认为该变量包含这个基本数据类型的值。

varx =10;

vary ='abc';

varz =null;

当我们使用=将这些变量赋值到另外的变量,实际上是将对应的值拷贝了一份,然后赋值给新的变量。我们把它称作值传递。

varx =10;

vary ='abc';

vara = x;

varb = y;

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

a和x都包含10,b和y都包含'abc',并且它们是完全独立的拷贝,互不干涉。如果我们将a的值改变,x不会受到影响。

varx =10;

vary ='abc';

vara = x;

varb = y;

a =5;

b ='def';

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

对象

如果一个变量绑定到一个非基本数据类型(Array, Function, Object),那么它只记录了一个内存地址,该地址存放了具体的数据。注意之前提到指向基本数据类型的变量相当于包含了数据,而现在指向非基本数据类型的变量本身是不包含数据的。

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

vararr = [];// (a)

arr.push(1);// (b)

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

变量地址对象

arr#001[]

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

变量地址对象

arr#001[1]

引用传递

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

varreference = [1];

varrefCopy = 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

引用重新赋值

如果我们将一个已经赋值的变量重新赋值,那么它将包含新的数据或则引用地址。

varobj = {first:'fundebug.com'};

obj = {second:'fundebug.cn'};

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

变量地址对象

obj#001{first: ‘fundebug.com’}

#002{second: ‘fundebug.cn’}

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

== 和 ===

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

vararrRef = ['Hi!'];

vararrRef2 = arrRef;

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

如果是不同的对象,及时包含相同的属性和值,也会返回false。

vararr1 = ["Hi!"];

vararr2 = ["Hi!"];

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

如果想判断两个不同的对象是否真的相同,一个简单的方法就是将它们转换为字符串然后判断。

vararr1str =JSON.stringify(arr1);

vararr2str =JSON.stringify(arr2);

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

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

函数参数

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

varhundred =100;

vartwo =2;

functionmultiply(x, y){

returnx * y;

}

vartwoHundred = multiply(hundred, two);

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

纯函数

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

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

因此,很多数组函数,比如Array.map和Array.filter是以纯函数的形式实现。虽然它们的参数是一个数组变量,但是通过深度拷贝并赋值给一个新的变量,然后在新的数组上操作,来防止原始数组被更改。

我们来看一个例子:

functionchangeAgeImpure(person){

person.age =25;

returnperson;

}

varalex = {

name:'Alex',

age:30

};

varchangedAlex = changeAgeImpure(alex);

console.log(alex);// { name: 'Alex', age: 25 }

console.log(changedAlex);// { name: 'Alex', age: 25 }

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

让我们来看如何实现一个纯函数:

functionchangeAgePure(person){

varnewPersonObj =JSON.parse(JSON.stringify(person));

newPersonObj.age =25;

returnnewPersonObj;

}

varalex = {

name:'Alex',

age:30

};

varalexChanged = changeAgePure(alex);

console.log(alex);// { name: 'Alex', age: 30 }

console.log(alexChanged);// { name: 'Alex', age: 25 }

我们通过JSON.sringify将对象变为一个字符串,然后再通过JSON.parse将字符串变回对象。通过该操作会生成一个新的对象。

一道简单的面试题

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

functionchangeAgeAndReference(person){

person.age =25;

    person = {

name:'John',

age:50

    };


returnperson;

}

varpersonObj1 = {

name:'Alex',

age:30

};

varpersonObj2 = changeAgeAndReference(personObj1);

console.log(personObj1);// -> ?

console.log(personObj2);// -> ?

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,029评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,238评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,576评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,214评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,324评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,392评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,416评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,196评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,631评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,919评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,090评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,767评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,410评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,090评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,328评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,952评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,979评论 2 351

推荐阅读更多精彩内容