JS紅寶書筆記 - 8.1 理解對象

對象就是一組沒有特定順序的值,對象的每個屬性或者方法都可由一個名稱來標識,這個名稱映射到一個值。可以把對象想象成一張散列表,其中的內容就是一組名值對,值可以是數據或者函數

創建自定義對象的通常方式是創建Object的一個新實例,然后再給它添加屬性和方法。早期開發者頻繁使用這種方式創建新對象,幾年后,對象字面量變成了更流行的方式


ES使用了一些內部特性來描述屬性的特征,這些特征是由為JS實現引擎的規范定義的,因此,開發者不能在JS中直接訪問這些特性。為了將某個特性標識為內部特性,規范會用兩個中括號把特性的名稱括起來

屬性分兩種:數據屬性和訪問器屬性

數據屬性

數據屬性包含一個保存數據值的位置,值會從這個位置讀取,也會寫入到這個位置。

數據屬性有4個特性描述它們的行為:

  • [[Configurable]]:表示屬性是否可以通過delete刪除并重新定義,是否可以修改它的特性,以及是否可以把它改為訪問器屬性。默認情況下,所有直接定義在對象上的屬性的這個特性都是true
  • [[Enumerable]]:表示屬性是否可以通過for-in循環返回,默認情況下,所有直接定義在對象上的屬性的這個特性都是true
  • [[Writable]]:表示屬性的值是否可以被修改。默認情況下,所有直接定義在對象上的屬性的這個特性都是true
  • [[Value]]:包含屬性實際的值,這個特性默認值為undefined

將屬性添加到對象之后[[Configurable]]、[[Enumerable]]、[[Writable]]都會被設置為true,而[[Value]]特性會被設置為指定的值

要修改屬性的默認特性,就必須使用Object.defineProperty()方法,這個方法接收3個參數:要給其添加屬性的對象、屬性的名稱和一個描述符對象。最后一個參數,即描述符對象上的屬性可以包含:configurable、enumerable、writable和value,跟相關特性的名稱一一對應。根據要修改的特性,可以設置其中一個或多個值

在調用Object.defineProperty()時,如果描述符對象上的屬性的值都不指定,則都默認為false

訪問器屬性

訪問器屬性不包含數據值,相反,他們包含一個獲取函數和一個設置函數,不過這兩個函數不是必須的,在讀取訪問器屬性時,會調用獲取函數,這個函數的責任就是返回一個有效的值,在寫入訪問器屬性時,會調用設置函數并傳入新值,這個函數必須決定對數據做出什么修改。

訪問器屬性有4個特性描述它們的行為:

  • [[Configurable]]:表示屬性是否可以通過delete刪除并重新定義,是否可以修改它的特性,以及是否可以把它改為訪問器屬性。默認情況下,所有直接定義在對象上的屬性的這個特性都是true
  • [[Enumerable]]:表示屬性是否可以通過for-in循環返回,默認情況下,所有直接定義在對象上的屬性的這個特性都是true
  • [[Get]]:獲取函數,在讀取屬性時調用,默認值為undefined
  • [[Set]]:設置函數,在寫入屬性時調用,默認值為undefined

訪問器屬性是不能直接定義的,必須使用Object.defineProperty()

獲取函數和設置函數不一定都要定義,只定義獲取函數意味著屬性是只讀的,嘗試修改屬性會被忽略,嚴格模式下會報錯,類似的,只有一個設置函數的屬性是不能讀取的,非嚴格模式下讀取會返回undefined,嚴格模式下會報錯


Object.defineProperties()方法可以通過多個描述符一次性定義多個屬性,它接受兩個參數:要為之添加或修改屬性的對象和另一個描述符對象,其屬性與要添加或修改的屬性一一對應


使用Object.getOwnPropertyDescriptor()方法可以取得指定屬性的屬性描述符,這個方法接收兩個參數:屬性所在的對象和要取其描述符的屬性名。返回值是一個對象

