1. 程式人生 > >js知識梳理1:理解物件的屬性特性

js知識梳理1:理解物件的屬性特性

1.資料屬性 資料屬性的4個特性: - Configurable:①表示能否通過delete刪除屬性從而重新定義,②能否修改屬性的特性,③能否把屬性修改為訪問器屬性。物件直接量裡預設值true。 - Enumerable:表示能否通過for-in迴圈返回屬性。物件直接量裡預設值true。 - Writable:表示能否修改屬性的值。物件直接量裡預設值true。 - Value:包含這個屬性的資料值。物件直接量裡預設值undefined。

//檢視物件直接量的屬性的屬性特性預設值 var people = { name:‘jaychou’, sayName:function () { console.log(

this.name); } }; /{value: “jaychou”, writable: true, enumerable: true, configurable: true}*/ console.log(Object.getOwnPropertyDescriptor(people,‘name’)); /{value: ƒ, writable: true, enumerable: true, configurable: true}*/ console.log(Object.getOwnPropertyDescriptor(people,‘sayName’)); //getOwnPropertyDescriptor對於繼承屬性和不存在的屬性,返回undefined 要修改屬性預設的特性,使用Object.defineProperty()方法,接收3個引數:物件,屬性名字和描述符物件。

//修改屬性預設特性: Object.defineProperty(person,‘job’,{ emumerable:false,//不可列舉 value:‘singer’, writable:false,//不可寫 configurable:true }); /**{name: “jaychou”, sayName: ƒ, job: “singer”}*/ console.log(person); for(var prop in person){ //列印name,sayName console.log(prop); } //會報錯 try{ person.job = ‘director’; }catch (e) { //Cannot assign to read only property ‘job’ of object console.log(e); } 可以多次呼叫Object.defineProperty()方法修改同一個屬性,但在把configurable特性設定為false之後就會有限制了:

