關于JavaScript對象，你所不知道的事（一）- 先談對象

mykurisu 發布于2019-08-21 17:49 / 2458人閱讀

摘要：對象與屬性讓我們保持耐心，再梳理一下對象與屬性的關系對象是屬性的集合，當對象的屬性是函數時，我們將其稱之為方法。

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

對于對象的一般認識

在開始正題之前，讓我們先憑直覺回憶一下我們對JavaScript對象的一般認識：

對象是一個引用類型值；

創建對象的方式有兩種形式：“字面量形式”與“構造函數形式”；

對象的屬性可以隨時修改，且一旦改動，所有引用對象的地方，其屬性值均會被改變（這也是引用類型的特點）；

對象可以通過原型鏈實現繼承；

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

對象與屬性

讓我們保持耐心，再梳理一下對象與屬性的關系：對象是屬性的集合，當對象的屬性是函數時，我們將其稱之為“方法”。

我們不妨建立這樣的心智模型：對象是一只藍色的（這里的顏色特別重要，因為實際上，變量本身也是一只大章魚，但她的身體卻是紅色的?）大章魚，章魚的每一只觸手都握著一個屬性的內存地址卡片，當要讀取對象中的屬性時，章魚的觸手會隨著卡片上的地址拿到相應的數據值，并返還給用戶（就是你）。

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

對象的內部方法與特征屬性

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

內部方法是指：JavaScript于對象內部定義的，用戶不可訪問/修改的方法；

特征屬性是指：用來描述對象/屬性一些特性（如是否可配置？是否可迭代）的屬性；

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

讓我們先從JavaScript對象的內部方法說起：

JavaScript對象有以下三個內部方法：

[[Put]]：用來創建對象屬性，當新建對象屬性時被調用，就像命令藍色章魚長出一只觸角，握住一張內存地址卡片；

[[Set]]：用來修改對象屬性的值，當修改對象屬性時被調用，可以想象為命令藍色章魚的某個觸角放下已有的內存地址卡片，改換另一張；

[[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對象有三個內部方法和一個特征屬性，他們分別是：

內置方法：[[Put]]，[[Set]]，[[Delete]]；

特征屬性：[[Extensible]]；

在下一篇文章中，我們會一起梳理對象屬性的一些不為人知的小秘密，休息一下，然后我們繼續。

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

云服務器 GPU云服務器 java關于面向對象 javascript對象 javascript 面向對象 javascript對象方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90052.html

關于JavaScript對象，你所不知道的事（二）- 再說屬性

摘要：但好在還給我們提供了一個方法，每一個對象都有這樣一個方法，專門用來判斷某個屬性是否是該對象的私有屬性。如果你想要用對象字面形式，你只能在創建對象時定義訪問器屬性。在中，我們使用凍結一個對象，并且使用來判斷一個對象是否被凍結。說完了對象那些不常用的冷知識，是時候來看看JavaScript中對象屬性有哪些有意思的東西了。不出你所料，對象屬性自然也有其相應的特征屬性，但是這個話題有點復雜...

Richard_Gao 2019-08-21 17:49 評論0 收藏0
前端面試你所不知道系列

摘要：請注意是創建一個全局對象的屬性，而不是聲明了一個全局變量。由于變量聲明自帶不可刪除屬性，比較跟，前者是變量聲明，帶不可刪除屬性，因此無法被刪除后者為全局變量的一個屬性，因此可以從全局變量中刪除。下期預告前端面試你所不知道系列偽類和偽元素寫在開始又到了一年的伊始，很多人可能因為各種原因想換一份工作，而找工作難免遇到各種各樣頭痛的面試題，于是我打算寫一個系列，關于面試中最常見或者前端一...

Julylovin 2019-08-26 11:37 評論0 收藏0
你所不知道的JSON.stringify

摘要：已經逐漸替代被全世界的開發者廣泛使用。函數將一個對象轉換成文本化的。不能被文本化的屬性會被忽略。和例外情況在數組中，不可被的元素用填充。自從年雙十一正式上線，累計處理了億錯誤事件，得到了金山軟件等眾多知名用戶的認可。譯者按: 老司機們，你知道JSON.stringify還有第二個和第三個可選參數嗎？它們是什么呢？原文: What you didn’t know about JSO...

piapia 2019-08-20 18:56 評論0 收藏0
你所不知道的JavaScript（三）

摘要：的異步函數不會馬上執行，而是先注冊監聽，等到事件觸發了，就將這個回調函數壓入事件隊列中，等待順序運行的任務隊列空了以后，再執行事件隊列中的函數。第五章語法｛…｝一個代碼塊會返回最后一個語句的結果值，可以用eval（）去獲得（不建議），{}在不同情況下意思不同，可以是語句塊、對象常量、解構賦值或者命名函數參數，在代碼塊中有一個坑，{}+[]//0，{}是一個空執行塊（不執行任...

OBKoro1 2019-08-22 15:26 評論0 收藏0
正在失業中的《課多周刊》(第3期)

摘要：正在失業中的課多周刊第期我們的微信公眾號，更多精彩內容皆在微信公眾號，歡迎關注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的動力。是一種禍害譯本文淺談了在中關于的不好之處。淺談超時一運維的排查方式。正在失業中的《課多周刊》(第3期) 我們的微信公眾號：fed-talk，更多精彩內容皆在微信公眾號，歡迎關注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的...

robin 2019-08-29 11:06 評論0 收藏0