深入理解JavaScript的值传递和引用传递


Posted in Javascript onOctober 24, 2018

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); // -> ?

总结

以上所述是小编给大家介绍的JavaScript的值传递和引用传递,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js/jQuery简单实现选项卡功能
Jan 02 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
详解JavaScript中typeof与instanceof用法
Oct 24 #Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 #Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 #Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 #Javascript
vue中的router-view组件的使用教程
Oct 23 #Javascript
jQuery pagination分页示例详解
Oct 23 #jQuery
jquery.pagination.js分页使用教程
Oct 23 #jQuery
You might like
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
js 调整select 位置的函数
2008/02/21 Javascript
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
JavaScript中string对象
2015/06/12 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
Python判断Abundant Number的方法
2015/06/15 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
如何在django中添加日志功能
2020/02/06 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
交通事故代理词范文
2015/05/23 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书