關於JavaScript物件,你所不知道的事(一)- 先談物件

libinfs發表於2019-02-17

這篇博文的主要目的是為了填坑,很久之前我發表了一篇名為關於JavaScript物件中的一切(一) — 物件屬性的文章,想要談一談JavaScript物件,可那時只是貼了一張關於這個主題的思維導圖,今天我會針對這一主題進行展開,將JavaScript物件一些平常不太常用的知識系統的整理出來,方便閱讀者的記憶與理解。在看完本篇文章後,你大可跳轉回這篇博文,並儲存思維導圖,以加強記憶。

對於物件的一般認識

在開始正題之前,讓我們先憑直覺回憶一下我們對JavaScript物件的一般認識:

  1. 物件是一個引用型別值;
  2. 建立物件的方式有兩種形式:“字面量形式”與“建構函式形式”;
  3. 物件的屬性可以隨時修改,且一旦改動,所有引用物件的地方,其屬性值均會被改變(這也是引用型別的特點);
  4. 物件可以通過原型鏈實現繼承;

以上這些應該是JavaScript開發者對“物件”這一概念最基本的認識。但實際上,JavaScript給予了開發者以更細緻顆粒度操作/設定物件及其屬性的能力,這些能力是什麼?如何運用?這就是接下來我們要談到的話題。


物件與屬性

讓我們保持耐心,再梳理一下物件與屬性的關係:物件是屬性的集合,當物件的屬性是函式時,我們將其稱之為“方法”

我們不妨建立這樣的心智模型:物件是一隻藍色的(這裡的顏色特別重要,因為實際上,變數本身也是一隻大章魚,但她的身體卻是紅色的?)大章魚,章魚的每一隻觸手都握著一個屬性的記憶體地址卡片,當要讀取物件中的屬性時,章魚的觸手會隨著卡片上的地址拿到相應的資料值,並返還給使用者(就是你)。

接下來,讓我們從物件與屬性兩個角度切入,談談一些我們可能平常不太接觸到的知識。


物件的內部方法與特徵屬性

讓我們先定義這兩個名詞:

  • 內部方法是指:JavaScript於物件內部定義的,使用者不可訪問/修改的方法;
  • 特徵屬性是指:用來描述物件/屬性一些特性(如是否可配置?是否可迭代)的屬性;

簡單來說,JavaScript中物件和屬性都“藏”有一些我們不太常用的屬性和方法,我們的目的就是揪出它們,分析它們的用法和意義,然後對JavaScript物件有一個完整清晰的認識。

讓我們先從JavaScript物件的內部方法說起:

JavaScript物件有以下三個內部方法:

  1. [[Put]]:用來建立物件屬性,當新建物件屬性時被呼叫,就像命令藍色章魚長出一隻觸角,握住一張記憶體地址卡片;
  2. [[Set]]:用來修改物件屬性的值,當修改物件屬性時被呼叫,可以想象為命令藍色章魚的某個觸角放下已有的記憶體地址卡片,改換另一張;
  3. [[Delete]]:用來刪除物件屬性的值,當使用delete關鍵字刪除物件屬性時被呼叫,可以想象為砍掉藍色章魚的一隻觸角(別擔心,藍色章魚並不在意);

講到這裡我們可以很好的說明當設定某物件屬性值為null時會發生什麼了,那隻藍色章魚的觸角還在,只是拿了一張空白卡片!

let obj1 = {
    x: null,
}
console.log(obj1.x) // null

let obj2 = {
    y: null,
}
delete obj2.y
console.log(obj.y) // undefined(當訪問物件不存在的屬性時,一律得到undefined值)複製程式碼

接著我們來談談物件的特徵屬性

很遺憾物件的特徵屬性並不如屬性那麼多,我們這裡先介紹一個,名為:[[Extensible]],它的值是一個布林值,用來表示物件本身是否可以被修改,簡單來說,便是是否可以新增屬性(實際上,還有一個內部的[[proto]]特徵屬性)。

為了配置這個屬性,JavaScript給了我們一個專門的方法:Object.preventExtensions(),同時,為了檢測一個物件是否是可擴充套件的,JavaScript還給我們提供了Object.isExtensible()方法,讓我們看看它們的用法:

let obj = {
    x: 1,
}

console. log(Object.isExtensible(obj))   // true

Object.preventExtensions(obj)

console.log(Object.isExtensible(obj))   // false

obj.y = 2

console.log(`y` in obj)   //false複製程式碼

可見,通過這個特徵屬性,我們可以建立一個比較保守的不可擴充套件物件,當我們瞭解屬性的特徵屬性後,在本文最後你會看到,我們最終是如何製造出一個封閉性極強的物件的(不僅不可擴充套件,連屬性也不能被改變)。

讓我們小結一下:JavaScript物件有三個內部方法和一個特徵屬性,他們分別是:

  1. 內建方法:[[Put]][[Set]][[Delete]]
  2. 特徵屬性:[[Extensible]]

在下一篇文章中,我們會一起梳理物件屬性的一些不為人知的小祕密,休息一下,然後我們繼續。

關於JavaScript物件,你所不知道的事(一)- 先談物件

? Hey!喜歡這篇文章嗎?別忘了在下方? 點贊讓我知道。

相關文章