Javascript 进阶 4-6 物件的参考特性

这个章节要来介绍传值以及传参考的概念

首先我们先来看看程式码吧

var person = '小明';var person2 = person;person2 = '杰伦';console.log(person, person2);

大家可以看看这样 console.log(person, person2); 印出来的会是甚么喔。

http://img2.58codes.com/2024/20121770AVL7Uo9g2d.png

很明显就是如预期的 小明 杰伦 , 感觉上就是先建立了 person 这个变数,并且赋值字串的'小明'给他,之后也建立了 person2 的变数,并且将 person 这个变数的内容指向给 person2 的变数。

这时候 person2 的变数 的值会是小明,之后再将 person2 的变数 重新赋值给一个字串'杰伦'。

所以最后印出来的结果会是 小明 杰伦。很合理~

那我们再来看看另一段程式码

var person = {    name: '小明'};var person2 = person;person2.name = '杰伦';console.log(person.name, person2.name);console.log(person === person2); 

这样印出来的两个 perosn 物件 里面的 name 会是甚么呢?

http://img2.58codes.com/2024/20121770UBvP6DyZ5h.png

天啊~怎么两个都是 杰伦 !!! 怎么会这样呢?

而且用严格比对两个物件居然还是 true ,代表完全相同ㄟ WHY?

其实这也是 Javascript 的特性喔!

物件传参考的特性

http://img2.58codes.com/2024/20121770uJglZaLxey.png

Javascript 在赋予一个值在变数上的时候,会有两个特性,一个称为 传值 另一个则是 传参考。

左边这些类型的资料型别就是传值,也就是最上方字串的範例,做修改的时候只会更动被修改的变数内容。

而只要是物件型别的资料结构,就是属于传参考的模式,传的参考其实是记忆体位置。

我们继续往下看~

http://img2.58codes.com/2024/201217703qgtP9nEKR.png

以上面字串的範例来看

var person2 = person; 的时候,就会变成下图的状况

http://img2.58codes.com/2024/20121770yUQ3kLfOek.png

接着我们改变了 person2 的内容,但因为是传值,所以 person 并不会跟着改变。

http://img2.58codes.com/2024/201217704giIjkoLlW.png

接下来看一下 传参考 的概念

为了方便起见呢 图片中的 0x01 代表物件的内容被宣告的记忆体位置

http://img2.58codes.com/2024/20121770kRqqQkOeOh.png

可以看到当我们宣告 var person2 = person; 的时候,其实是将 person 的记忆体位置也指向给 person2,也就是 person 以及 person2都共享同一个记忆体空间的内容,也就是 0x01 的 物件内容。

所以依照这个逻辑来看,当我们改变了不论是 person 还是 person2 的 name,两者取值印出来的结果都会一样,是被改变后的结果。

http://img2.58codes.com/2024/201217709yQRsVcEdR.png

那么如果今天重新赋予 perosn2 新的 物件实字 的物件的话呢,他就会重新再另一个记忆体空间,放置被赋予的物件

http://img2.58codes.com/2024/20121770ok4oDinIuO.png

http://img2.58codes.com/2024/20121770PRncuIEfo2.png

这样子更改 name 的值,就不会造成两个一起更动的状况噜~

那我们直接看看程式码~

var person = {    name: '小明'};var person2 = person;person2 = {    name: '小明'};console.log(person.name, person2.name);console.log(person === person2); 

http://img2.58codes.com/2024/20121770N7A5ihpnYG.png

可以看到,我后来重新以一个 物件实字 的方式重新赋予给 person2 一个跟 person 一模一样结构跟内容的物件。

但对于记忆体空间来说,这样赋值的方式就会是指向另一个记忆体空间。

所以在严格比对的结果才会是false,从这点来看,关于 Javascript 物件类型的资料型别,以严格模式比对的时候,其实比对的是 记忆体位置 !!

这篇文章就先到这边,下篇文章会有更完整的介绍

希望对大家的理解有帮助~汪汪


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章