• 數(shù)據(jù)屬性與訪問器屬性

• 1.對象屬性的作用主要是數(shù)據(jù)的存儲

• 2.既然數(shù)據(jù)存在存儲，則會有增刪改查相關(guān)操作（增加屬性，修改屬性值，獲取屬性值，刪除屬性）

• 3.數(shù)據(jù)屬性用于控制屬性的增刪改查特征

• 4.訪問屬性用于監(jiān)聽屬性的存儲過程，可以限制屬性的行為（限制屬性的讀寫，實(shí)現(xiàn)對象觀察者模式，M與V雙向綁定等）

• 1.1-數(shù)據(jù)屬性

• 1.2-訪問器屬性

1.1-數(shù)據(jù)屬性

/** 數(shù)據(jù)屬性 *///1.我們默認(rèn)的對象屬性是數(shù)據(jù)屬性 var person = {name:"張三",age : 18,address:'zlswgy' };console.log(person);// console.log(person);//{ name: '張三', age: 18, address: 'zlswgy' }//2.數(shù)據(jù)屬性有四個特征值描述他們的行為，這四個特性默認(rèn)情況下可以理解為都是true //(1)configurable:true 能夠刪除 (不可逆操作) //(2)enumerable:true 能否遍歷 for-in循環(huán)，以及對象獲取 //(3)writable:true 能夠修改 //(4)value:undefined 指定屬性讀寫的位置 讀從哪個位置讀 寫在哪里// //3.要想修改這四個特征，可以用ES5的Object.defineProperty()方法 // //第一個參數(shù)：哪個對象 第二個參數(shù)：這個對象哪個屬性（字符串） 第三個參數(shù)：描述符對象（四個行為特征）// //3.1 設(shè)置person對象的name屬性無法被刪除,無法再修改其他任何特征 Object.defineProperty(person,"name",{configurable : false//person的name屬性不能被刪除 })//3.1.1 configurable修改是不可逆的 一旦改為false，再修改為true會報(bào)錯 //這行代碼運(yùn)行會報(bào)錯 // Object.defineProperty(person,"name",{ // configurable:true//person對象的name屬性不能被刪除 // });person.name = '李四';delete person.name;//刪除name屬性無效console.log(person);//{ name: '李四', age: 18, address: 'zlswgy' }// //3.2 設(shè)置person對象的address屬性無法被遍歷獲取 Object.defineProperty(person,"address",{enumerable:false//person對象的address屬性不能被forin循環(huán)遍歷獲取,打印對象時也看不到 });for(key in person){console.log(person[key]);//李四 18 }console.log(person);//{ name: '李四', age: 18 } 直接打印對象的address屬性也是無法獲取的 console.log(person.address);//zlswgy// //3.3 設(shè)置person的age屬性無法被修改Object.defineProperty(person,"age",{writable:false//person對象的age屬性不能被修改 });person.age = 20;console.log(person);//{ name: '李四', age: 18 }Object.defineProperty(person,"age",{value:"6666"//設(shè)置age屬性的值為6666，雖然age屬性不能用屬性賦值方式修改但是可以用vaule特征來修改 });person.age = 22; console.log(person);

1.2-訪問器屬性

/** 訪問器屬性 *//*訪問器屬性除了對象屬性固有的四個特征值之外，還添加了兩個監(jiān)聽函數(shù)get與set 當(dāng)對屬性取值時，會調(diào)用get函數(shù)，得到的就是get函數(shù)中return的值 當(dāng)對對象賦值時會調(diào)用set函數(shù)，該函數(shù)有一個默認(rèn)形參用于接收賦值的實(shí)參 */// /*特點(diǎn) // 1.如果單獨(dú)get，表示該屬性只可訪問不可重寫 // 2.在get和set中使用this會導(dǎo)致無限遞歸，內(nèi)存溢出 // * 通常我們給對象添加一個帶下劃線的數(shù)據(jù)屬性名用于存儲，然后通過不帶下劃線來獲取 // 3.訪問器屬性和數(shù)據(jù)屬性value不能同時定義，也不能多次定義，兩者只可定義一種 // */var student = {name : "老鐵",_age : 18 }// //1.如果單獨(dú)get，表示該屬性只可訪問不可重寫 // Object.defineProperty(student,"age",{ // get : function(){ // console.log('1'); // return this._age;//不能使用this.age會導(dǎo)致循環(huán)遞歸，內(nèi)存溢出 // }// }) // student.age = 11;// console.log(student.age);//18// //2.同時實(shí)現(xiàn)get與set保護(hù)數(shù)據(jù)的隱私性: // //例如將_age的數(shù)據(jù)類型改為字符串，而通過屬性訪問age的時候得到的是number,賦值的時候確保age這個屬性具有真實(shí)性（人的年齡不可能小于0）var people = {name:"hm",_age:"18" } Object.defineProperty(people,"age",{get : function(){console.log('有人想要讀取我的值');return parseInt(this._age);//訪問時得到真實(shí)的數(shù)據(jù)類型number},set : function(newValue){console.log('外部賦值時的傳參' + newValue);if(newValue > 0 && newValue < 100){//賦值時只有年齡在0-100之間才可以賦值this._age = String(newValue);//轉(zhuǎn)為字符串存儲，保證數(shù)據(jù)隱私性}} })console.log(people);//{ name: 'hm', _age: '18' } console.log(people._age,typeof people._age);//18 string console.log(people.age,typeof people.age);//18 number people.age = 111;//此數(shù)字超出上限 設(shè)置無效 console.log(people._age);//18 console.log(people.age);//18 people.age = 88;//此數(shù)字在范圍內(nèi) 有效 console.log(people._age,typeof people._age);//88 string console.log(people.age,typeof people.age);//88 number

總結(jié)

以上是生活随笔為你收集整理的JS-数据属性与访问器属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。