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

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

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

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

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

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

• 1.2-訪問(wèn)器屬性

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

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

1.2-訪問(wèn)器屬性

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

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