講解js遍歷對象屬性名獲取屬性值:js獲取對象屬性的值

除了普通的對象屬性賦值和遍歷之外,我們還可以使用 JavaScript 對象執行許多其他操作。在本文中,我們將了解如何使用它們,包括訪問內部屬性、操作屬性描述符和繼承只讀屬性。

1. 訪問內部屬性

JavaScript 對象無法以常規方式訪問的「內部屬性」「內部屬性」名由雙方括弧[[]]包圍,在創建對象時可用。

「內部屬性」不能動態地添加到現有對象。

「內部屬性」可以在某些內置 JavaScript 對象中使用,它們存儲ECMAScript規範指定的內部狀態。

有兩種「內部屬性」,一種操作對象的方法,另一種是存儲數據的方法。例如:

  • [[Prototype]] — 對象的原型,可以為null或對象
  • [[Extensible]] — 表示是否允許在對象中動態添加新的屬性
  • [[PrivateFieldValues]] — 用於管理私有類欄位

2. 屬性描述符對象

數據屬性包含了一個數據值的位置,在這個位置可以讀取和寫入值。也就是說,數據屬性可以通過 對象.屬性 訪問,就是我么平常接觸的用戶賦什麼值,它們就返回什麼,不會做額外的事情。

數據屬性有4個描述其行為的特性(為了表示內部值,把屬性放在兩對方括弧中),稱為「描述符對象」

屬性解釋默認值[[Configurable]]能否通過delete刪除屬性從而重新定義屬性;
能否修改屬性的特性;
能否把屬性修改為訪問器屬性true[[Enumerable]]能否通過for-in循環返回屬性true[[Writable]]能否修改屬性的值true[[Value]]包含這個屬性的數據值undefined

value 描述符是屬性的數據值,例如,我們有以下對象 :

let foo = {
  a: 1
}

那麼,a 的value屬性描述符為1。

writable是指該屬性的值是否可以更改。默認值為true,表示屬性是可寫的。但是,我們可以通過多種方式將其設置為不可寫。

configurable 的意思是可以刪除對象的屬性還是可以更改其屬性描述符。默認值為true,這意味著它是可配置的。

enumerable 意味著它可以被for … in循環遍歷。默認值為true,說明能通過for-in循環返回屬性

將屬性鍵添加到返回的數組之前,Object.keys方法還檢查enumerable描述符。但是,Reflect.ownKeys方法不會檢查此屬性描述符,而是返回所有自己的屬性鍵。

Prototype描述符有其他方法,get和set分別用於獲取和設置值。

在創建新對象, 我們可以使用Object.defineProperty方法設置的描述符,如下所示:

let foo = {
  a: 1
}
Object.defineProperty(foo, 'b', {
  value: 2,
  writable: true,
  enumerable: true,
  configurable: true,
});

這樣得到foo的新值是{a: 1, b: 2}。

我們還可以使用defineProperty更改現有屬性的描述符。例如:

let foo = {
  a: 1
}
Object.defineProperty(foo, 'a', {
  value: 2,
  writable: false,
  enumerable: true,
  configurable: true,
});

這樣當我們嘗試給 foo.a 賦值時,如:

foo.a = 2;

如果關閉了嚴格模式,瀏覽器將忽略,否則將拋出一個錯誤,因為我們將 writable 設置為 false, 表示該屬性不可寫。

我們還可以使用defineProperty將屬性轉換為getter,如下所示:

'use strict'
let foo = {
  a: 1
}

Object.defineProperty(foo, 'b', {
  get() {
    return 1;
  }
})

當我們這樣寫的時候:

foo.b = 2;

因為b屬性是getter屬性,所以當使用嚴格模式時,我們會得到一個錯誤:Getter 屬性不能重新賦值。

3.無法分配繼承的只讀屬性

繼承的只讀屬性不能再賦值。這是有道理的,因為我們這樣設置它,它是繼承的,所以它應該傳播到繼承屬性的對象。

我們可以使用Object.create創建一個從原型對象繼承屬性的對象,如下所示:

const proto = Object.defineProperties({}, {
  a: {
    value: 1,
    writable: false
  }
})

const foo = Object.create(proto)

在上面的代碼中,我們將proto.a的 writable 描述符設置為false,因此我們無法為其分配其他值。

如果我們這樣寫:

foo.a = 2;

在嚴格模式下,我們會收到錯誤消息。

總結

我們可以用 JavaScript 對象做很多我們可能不知道的事情。

首先,某些 JavaScript 對象(例如內置瀏覽器對象)具有內部屬性,這些屬性由雙方括弧包圍,它們具有內部狀態,對象創建無法動態添加。

JavaScript對象屬性還具有屬性描述符,該屬性描述符使我們可以控制其值以及可以設置它們的值,還是可以更改其屬性描述符等。

我們可以使用defineProperty更改屬性的屬性描述符,它還用於添加新屬性及其屬性描述符。

最後,繼承的只讀屬性保持只讀狀態,這是有道理的,因為它是從父原型對象繼承而來的。

原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/219466.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
投稿專員的頭像投稿專員
上一篇 2024-12-09 10:57
下一篇 2024-12-09 10:57

相關推薦

發表回復

登錄後才能評論