ES8新增了Object.getOwnPropertyDescriptors()靜態方法。這個方法實際上會在每個自有屬性上調用Object.getOwnPropertyDescriptor()并在一個新對象中返回它們


合并兩個對象:把源對象所有的本地屬性一起復制到目標對象上,這種操作也被稱為混入,因為目標對象通過混入源對象的屬性得到了增強

ES6專門為合并對象提供了Object.assign()方法,這個方法接受一個目標對象和一個或多個源對象作為參數,然后將每個源對象中可枚舉和自有屬性復制到目標對象,以字符串和符號為鍵的屬性會被復制,對每個符合條件的屬性,這個方法會使用源對象上的[[Get]]取得屬性的值,然后使用目標對象上的[[Set]]設置屬性的值

Object.assign()實際上對每個源對象執行的是淺復制,如果多個源對象都有相同的屬性,則使用最后一個復制的值。此外,從源對象訪問器屬性取得的值,比如獲取函數,會作為一個靜態值賦給目標對象。換句話說,不能在兩個對象間轉移獲取函數和設置函數

如果賦值期間出錯,則操作會中止并退出,同時拋出錯誤。Object.assign()沒有回滾之前賦值的概念,因此它是一個盡力而為,可能只會完成部分復制的方法


ES6規范新增了Object.is()方法,這個方法和===很像,但同時也考慮到了一些邊界情形


在給對象添加變量的時候,開發者經常會發現屬性名和變量名是一樣的,簡寫屬性名只要使用變量名就會自動被解釋為同名的屬性鍵,如果沒有找到同名變量就會報錯

在引入可計算屬性之前,如果想使用變量的值作為屬性,那么必須先聲明對象,然后使用中括號語法來添加屬性。換句話說,不能在對象字面量中直接動態命名屬性

有了可計算屬性,就可以在對象字面量中完成動態屬性賦值。中括號包圍的對象屬性鍵告訴運行時將其作為JS表達式而不是字符串來求值

可計算屬性表達式中拋出任何錯誤都會中斷對象創建,不能回滾

在給對象定義方法時,通常都要寫一個方法名、冒號,然后再引用一個匿名函數表達式,新的簡寫方法的語法遵循同樣的模式,但開發者要放棄給函數表達式命名,這樣可以明顯縮短方法聲明。簡寫方法名對獲取和設置函數也是適用的。簡寫方法名與可計算屬性鍵相互兼容


對象解構語法可以在一條語句中使用嵌套數據實現一個或多個賦值操作,簡單地說,對象解構就是使用與對象匹配的結構來實現對象屬性賦值

使用解構可以在一個類似對象字面量的結構中,聲明多個變量,同時執行多個賦值操作。如果想讓變量直接使用屬性的名稱,那么可使用簡寫語法。

解構賦值不一定與對象的屬性匹配,賦值的時候可以忽略某些屬性,而如果引用的屬性不存在,則該變量的值就是undefined。也可以在解構賦值的同時定義默認值。

解構在內部使用函數toObject()把源數據結構轉換為對象,這意味著對象解構的上下文中,原始值會被當成對象,這也意味著,null和undefined不能被解構,否則會報錯

解構并不要求變量必須在解構表達式中聲明,不過,如果是給事先聲明的變量賦值,則賦值表達式必須包含在一對括號中

解構對于引用嵌套的屬性或目標沒有限制,為此,可以通過解構來復制對象屬性,解構賦值可以使用嵌套解構,以匹配嵌套的屬性,在外層屬性沒有定義的情況下不能使用嵌套解構,無論源對象還是目標對象都一樣

涉及多個屬性的解構賦值是一個輸出無關的順序化操作,如果一個解構表達式涉及多個賦值,開始的賦值成功而后面的賦值出錯,則整個解構賦值只會完成一部分

在函數參數列表中也可以進行解構賦值,對參數的解構賦值不會影響arguments對象,但可以在函數簽名中聲明在函數體內使用局部變量

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/88354.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/88354.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/88354.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Meson介紹及編譯Glib庫

