javascript引用類型指針的工作方式
先看個(gè)例子:
<script>
var a = {n:1};
var b = a;
a.x = a = {n:2};
console.log(a.x);// --> undefined
console.log(b.x);// --> [object Object]
</script>
上面的例子看似簡(jiǎn)單,但結(jié)果并不好了解,很容易把人們給想繞了——“a.x不是指向?qū)ο骯了么?為啥log(a.x)是undefined?”、“b.x不是應(yīng)該跟a.x是一樣的么?為啥log出來(lái)居然有2個(gè)對(duì)象”
當(dāng)然各位可以先自行理解一下,若能看出其中的原因和工作機(jī)理自然就無(wú)須繼續(xù)往下看啦。
下面來(lái)分析下這段簡(jiǎn)單代碼的工作步驟,從而進(jìn)一步理解js引用類型“賦值”的工作方式。
首先是
var a = {n:1};
var b = a;
在這里a指向了一個(gè)對(duì)象{n:1}(我們姑且稱它為對(duì)象A),b指向了a所指向的對(duì)象,也就是說(shuō),在這時(shí)候a和b都是指向?qū)ο驛的:

這一步很好理解,接著繼續(xù)看下一行非常重要的代碼:
a.x = a = {n:2};
我們知道js的賦值運(yùn)算順序永遠(yuǎn)都是從右往左的,不過(guò)由于“.”是優(yōu)先級(jí)最高的運(yùn)算符,所以這行代碼先“計(jì)算”了a.x。
這時(shí)候發(fā)生了這個(gè)事情——a指向的對(duì)象{n:1}新增了屬性x(雖然這個(gè)x是undefined的):

從圖上可以看到,由于b跟a一樣是指向?qū)ο驛的,要表示A的x屬性除了用a.x,自然也可以使用b.x來(lái)表示了。
接著,依循“從右往左”的賦值運(yùn)算順序先執(zhí)行 a={n:2} ,這時(shí)候,a指向的對(duì)象發(fā)生了改變,變成了新對(duì)象{n:2}(我們稱為對(duì)象B):

接著繼續(xù)執(zhí)行 a.x=a,很多人會(huì)認(rèn)為這里是“對(duì)象B也新增了一個(gè)屬性x,并指向?qū)ο驜自己”
但實(shí)際上并非如此,由于一開(kāi)始js已經(jīng)先計(jì)算了a.x,便已經(jīng)解析了這個(gè)a.x是對(duì)象A的x,所以在同一條公式的情況下再回來(lái)給a.x賦值,也不會(huì)說(shuō)重新解析這個(gè)a.x為對(duì)象B的x。
所以 a.x=a 應(yīng)理解為對(duì)象A的屬性x指向了對(duì)象B:

那么這時(shí)候結(jié)果就顯而易見(jiàn)了。當(dāng)console.log(a.x)的時(shí)候,a是指向?qū)ο驜的,但對(duì)象B沒(méi)有屬性x。沒(méi)關(guān)系,當(dāng)查找一個(gè)對(duì)象的屬性時(shí),JavaScript 會(huì)向上遍歷原型鏈,直到找到給定名稱的屬性為止。但當(dāng)查找到達(dá)原型鏈的頂部 - 也就是 Object.prototype - 仍然沒(méi)有找到指定的屬性B.prototype.x,自然也就輸出undefined;
而在console.log(b.x)的時(shí)候,由于b.x表示對(duì)象A的x屬性,該屬性是指向?qū)ο驜,自然也輸出了[object Object]了,注意這里的[object Object]可不是2個(gè)對(duì)象的意思,對(duì)象的字符串形式,是隱式調(diào)用了Object對(duì)象的toString()方法,形式是:"[object Object]"。所以[object Object]表示的就只是一個(gè)對(duì)象罷了
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- JavaScript之引用類型介紹
- Js從頭學(xué)起(基本數(shù)據(jù)類型和引用類型的參數(shù)傳遞詳細(xì)分析)
- js中的值類型和引用類型小結(jié) 文字說(shuō)明與實(shí)例
- JavaScript中值類型與引用類型實(shí)例說(shuō)明
- js類型轉(zhuǎn)換與引用類型詳解(Boolean_Number_String)
- js中判斷Object、Array、Function等引用類型對(duì)象是否相等
- JavaScript入門教程之引用類型
- JavaScript學(xué)習(xí)筆記整理之引用類型
- JavaScript引用類型和基本類型詳解
- 詳解JavaScript基本類型和引用類型
- JavaScript基礎(chǔ)篇(3)之Object、Function等引用類型
- 跟我學(xué)習(xí)javascript的基本類型和引用類型
- 《JavaScript高級(jí)編程》學(xué)習(xí)筆記之object和array引用類型
- JavaScript中各種引用類型的常用操作方法小結(jié)
相關(guān)文章
js實(shí)現(xiàn)精確到秒的倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)精確到秒的倒計(jì)時(shí)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05
JavaScript必知必會(huì)(三) String .的方法來(lái)自何方
這篇文章主要介紹了JavaScript必知必會(huì)(三) String .的方法來(lái)自何方的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
javascript實(shí)現(xiàn)拍照功能詳細(xì)示例代碼
這篇文章主要給大家介紹了關(guān)于javascript實(shí)現(xiàn)拍照功能的相關(guān)資料, 最近做項(xiàng)目,遇到一個(gè)正常但又少見(jiàn)的需求之拍照,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-07-07
DWR實(shí)現(xiàn)模擬Google搜索效果實(shí)現(xiàn)原理及代碼
本文主要介紹DWR實(shí)現(xiàn)模擬Google搜索效果實(shí)現(xiàn)原理,感興趣的朋友可以了解下,或許對(duì)你的DWR學(xué)習(xí)有幫助,閑話就不多說(shuō)了,看代碼了2013-01-01
JS性能優(yōu)化實(shí)現(xiàn)方法及優(yōu)點(diǎn)進(jìn)行
這篇文章主要介紹了JS性能優(yōu)化實(shí)現(xiàn)方法及優(yōu)點(diǎn)進(jìn)行,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08

