摘要:對象是由多個名值對組成的無序的集合。對象中每個屬性對應任意類型的值。目標屬性所擁有的特性返回值傳入函數的對象。給對象的屬性添加特性描述,目前提供兩種形式數據描述和存取器描述。兼容性在下只能在對象上使用,嘗試在原生的對象使用會報錯。
對象是由多個名/值對組成的無序的集合。對象中每個屬性對應任意類型的值。
定義對象可以使用構造函數或字面量的形式:
var obj = new Object; //obj = {} obj.name = "張三"; //添加描述 obj.say = function(){}; //添加行為
除了以上添加屬性的方式,還可以使用Object.defineProperty定義新屬性或修改原有的屬性。
Object.defineProperty()語法:
Object.defineProperty(obj, prop, descriptor)
參數說明:
obj:必需。目標對象
prop:必需。需定義或修改的屬性的名字
descriptor:必需。目標屬性所擁有的特性
返回值:
傳入函數的對象。即第一個參數obj
針對屬性,我們可以給這個屬性設置一些特性,比如是否只讀不可以寫;是否可以被for..in或Object.keys()遍歷。
給對象的屬性添加特性描述,目前提供兩種形式:數據描述和存取器描述。
數據描述當修改或定義對象的某個屬性的時候,給這個屬性添加一些特性:
var obj = { test:"hello" } //對象已有的屬性添加特性描述 Object.defineProperty(obj,"test",{ configurable:true | false, enumerable:true | false, value:任意類型的值, writable:true | false }); //對象新添加的屬性的特性描述 Object.defineProperty(obj,"newKey",{ configurable:true | false, enumerable:true | false, value:任意類型的值, writable:true | false });
數據描述中的屬性都是可選的,來看一下設置每一個屬性的作用。
value屬性對應的值,可以使任意類型的值,默認為undefined
var obj = {} //第一種情況:不設置value屬性 Object.defineProperty(obj,"newKey",{ }); console.log( obj.newKey ); //undefined ------------------------------ //第二種情況:設置value屬性 Object.defineProperty(obj,"newKey",{ value:"hello" }); console.log( obj.newKey ); //hellowritable
屬性的值是否可以被重寫。設置為true可以被重寫;設置為false,不能被重寫。默認為false。
var obj = {} //第一種情況:writable設置為false,不能重寫。 Object.defineProperty(obj,"newKey",{ value:"hello", writable:false }); //更改newKey的值 obj.newKey = "change value"; console.log( obj.newKey ); //hello //第二種情況:writable設置為true,可以重寫 Object.defineProperty(obj,"newKey",{ value:"hello", writable:true }); //更改newKey的值 obj.newKey = "change value"; console.log( obj.newKey ); //change valueenumerable
此屬性是否可以被枚舉(使用for...in或Object.keys())。設置為true可以被枚舉;設置為false,不能被枚舉。默認為false。
var obj = {} //第一種情況:enumerable設置為false,不能被枚舉。 Object.defineProperty(obj,"newKey",{ value:"hello", writable:false, enumerable:false }); //枚舉對象的屬性 for( var attr in obj ){ console.log( attr ); } //第二種情況:enumerable設置為true,可以被枚舉。 Object.defineProperty(obj,"newKey",{ value:"hello", writable:false, enumerable:true }); //枚舉對象的屬性 for( var attr in obj ){ console.log( attr ); //newKey }configurable
是否可以刪除目標屬性或是否可以再次修改屬性的特性(writable, configurable, enumerable)。設置為true可以被刪除或可以重新設置特性;設置為false,不能被可以被刪除或不可以重新設置特性。默認為false。
這個屬性起到兩個作用:
目標屬性是否可以使用delete刪除
目標屬性是否可以再次設置特性
//-----------------測試目標屬性是否能被刪除------------------------ var obj = {} //第一種情況:configurable設置為false,不能被刪除。 Object.defineProperty(obj,"newKey",{ value:"hello", writable:false, enumerable:false, configurable:false }); //刪除屬性 delete obj.newKey; console.log( obj.newKey ); //hello //第二種情況:configurable設置為true,可以被刪除。 Object.defineProperty(obj,"newKey",{ value:"hello", writable:false, enumerable:false, configurable:true }); //刪除屬性 delete obj.newKey; console.log( obj.newKey ); //undefined //-----------------測試是否可以再次修改特性------------------------ var obj = {} //第一種情況:configurable設置為false,不能再次修改特性。 Object.defineProperty(obj,"newKey",{ value:"hello", writable:false, enumerable:false, configurable:false }); //重新修改特性 Object.defineProperty(obj,"newKey",{ value:"hello", writable:true, enumerable:true, configurable:true }); console.log( obj.newKey ); //報錯:Uncaught TypeError: Cannot redefine property: newKey //第二種情況:configurable設置為true,可以再次修改特性。 Object.defineProperty(obj,"newKey",{ value:"hello", writable:false, enumerable:false, configurable:true }); //重新修改特性 Object.defineProperty(obj,"newKey",{ value:"hello", writable:true, enumerable:true, configurable:true }); console.log( obj.newKey ); //hello
除了可以給新定義的屬性設置特性,也可以給已有的屬性設置特性
//定義對象的時候添加的屬性,是可刪除、可重寫、可枚舉的。 var obj = { test:"hello" } //改寫值 obj.test = "change value"; console.log( obj.test ); //"change value" Object.defineProperty(obj,"test",{ writable:false }) //再次改寫值 obj.test = "change value again"; console.log( obj.test ); //依然是:"change value"
提示:一旦使用Object.defineProperty給對象添加屬性,那么如果不設置屬性的特性,那么configurable、enumerable、writable這些值都為默認的false
var obj = {}; //定義的新屬性后,這個屬性的特性中configurable,enumerable,writable都為默認的值false //這就導致了neykey這個是不能重寫、不能枚舉、不能再次設置特性 // Object.defineProperty(obj,"newKey",{ }); //設置值 obj.newKey = "hello"; console.log(obj.newKey); //undefined //枚舉 for( var attr in obj ){ console.log(attr); }
設置的特性總結:
value: 設置屬性的值存取器描述
writable: 值是否可以重寫。true | false
enumerable: 目標屬性是否可以被枚舉。true | false
configurable: 目標屬性是否可以被刪除或是否可以再次修改特性 true | false
當使用存取器描述屬性的特性的時候,允許設置以下特性屬性:
var obj = {}; Object.defineProperty(obj,"newKey",{ get:function (){} | undefined, set:function (value){} | undefined configurable: true | false enumerable: true | false });
注意:當使用了getter或setter方法,不允許使用writable和value這兩個屬性
getter/setter當設置或獲取對象的某個屬性的值的時候,可以提供getter/setter方法。
getter 是一種獲得屬性值的方法
setter是一種設置屬性值的方法。
在特性中使用get/set屬性來定義對應的方法。
var obj = {}; var initValue = "hello"; Object.defineProperty(obj,"newKey",{ get:function (){ //當獲取值的時候觸發的函數 return initValue; }, set:function (value){ //當設置值的時候觸發的函數,設置的新值通過參數value拿到 initValue = value; } }); //獲取值 console.log( obj.newKey ); //hello //設置值 obj.newKey = "change value"; console.log( obj.newKey ); //change value
注意:get或set不是必須成對出現,任寫其一就可以。如果不設置方法,則get和set的默認值為undefined
configurable和enumerable同上面的用法。
兼容性在ie8下只能在DOM對象上使用,嘗試在原生的對象使用 Object.defineProperty()會報錯。
如果對你有幫助,請關注【前端技能解鎖】:
參考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/80821.html
摘要:是通過它實現雙向綁定的。。而且也被草案發起人撤回了。。傳入參數第一個參數目標對象第二個參數需要定義的屬性或方法的名字。第三個參數目標屬性所擁有的特性。打印沒有錯誤拋出在嚴格模式下會拋出,即使之前已經有相同的值打印,賦值不起作用。 這個方法了不起啊。。vue.js是通過它實現雙向綁定的。。而且Object.observe也被草案發起人撤回了。。所以defineProperty更有必要了解...
摘要:數據描述符是一個具有值的屬性,該值可能是可寫的,也可能不是可寫的。描述符必須是這兩種形式之一不能同時是兩者。注意點運算符和為對象的屬性賦值時,數據描述符中的屬性默認值是不同的,如下例所示。 一、概念語法 Object.defineProperty(obj,prop,descriptor) 參數: 1.obj:要在其上定義屬性的對象 2.key:要定義或者修改的屬性 3.descript...
摘要:返回值被傳遞給函數的對象。描述該方法允許精確添加或修改對象的屬性。描述符必須是兩種形式之一不能同時是兩者。可以是任何有效的值數值,對象,函數等。該方法返回值被用作屬性值。該方法將接受唯一參數,并將該參數的新值分配給該屬性。 Object.defineProperties() Object.defineProperty() 方法會直接在一個對象上定義一個新屬性,或者修改一個對象的現有屬性...
摘要:前言是新增的一個,其作用是給對象的屬性增加更多的控制。使用方法提供了一種直接的方式來定義對象屬性或者修改已有對象屬性。數據描述符是一個擁有可寫或不可寫值的屬性。存取描述符是由一對函數功能來描述的屬性。這也是實現雙向數據綁定的關鍵。 前言 Object.defineProperty是ES5新增的一個API,其作用是給對象的屬性增加更多的控制。在我們日常的coding中,這個API用到的地...
摘要:理解的函數在進入今天的內容之前我們可以先考慮這么一個場景在你的項目中你有這么一個對象如下所示我們的要求就是你要給添加一個屬性當的或者發生變化的時候也要隨之變化而且當我們設置了的值的時候那么相應的它的和也隨之發生變化那么我們應該怎么做呢如果你 理解JavaScript的Object.defineProperty()函數 在進入今天的內容之前,我們可以先考慮這么一個場景,在你的項目中你有這...
閱讀 5766·2021-11-24 10:25
閱讀 2702·2021-11-16 11:44
閱讀 3860·2021-10-11 11:09
閱讀 3178·2021-09-02 15:41
閱讀 3261·2019-08-30 14:14
閱讀 2290·2019-08-29 14:10
閱讀 2354·2019-08-29 11:03
閱讀 1131·2019-08-26 13:47