一.概述 1.Meson 的簡介 Meson(The Meson Build System)是個項目構建系統,類似的構建系統有 Makefile、CMake、automake …。 Meson 是一個由 Python 實現的開源項目,其思想是,開發人員花費在構建調試上的每一秒都是…

Qt元對象系統實踐指南:從入門到應用

目錄 摘要 元對象系統核心概念 項目示例:動態UI配置工具 元對象系統在項目中的應用 1. 信號與槽機制 2. 動態屬性系統 3. 運行時反射能力 4. 屬性綁定與響應 實際項目應用場景 動態UI配置 對象序列化 插件系統 性能優化建議 結論 參考資料 摘要 本文…

Kafka 與其他 MQ 的對比分析:RabbitMQ/RocketMQ 選型指南(一)

消息隊列簡介 在當今的分布式系統架構中,消息隊列(Message Queue,MQ)扮演著舉足輕重的角色。隨著業務規模的不斷擴大和系統復雜度的日益提升,各個組件之間的通信和協同變得愈發關鍵 。消息隊列作為一種異步的通信機制…

[創業之路-441]:行業 - 互聯網+移動互聯網和大數據時代的100個預言:技術個性、商業變革、社會重構、文化娛樂、環境、教育、健康醫療、未來生活方式

目錄 一、技術革新 二、商業變革 三、社會重構 四、文化與娛樂 六、環境與可持續發展 七、教育與知識傳播 八、健康與醫療 九、倫理與法律 十、未來生活方式 十一、終極預言 結語 在移動互聯網和大數據時代,技術革新正以前所未有的速度重塑社會、經濟與文…

基于STM32單片機WIFI無線APP控燈亮度滅設計

基于STM32單片機控燈設計 (程序+原理圖+設計報告) 功能介紹 具體功能: 本設計由STM32F103C8T6單片機核心電路兩位白色高亮LED燈電路WIFI模塊ESP8266電路電源電路組成。 1、stm32實時監測wifi數據,解析數…

學會C++中的vector的基本操作

vector 是 C 標準庫中的一個動態數組類,它可以在運行時自動調整大小,非常適合用于處理大小不確定的集合。下面是 vector 的常見用法示例,幫助你更好地理解如何使用它。 注意:所有用數組完成的任務都可以用vector完成。 1. 引入頭…

AI時代工具:AIGC導航——AI工具集合

大家好!AIGC導航是一個匯集多種AIGC工具的平臺,提供了豐富的工具和資源。 工具功能?: 該平臺整合了多樣的AIGC工具,涵蓋了繪畫創作、寫作輔助以及視頻制作等多個領域。繪畫工具能夠生成高質量的圖像作品;寫作工具支持從構思到潤色的全流程寫…

java-SpringBoot框架開發計算器網頁端編程練習項目【web版】

今天分享一個使用springboot 寫一個 前后端不分離的項目,網頁計算器,來熟悉springboot框架的使用。 java版本:8。 springboot:2.6.13 使用的技術是: Java Spring Boot Thymeleaf HTML/CSS/JS 構建的 Web 端簡約按鈕…

linux操作系統的軟件架構分析

一、linux操作系統的層次結構 1.內核的主要功能 1)進程管理 2)內存管理 3)文件系統 4)進程間通信、I/O系統、網絡通信協議等 2.系統程序 1)系統接口函數庫,比如libc 2)shell程序 3)編譯器、編輯…

淺談Java對象在內存中的存儲形式

