iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
0
Modern Web

【這些年我似是非懂的 Javascript】系列 第 29

【這些年我似是非懂的 Javascript】Day 29 - 物件 # Part 5 # 特性存取的秘密

今天要來分享特性存取的秘密~

[[GET]]

你知道當你在存取一個物件裡面的特性時會發生什麼事情嗎?

const obj ={
    a: 16
}

obj.a; // 16

obj.a 是一個特性存取的動作,但是他不只是單純只是找 obj 內有無 a 這個特性而已...
難道...
他會往外找!?

...

沒有! 你想太多了xD
其實他會對他執行一個 [[GET]] 的作業,基本上他會先看你這個物件有沒有你要找的特性,有的話他就回傳該值,沒有的話...

就會發生很可怕的事...
就是書上說在第十章的 [[Prototype]]串鏈 會提到xDD 所以現在我也不知道

反正他有一個重要的結果是他如果找不到任何方法找到該值他就會回傳 undefined

看起來就是找有的東西比找沒有的東西來的麻煩許多~
你說是吧!?

[[Put]]

既然有 Get 那有個 Put 也不稀奇(?

基本上這邊就是當你要 assign 值給一個特性時他會做些啥?

  1. 該特性是一個存取器描述器嗎? 如果是就呼叫他的設值器
  2. 該特性是 writable 為 false 的一個資料描述器嗎? 在 嚴格模式就噴爆你,不是就不噴你。
  3. 如果是writable 為 true 的話,就照正常方式把值給那個現存的特性。

所以我說 存取器描述器資料描述器 那麼多專業名詞到底是三...?

  • 存取器描述器
    當他有取值器或是設值器,他就是一個"存取器描述器"。 簡單來說就是 getset 啦。
  • 資料描述器
    定義一個屬性時,他沒有取值器或是設值器時他就是資料描述器。 簡單來說看起來就是純資料啦。

那如果跟上面的 [[Get]]一樣找不到相關的特性,會怎麼做?
這部分也是屬於之後第十章的 [[Prototype]]的範疇xDD
我們之後來看看~

存在 (Existence)

前面有說假使像是存取該不存在的特性時,他會回傳 undefined,但是有一種可能像是這樣。

const obj={
    a: undefined
}

obj.a; // undefined

嗯...
他就是把 undefined 丟進存在的特性當值,那我們到底要怎麼區分他到底存不存在呢?

可以使用以下兩種方式

const obj={
    a: undefined
}

('a' in obj); // true
('b' in obj); // true

obj.hasOwnProperty(a); // true 
obj.hasOwnProperty(b); // false 

以上是今天的文章
感謝收看

最近越來越忙,鐵人賽也到了尾聲,
可惜今天還是來不及寫到迭代 Orz


參考來源:

你所不知道的 JS|範疇與 Closures,this 與物件原型 (You Don't Know JS: this & Object Prototypes))


上一篇
【這些年我似是非懂的 Javascript】Day 28 - 物件 # Part 4 # 特性描述器 Combo
下一篇
【這些年我似是非懂的 Javascript】Day 30 - 完賽心得
系列文
【這些年我似是非懂的 Javascript】34

尚未有邦友留言

立即登入留言