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); // -> "color: #ff0000">总结以上所述是小编给大家介绍的JavaScript的值传递和引用传递,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]