摘要:概念中定義了一個名叫屬性描述符的對象,用于描述了的各種特征。只指定則表示屬性為只讀屬性。使用屬性描述符對象只能在或中使用。修改已有的屬性會拋出類型錯誤異常添加屬性會拋出類型錯誤異常不能修屬性結語我對屬性描述符很不熟悉,主要是因為平時用得少。
概念
ECMAScript 5 中定義了一個名叫“屬性描述符”的對象,用于描述了的各種特征。屬性描述符對象有4個屬性:
configurable:可配置性,控制著其描述的屬性的修改,表示能否修改屬性的特性,能否把屬性修改為訪問器屬性,或者能否通過delete刪除屬性從而重新定義屬性。默認值為true。
enumerable:可枚舉性,表示能否通過for-in遍歷得到屬性。默認值為true。
writable:可寫性,表示能否修改屬性的值。默認值為true。
value:數據屬性,表示屬性的值。默認值為undefined。
除了上面的屬性,還有兩個存取器屬性,分別是get和set,可以代替value和writable。
get:在讀取屬性時調用的函數。只指定get則表示屬性為只讀屬性。默認值為undefined。
set:在寫入屬性時調用的函數。只指定set則表示屬性為只寫屬性。默認值為undefined。
使用“屬性描述符”對象只能在Object.defineProperty或Object.defineProperties中使用。
API 用法
Object.defineProperty:https://developer.mozilla.org...
Object.defineProperties: https://developer.mozilla.org...
var hello = {} Object.defineProperty(hello, "girl", { configurable: false, enumberable: false, writable: true, value: "sexy" }) // 存取器 Object.defineProperty(hello, "woman", { configurable: false, enumberable: false, get: function() { return this.girl }, set: function(val) { this.girl = val } }) // 定義多個屬性 Object.defineProperties(hello, { boy: { configurable: false, enumberable: false, writable: false, value: "handsome" }, man: { configurable: false, enumberable: false, writable: true, get: function() { return this.boy } } })
當用Object.defineProperty或Object.defineProperties操作(新建或者修改)那些不允許創建或修改的屬性時,會拋出類型錯誤異常。
// 此例子運行在前面的例子的基礎上 Object.defineProperty(hello, "boy", { writable: true }) // Uncaught TypeError: Cannot redefine property: boy
因為前面boy屬性已經被設置為不可配置,所以這里修改writable會拋出類型錯誤異常。
通過Object.getOwnPropertyDescriptor或者Object.getOwnPropertyDescriptors可以得到屬性描述符。
規則API 用法
Object.getOwnPropertyDescriptor:https://developer.mozilla.org...
Object.getOwnPropertyDescriptors:https://developer.mozilla.org...
var rules = { common: "test" }
如果屬性是不可配置的,則不能修改它的可配置性和可枚舉性。
Object.defineProperty(rules, "rule1", { configurable: false, enumberable: false }) // 修改configurable會拋出類型錯誤異常 Object.defineProperty(rules, "rule1", { configurable: true }) // Uncaught TypeError: Cannot redefine property: rule1 // 修改enumberable不會拋出異常,但enmuberable沒有被修改 Object.defineProperty(rules, "rule1", { enumberable: true }) Object.getOwnPropertyDescriptor(rules, "rule1") // Object {value: undefined, writable: false, enumerable: false, configurable: false}
如果存取器屬性是不可配置的,則不能修改get和set方法,也不能將它轉換為數據屬性。
Object.defineProperty(rules, "rule2", { configurable: false, enumberable: false, get: function() { return this.common }, set: function(val) { this.common = val } }) // 修改get或者set方法會拋出類型錯誤異常 Object.defineProperty(rules, "rule2", { get: function() { return this.common + "rule2" } }) // Uncaught TypeError: Cannot redefine property: rule2 Object.defineProperty(rules, "rule2", { set: function(val) { this.common = "rule2" } }) // Uncaught TypeError: Cannot redefine property: rule2 // 將它轉換為數據屬性同樣會拋出類型錯誤異常 Object.defineProperty(rules, "rule2", { value: "rule2" }) // Uncaught TypeError: Cannot redefine property: rule2
如果數據屬性是不可配置的,則不能將它轉換為存取器屬性;同時,也不能將它的可寫性從false修改為true,但可以從true修改為false。
Object.defineProperty(rules, "rule3", { configurable: false, writable: false, value: "rule3" }) // 修改writable為true會拋出類型錯誤異常 Object.defineProperty(rules, "rule3", { writable: true }) Object.defineProperty(rules, "rule4", { configurable: false, writable: true, value: "rule4" }) // 可以修改writable為false Object.defineProperty(rules, "rule4", { writable: false }) Object.getOwnPropertyDescriptor(rules, "rule4") // Object {value: "rule4", writable: false, enumerable: false, configurable: false}
如果數據屬性是不可配置且不可寫的,則不能修改他的值;如果是可配置但不可寫,則可以修改他的值(實際上是先將它標記為可寫的,然后修改它的值,最后再將它標記回不可寫)。
其實這里所說的修改值,是通過Object.defineProperty或Object.defineProperties方法修改。通過直接賦值的方法在數據屬性不可配置的情況下是不能修改屬性值的。
Object.defineProperty(rules, "rule5", { configurable: false, writable: false, value: "rule5" }) // 修改屬性值會拋出類型錯誤異常 Object.defineProperty(rules, "rule5", { value: "rule55" }) // Uncaught TypeError: Cannot redefine property: rule5 rules.rule5 = "rule55" // 值沒有被修改,也不會拋出異常 rules.rule5 // "rule5" Object.defineProperty(rules, "rule6", { configurable: true, writable: false, value: "rule6" }) // 修改屬性值 Object.defineProperty(rules, "rule6", { value: "rule66" }) rules.rule6 // "rule66" rules.rule6 = "rule6" // 值沒有被修改,也不會修改 rules.rule6 // "rule6"
只指定get不能寫,如果嘗試對該屬性賦值,會拋出類型錯誤異常。(紅寶書上說只有在嚴格模式下才拋出異常)
Object.defineProperty(rules, "rule7", { get: function() { return this.common } }) rules.rule7 = "rule7" // Uncaught TypeError: Cannot redefine property: rule7
只指定set不能讀,如果嘗試讀取該屬性值,返回undefined。(紅寶書上說在嚴格模式下才拋出異常,但沒有)
Object.defineProperty(rules, "rule8", { set: function() { this.common = "rule8" } }) rules.rule8 // undefined
如果對象是不可擴展的,則可以編輯已有的自有屬性,但不能給它添加新屬性。
操作對象可擴展性的API有三個:Object.preventExtensions、Object.seal、Object.freeze。
API 用法
Object.preventExtensions:https://developer.mozilla.org...
Object.seal:https://developer.mozilla.org...
Object.freeze:https://developer.mozilla.org...
Object.isExtensions:https://developer.mozilla.org...
Object.isSealed:https://developer.mozilla.org...
Object.isFrozen:https://developer.mozilla.org...
使用Object.preventExtensions可以將對象轉換為不可擴展。
使用Object.isExtensions來判斷對象是否可擴展。
var ex = {} Object.defineProperty(ex, "ex1", { configurable: true, writable: true, value: "ex1" }) Object.isExtensible(ex) // true Object.preventExtensions(ex) Object.isExtensible(ex) // false // 可以修改已有的屬性 Object.defineProperty(ex, "ex1", { writable: false, value: "ex11" }) Object.getOwnPropertyDescriptor(ex, "ex1") // Object {value: "ex11", writable: false, enumerable: false, configurable: true} // 添加屬性會拋出類型錯誤異常 Object.defineProperty(ex, "ex2", { value: "ex2" }) // Uncaught TypeError: Cannot define property:ex2, object is not extensible.
使用Object.seal除了可以將對象轉換為不可擴展的,還可以將對象的所有自有屬性都轉換為不可配置的。即不能給對象添加新屬性,而且它已有的屬性也不能刪除或者配置(這里同樣會遵循前面的規則)。
使用Object.isSealed來判斷對象是否封閉(sealed)。
var se = {} Object.defineProperty(se, "se1", { configurable: true, writable: false, value: "se1" }) Object.isSealed(se) // false Object.seal(se) Object.isSealed(se) // true // 修改已有的屬性會拋出類型錯誤異常 Object.defineProperty(se, "se1", { writable: true, value: "se11" }) // Uncaught TypeError: Cannot redefine property: se1 // 添加屬性會拋出類型錯誤異常 Object.defineProperty(se, "se2", { value: "se2" }) // Uncaught TypeError: Cannot define property:se2, object is not extensible.
使用Object.freeze除了將對象轉換為不可擴展的和將其屬性轉換為不可配置的之外,還可以將自有屬性轉換為只讀。(如果對象設置了set,存取器屬性將不會受影響,仍可以調用set方法,而且不會拋出異常,但如果set方法是改變該對象的屬性,則不能修改成功)
使用Object.isFrozen來檢測對象是否凍結(frozen)。
var fr = {} Object.defineProperty(fr, "fr1", { configurable: true, writable: false, value: "fr1" }) Object.isFrozen(fr) // false Object.freeze(fr) Object.isFrozen(fr) // true // 修改已有的屬性會拋出類型錯誤異常 Object.defineProperty(fr, "fr1", { writable: true, value: "fr11" }) // Uncaught TypeError: Cannot redefine property: fr1 // 添加屬性會拋出類型錯誤異常 Object.defineProperty(fr, "fr2", { value: "fr2" }) // Uncaught TypeError: Cannot define property:fr2, object is not extensible. fr.fr1 = "fr11" // 不能修fr1屬性 fr.fr1 // "fr1"
var set = {} Object.defineProperty(set, "set1", { configurable: true, value: "set1" }) Object.defineProperty(set, "set2", { configurable: true, set: function(val) { this.set1 = val } }) Object.isFrozen(set) // false Object.freeze(set) Object.isFrozen(set) // true set.set2 = "set2" set.set1 // "set1"結語
我對屬性描述符很不熟悉,主要是因為平時用得少。不過最近,開始學寫一些小的庫(雖然很挫),就感覺屬性描述符有使用的場景了。我暫時能想到的就是將庫對象的一些屬性設置為只讀,以防止對象的一些屬性被用戶重寫覆蓋了。還有一個用法是在知乎和學vue的時候知道的,就是通過getter和setter實現“監聽”對象屬性的數據更新(在這里挖一個坑。后面學習一下這種方法,再寫一篇“監聽”對象屬性的數據更新的文章)。
最后,如果大家知道更多屬性描述符的使用后場景,希望大家能在評論區留下你們的高見。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91094.html
摘要:需被定義或修改的屬性名。當且僅當該屬性出現在相應的對象枚舉屬性中。可以是任何有效的值數值,對象,函數等。方法將返回用作屬性的值。該方法將收到作為唯一參數的新值分配給屬性。屬性用來聲明欲修飾屬性是否可以被枚舉。 定義 getter 與 setter 通過對象初始化器定義 使用 Object.create 方法 使用 Object.defineProperty 方法 使用 Objec...
摘要:屬性描述符升級打怪必備技能對象有自己的屬性和方法,對于我們對象的屬性來講,屬性還有自己的屬性,又稱為屬性描述符。這個方法接受三個參數,第一個是指定的對象,第二個是指定的對象參數,第三個當然是要修改的屬性描述符了。 對象的聲明有倆種: 字面量 通過new一個構造函數Object 兩者唯一的區別就是,字面量形式,可以一次賦值多個,通過new Object就得一個一個賦值 數據類型 ...
摘要:數據屬性有個描述其行為的特性表示能否通過刪除屬性從而重新定義屬性,能否修改屬性的特性,或者能否把屬性修改為訪問器屬性。總結一波關于這些內容主要講的就是在的對象屬性可以分為兩類,一類就是數據屬性,一類就是訪問器屬性。 前言 面向對象的語言都有一個類的概念,通過類可以創建任意多個具有相同屬性和方法的對象。 JavaScript中把對象定義為無序屬性的集合,屬性可以包含基本值,對象或者函數...
摘要:語法將要被添加屬性或修改屬性的對象該對象的一個或多個鍵值對定義了將要為對象添加或修改的屬性的具體配置張三張三功能該方法返回指定對象上一個自有屬性對應的屬性描述符。 文章同步到github ECMAS-262第5版在定義只有內部采用的特性時,提供了描述了屬性特征的幾種屬性。ECMAScript對象中目前存在的屬性描述符主要有兩種,數據描述符(數據屬性)和存取描述符(訪問器屬性),數據描述...
摘要:之后,所有的屬性都存在屬性描述符這個屬性。獲取屬性描述符屬性的方法是以下面的代碼為例返回該方法返回的是一個對象,該對象除了包含為的屬性外,還包含了屬性的三個特性。 今天俺跟大家一起來學習一下一個很小的知識點,那就是屬性描述符,需要注意的是該功能是在ES5之后才出現的,也就是說ES5之前偉大的JS創造者并沒有開放出該功能~大家現在知道了吧,其實我們學習的語言并不是什么天生的大神創造的,本...
閱讀 1303·2021-11-11 10:57
閱讀 3717·2021-09-07 10:10
閱讀 3442·2021-08-03 14:03
閱讀 3067·2019-08-30 13:45
閱讀 681·2019-08-29 11:19
閱讀 1039·2019-08-28 18:07
閱讀 3100·2019-08-26 13:55
閱讀 809·2019-08-26 12:17