我們知道計算機以二進制的方式存儲數據,以 64 位虛擬機為例,Java 對象在內存中的存儲形式為: 開頭是 8 個字節的 markword,用于標記對象的狀態。(也就是一個 long 型數據的大小。不妨記作對象頭里有一個長長的 markwo…

Android 開發問題:Wrong argument type for formatting argument ‘#2‘ in info_message

<string name"info_message">name: %1$s, age: %2$d</string>String str getString(R.string.info_message, "zs");在 Android 開發中&#xff0c;上述代碼&#xff0c;出現如下警告信息 Wrong argument type for formatting argument #2 in…

Vue+spring boot前后端分離項目搭建---小白入門

首先&#xff0c;介紹一下軟件準備工作 1.vscode 2.maven 3.vue搭建&#xff1a;node.jsyarnvite 一.后端搭建 打開vscode,建立一個springboot項目&#xff0c;參考鏈接&#xff1a;sping boot項目搭建 建立一個項目&#xff0c;目錄結構如下&#xff1a; helloController.java…

“蘇超”拉動周末消費,抖音生活服務:比賽城市迎來普遍消費上漲

“蘇超”爆火&#xff0c;有力拉升了緊隨賽程的周末消費。抖音生活服務數據顯示&#xff0c;剛剛過去的周末&#xff08;6月21日至22日&#xff09;&#xff0c;江蘇商圈休閑運動團購訂單消費環比增長225%&#xff0c;到店消費金額環比增長181%。雖然幾個比賽城市周末天氣欠佳&…

使用python開發一個exe版本的計算器項目練習

最近在練習python開發軟件&#xff0c;就開發了一個 客戶端版的 計算器。先給大家看一下 做出來的樣子 python版本&#xff1a;3.8 以上 主要是 使用 import tkinter as tk 這個庫來實現圖形界面開發 代碼還是比較簡單的&#xff1a; # 創建主窗口 root tk.Tk() root.title…

uniapp開發小程序,導出文件打開并保存,實現過程downloadFile下載,openDocument打開

uniapp開發小程序&#xff0c;導出文件打開并保存 實現思路 1、調用請求獲取到后端接口返回的下載文件的url路徑 &#xff08;注意必須是https的路徑&#xff0c;域名需要配置在微信小程序后臺的合法域名里面&#xff09; 2、使用 uni.downloadFile 方法 &#xff08;下載文件…

vue2中前端實現圖片裁剪上傳到服務器

在 Vue 2 中實現圖片裁剪并上傳到服務器&#xff0c;你可以結合使用 Cropper.js 來進行圖片裁剪&#xff0c;并通過 Axios 或者其他 HTTP 客戶端庫將裁剪后的圖片上傳至服務器。以下是一個基本的實現步驟和示例代碼&#xff1a; 步驟 安裝依賴&#xff1a;你需要安裝 cropperj…

C# 網絡編程-關于HttpWebRequest使用方式(二)

項目開發用到數據請求時候&#xff0c;會用的到HttpWebRequest的請求方式&#xff0c;主要涵蓋GET、POST、PUT、DELETE等方法 一、HttpWebRequest簡介 HttpWebRequest是.NET Framework中用于發送HTTP請求的核心類&#xff0c;適用于構建HTTP客戶端。它支持GET、POST、PUT、DE…

git變更記錄

目錄 wvp-ui -new Dji 10.60.2.175:8000上的編譯 個人拉分支 目前約定2025-06-25 wvp-ui -new branch new BASE_URL /new/ ci-cd : wvp-newui Config [Jenkins] 禁 用 10.30.2.8 ssh 10.30.2.8 /home/dualven/wvp-server/deployNewUi.sh Dji 主分支的構建&#xf…

前端如何禁止用戶復制?

禁用右鍵菜單 document.addEventListener(contextmenu, function(e) {e.preventDefault(); });禁用快捷鍵&#xff08;CtrlC/X/A等&#xff09; document.addEventListener(keydown, function(e) {if (e.ctrlKey && [c, x, v, a].includes(e.key.toLowerCase())) {e.…

阿里云無影:開啟云端辦公娛樂新時代

阿里云無影云電腦&#xff1a;打破傳統束縛&#xff0c;暢享云端自由 在數字化浪潮洶涌澎湃的當下&#xff0c;云計算技術持續革新&#xff0c;為我們的工作與生活帶來前所未有的變革。阿里云作為云計算領域的佼佼者&#xff0c;推出的無影云電腦無疑是一顆璀璨的明星&#xf…