JavaScript的值传递和引用传递

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

原文: Explaining Value vs. Reference in Javascript

译者: Fundebug

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

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'

ax都包含10,by都包含'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)之后,内存中创建了一个空的数组对象,其内存地址为#001arr指向该地址。

变量

地址

对象

arr

#001

[]

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

变量

地址

对象

arr

#001

[1]

引用传递

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

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

变量

地址

对象

reference

#001

[1]

refCopy

#001

referencerefCopy指向同一个数组。 如果我们更新referencerefCopy也会受到影响。

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的值拷贝给变量xtwo的值拷贝给变量y

纯函数

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

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

因此,很多数组函数,比如Array.mapArray.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中,将对象personage更新并返回。原始的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以及本文地址:
https://blog.fundebug.com/2017/08/09/explain_value_reference_in_js/

您的用户遇到BUG了吗?

体验Demo 免费使用

.copyright * { box-sizing: border-box; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Vamei实验室

Python深入01 特殊方法与多范式

Python一切皆对象,但同时,Python还是一个多范式语言(multi-paradigm),你不仅可以使用面向对象的方式来编写程序,还可以用面向过程的方式来...

1845
来自专栏Bug生活2048

Python自学之路-内置函数说明及实例(二)

这有利于组织代码,把某些应该属于某个类的函数给放到那个类里去,同时有利于命名空间的整洁。

1081
来自专栏debugeeker的专栏

《coredump问题原理探究》Linux x86版6.3节有成员变量的类coredump例子

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuzhina/article/detai...

631
来自专栏Crossin的编程教室

【Python 第67课】函数的参数传递(1)

本篇面向读者:有一点点 Python 基础 关键字:函数,参数,默认值 先说下上次课最后留的那题,我自己的解法: print ';'.join([str(i) ...

2605
来自专栏数据科学与人工智能

【Python环境】12道 Python面试题总结

1、Python是如何进行内存管理的? Python的内存管理主要有三种机制:引用计数机制、垃圾回收机制和内存池机制。 a. 引用计数 当给一个对象分配一个新名...

2275
来自专栏Golang语言社区

JS基础随笔(菜鸟必看篇)

JavaScript中的数据类型 简单(基本)数据类型:Number、String、Boolean、Undefined、Null 复杂(引用)数据类型: Obj...

3379
来自专栏老九学堂

10分钟,掌握90%的人都不会的指针算术结构!

上例中,一般而言数组名array 代表数组本身,类型是int[10],但如果把array 看做指针的话,它指向数组的第0 个单元,类型是int* 所指向的类型是...

611
来自专栏aCloudDeveloper

VC库中快排函数的详解

Author: bakari  Date:  2012.8.9 以前都是自己手动写这个算法,觉得也不是一件很麻烦的事,但现在写的程序基本上都用得着快排,重新去写...

2037
来自专栏土豆专栏

Java面试之操作符

不正确,3.4是双精度数,将双精度型(double)赋值给浮点型(float)属于下转型(down-casting,也称为窄化)会造成精度损失,因此需要强制类型...

1155
来自专栏Python爬虫与数据挖掘

Python正则表达式初识(五)

正则表达式的内容很丰富,今天小编继续给大家分享Python正则表达式的基础知识。今天要给大家的讲的特殊字符是竖线“|”。竖线“|”实质上是一个或的关系。

784

扫码关注云+社区