Object.defineProperty(person,‘height’,{ configurable:false,//不可配置 writable:true, value:172 }); try{ Object.defineProperty(person,‘height’,{ configurable:true,//出錯 enumerable:true,//出錯 value:175,//正常 writable:false,//writable從true變false可以,false變true也會出錯 }); }catch (e) { //Cannot redefine property: height at Function.defineProperty console.log(e); } try{ delete person.height; }catch (e) { //設定成不可配置後也不可刪除:Cannot delete property ‘height’ of # console.log(e); } 另外,呼叫 Object.defineProperty()方法時,如果不指定,configurable、enumerable 和 writable 特性的預設值都是 false。如果是修改已有屬性,則無此限制。

2.儲存器屬性 儲存器屬性不包含資料值,只包含包含 getter 和 setter 函式(非必需)。 在讀取儲存器屬性時,會呼叫 getter 函式,這個函式負責返回有效的值;在寫入儲存器屬性時,會呼叫 setter 函式並傳入新值,這個函式負責決定如何處理資料。4個屬性特性如下: - Configurable:①表示能否通過delete刪除屬性從而重新定義,②能否修改屬性的特性,③能否把屬性修改為資料屬性。物件直接量的預設值true - Enumerable:表示能否通過for-in迴圈返回屬性。物件直接量的預設值true - Get:在讀取屬性時呼叫的函式。物件直接量預設值undefined - Set:在寫入屬性時呼叫的函式。物件直接量的預設值undefined

定義儲存器屬性最簡單的方法是使用物件直接量語法的拓展寫法:

var p = { x:3.0, y:4.0, //r是可讀寫的存取器屬性 get r(){return Math.sqrt(this.xthis.x+this.ythis.y);}, set r(newValue){ var oldvalue = Math.sqrt(this.xthis.x+this.ythis.y); var ratio = newValue/oldvalue; this.x *= ratio; this.y *= ratio; }, //theta是隻讀存取器屬性 get theta(){return Math.atan2(this.y,this.x);} } console.log(p.r); p.r = 25; 使用Object.defineProperty()方法定義儲存器屬性:

var book = { _year:2004, edition:1 }; Object.defineProperty(book,“year”,{ get:function () { return this._year; }, set:function (newValue) { if(newValue>2004){ this._year = newValue; this.edition += newValue - 2004; } } }) /**{get: ƒ, set: ƒ, enumerable: false, configurable: false}*/ console.log(Object.getOwnPropertyDescriptor(book,‘year’)); 如例子所示,使用儲存器屬性的常見方式,即設定一個屬性的值會導致其他屬性發生變化。還有一種常見就是現在流行的類似於Vue的響應式原理,就是把data中的屬性都使用defineProperty修改為儲存器屬性,可以監聽到資料的變化。

3.定義多個屬性 經常要建立或修改多個屬性,這時候可以使用Object.defineProperties()方法,它接收2個引數,要新增或修改屬性的物件和一個對映表,包含名稱和屬性描述符。

var book1 = {}; Object.defineProperties(book1,{ _year:{ value:‘2008’ }, editor:{ enumerable:true, value:‘2’ }, year:{ get:function () { return this._year; }, set:function (newValue) { this._year = newValue; this.edition += newValue - 2004; } } }); 4.物件的可擴充套件性 物件的可拓展性表示是否可以給物件新增新屬性。所有內建物件和自定義物件都是顯式可擴充套件的,宿主物件的可擴充套件性是由Javascript引擎定義的。

1.查詢物件可拓展性 var teacher = {age:25}; //true:代表可拓展 console.log(Object.isExtensible(teacher)); 2.轉換為不可拓展(“鎖定物件”) Object.preventExtensions(teacher); //false console.log(Object.isExtensible(teacher)); try{ teacher.subject = ‘math’; }catch (e) { //TypeError: Cannot add property subject, object is not extensible console.log(e); } 轉換成不可拓展的操作是不可逆的,而且只能影響到物件本身的可拓展性,如果給一個不可拓展物件的原型新增屬性,這個不可拓展物件同樣會繼承這些新屬性。

5.密封物件 密封物件比鎖定物件更高一層,除了不可拓展以外,物件的所有自身屬性都設定成了不可配置的。同樣密封物件操作是不可逆的。

var tea1 = {subject:‘math’}; //false:代表未密封 console.log(Object.isSealed(tea1)); Object.seal(tea1); try{ Object.defineProperty(tea1,‘subject’,{ //enumerable:false,//出錯 //configurable:true,//出錯 writable:false//和上面說的一樣,writable從true變成false可以,false變成true則出錯 }); }catch (e) { console.log(‘出錯…’); console.log(e); } //true:已密封 console.log(Object.isSealed(tea1)); 6.凍結物件 凍結比密封物件多的效果是:可以將它自有的所有資料屬性設定為只讀(如果物件的存取器屬性具有setter方法,存取器屬性將不受影響,仍可以通過給屬性賦值呼叫它們)。

var tea2 = {subject:‘Chinese’}; //false:代表未凍結 console.log(Object.isFrozen(tea2)); Object.freeze(tea2); try{ tea2.subject = ‘math’; }catch (e) { //TypeError: Cannot assign to read only property ‘subject’ of object console.log(e); } //true:已凍結 console.log(Object.isFrozen(tea2)); 7.屬性特性規則總結 如果物件是不可拓展的,則可以編輯已有的自有屬性,但不能給它新增新屬性。 如果屬性是不可配置的,則不能修改它的可配置性和可列舉性。 如果存取器屬性是不可配置的,則不能修改其getter和setter方法,也不能將它轉換為資料屬性。 如果資料屬性是不可配置的,則不能將它轉換為存取器屬性。 如果資料屬性是不可配置的,則不能將它的可寫性從false修改為true,但可以從true修改為false。 如果資料屬性是不可配置且不可寫的,則不能修改它的值。然而可配置但不可寫屬性的值是可以修改的(做法:先將它標記為可寫的,然後修改它的值,最後轉換為不可寫的)。