菜菜： “老大玄柠，那個(gè)， Object.defineProperty 是什么鬼盒刚？”
假設(shè)我們有個(gè)對(duì)象 user ; 我們要給它增加一個(gè)屬性 name , 我們會(huì)這么做
var user = {};
user.name="狂奔的蝸牛";
console.log(user);//{name: "狂奔的蝸牛"}
如果想要增加一個(gè)sayHi方法叻？
user.sayHi=function () { console.log("Hi !") };
console.log(user);//{name: "狂奔的蝸牛", sayHi: ?n}
Object.defineProperty 就是做這個(gè)的
那么Object.defineProperty 怎么用？
Object.defineProperty 需要三個(gè)參數(shù)（object , propName , descriptor）
- 1
object對(duì)象 => 給誰加 - 2
propName屬性名 => 要加的屬性的名字 【類型：String】 - 3
descriptor屬性描述 => 加的這個(gè)屬性有什么樣的特性【類型：Object】
那么descriptor這個(gè)是個(gè)對(duì)象 曾棕，他有那些屬性呢 ? 別著急我們一個(gè)一個(gè)說；
既然可以給一個(gè)對(duì)象增加屬性菜循，那么我們用它來做一下給 user添加 name屬性翘地，代碼是這樣的
var user = {};
Object.defineProperty(user,"name",{
value:"狂奔的蝸牛"
})
console.log(user);//{name: "狂奔的蝸牛"}
說明 是的還是那個(gè)經(jīng)典的value屬性，他就是設(shè)置屬性值的癌幕。
等等子眶，屬性值只能為字符串嗎？我們的 number function Object boolean 等呢序芦？
var user = {};
Object.defineProperty(user,"name",{
value:"狂奔的蝸牛"
})
Object.defineProperty(user,"isSlow",{
value:true
})
Object.defineProperty(user,"sayHi",{
value:function () { console.log("Hi !") }
})
Object.defineProperty(user,"age",{
value:12
})
Object.defineProperty(user,"birth",{
value:{
date:"2018-06-29",
hour:"15:30"
}
})
console.log(user);
說明 事實(shí)證明任何類型的數(shù)據(jù)都是可以的哦~
問題又來了臭杰，如果 user對(duì)象已經(jīng)有了name屬性，我們可以通過Object.defineProperty改變這個(gè)值嗎谚中？
我們來試試
var user = {};
Object.defineProperty(user,"name",{
value:"狂奔的蝸牛"
})
console.log(user);
user.name="新=>狂奔的蝸牛"
console.log(user);
咦渴杆？？為什么我改了沒作用勒宪塔？磁奖？
原因：上邊說了descriptor有很多屬性，除了value屬性還有個(gè) writable【顧名思義屬性是否可以被重新賦值】接受數(shù)據(jù)類型為 boolean（默認(rèn)為false） true => 支持被重新賦值 false=>只讀
哦哦某筐，原來如果我沒設(shè)置writable值的時(shí)候就默認(rèn)只讀啊比搭，所以才改不掉
那我們看看，設(shè)置為true南誊，是不是就可以改掉了身诺。
var user = {};
Object.defineProperty(user,"name",{
value:"狂奔的蝸牛",
writable:true
})
console.log(user);
user.name="新=>狂奔的蝸牛"
console.log(user);
這個(gè)descriptor還有其他的屬性嗎？enumerable【顧名思義屬性是否可以被枚舉】接受數(shù)據(jù)類型為 boolean（默認(rèn)為false） true => 支持被枚舉 false=>不支持
額抄囚。霉赡。。枚舉幔托？穴亏？什....什么意思？
假設(shè)我們想知道這個(gè) user對(duì)象有哪些屬性我們一般會(huì)這么做
var user ={
name:"狂奔的蝸牛",
age:25
} ;
//es6
var keys=Object.keys(user)
console.log(keys);// ['name','age']
//es5
var keys=[];
for(key in user){
keys.push(key);
}
console.log(keys);// ['name','age']
如果我們使用 Object.的方式定義屬性會(huì)發(fā)生什么呢重挑？我們來看下輸出
var user ={
name:"狂奔的蝸牛",
age:25
} ;
//定義一個(gè)性別 可以被枚舉
Object.defineProperty(user,"gender",{
value:"男",
enumerable:true
})
//定義一個(gè)出生日期 不可以被枚舉
Object.defineProperty(user,"birth",{
value:"1956-05-03",
enumerable:false
})
//es6
var keys=Object.keys(user)
console.log(keys);
// ["name", "age", "gender"]
console.log(user);
// {name: "狂奔的蝸牛", age: 25, gender: "男", birth: "1956-05-03"}
console.log(user.birth);
// 1956-05-03
說明 很明顯嗓化，我們定義為 enumerable=false的birth屬性并沒有被遍歷出來，遍歷 => 其實(shí)就是枚舉（個(gè)人理解啦谬哀，不喜勿噴哦~）
總結(jié) enumerable 屬性取值為 布爾類型 true | false 默認(rèn)值為 false刺覆，為真屬性可以被枚舉；反之則不能玻粪。此設(shè)置不影響屬性的調(diào)用和 查看對(duì)象的值隅津。
configurable 是接下來我們要講的一個(gè)屬性诬垂，這個(gè)屬性有兩個(gè)作用：
- 1 屬性是否可以被刪除
- 2 屬性的特性在第一次設(shè)置之后可否被重新定義特性
var user ={
name:"狂奔的蝸牛",
age:25
} ;
//定義一個(gè)性別 不可以被刪除和重新定義特性
Object.defineProperty(user,"gender",{
value:"男",
enumerable:true,
configurable:false
})
//刪除一下
delete user.gender;
console.log(user);//{name: "狂奔的蝸牛", age: 25, gender: "男"}
//重新定義特性
Object.defineProperty(user,"gender",{
value:"男",
enumerable:true,
configurable:true
})
// Uncaught TypeError: Cannot redefine property: gender
//會(huì)報(bào)錯(cuò)，如下圖
設(shè)置為
true
var user ={
name:"狂奔的蝸牛",
age:25
} ;
//定義一個(gè)性別 可以被刪除和重新定義特性
Object.defineProperty(user,"gender",{
value:"男",
enumerable:true,
configurable:true
})
//刪除前
console.log(user);
// {name: "狂奔的蝸牛", age: 25, gender: "男"}
//刪除一下
delete user.gender;
console.log(user);
// {name: "狂奔的蝸牛", age: 25}
//重新定義特性
Object.defineProperty(user,"gender",{
value:"男",
enumerable:true,
configurable:false
})
//刪除前
console.log(user);
// {name: "狂奔的蝸牛", age: 25, gender: "男"}
//刪除一下 刪除失敗
delete user.gender;
console.log(user);
// {name: "狂奔的蝸牛", age: 25, gender: "男"}
總結(jié) configurable設(shè)置為 true 則該屬性可以被刪除和重新定義特性伦仍；反之屬性是不可以被刪除和重新定義特性的结窘，默認(rèn)值為false（Ps.除了可以給新定義的屬性設(shè)置特性，也可以給已有的屬性設(shè)置特性哈）
最后我們來說說充蓝，最重要的兩個(gè)屬性 set和get（即存取器描述：定義屬性如何被存人矸恪），這兩個(gè)屬性是做什么用的呢谓苟？我們通過代碼來看看
var user ={
name:"狂奔的蝸牛"
} ;
var count = 12;
//定義一個(gè)age 獲取值時(shí)返回定義好的變量count
Object.defineProperty(user,"age",{
get:function(){
return count;
}
})
console.log(user.age);//12
//如果我每次獲取的時(shí)候返回count+1呢
var user ={
name:"狂奔的蝸牛"
} ;
var count = 12;
//定義一個(gè)age 獲取值時(shí)返回定義好的變量count
Object.defineProperty(user,"age",{
get:function(){
return count+1;
}
})
console.log(user.age);//13
接下來我不用解釋了吧官脓，你想在獲取該屬性的時(shí)候?qū)χ底鍪裁措S你咯~
來來來，我們看看
set涝焙，不多說上代碼
var user ={
name:"狂奔的蝸牛"
} ;
var count = 12;
//定義一個(gè)age 獲取值時(shí)返回定義好的變量count
Object.defineProperty(user,"age",{
get:function(){
return count;
},
set:function(newVal){
count=newVal;
}
})
console.log(user.age);//12
user.age=145;
console.log(user.age);//145
console.log(count);//145
//等等卑笨，如果我想設(shè)置的時(shí)候是 自動(dòng)加1呢？我設(shè)置145 實(shí)際上設(shè)置是146
var user ={
name:"狂奔的蝸牛"
} ;
var count = 12;
//定義一個(gè)age 獲取值時(shí)返回定義好的變量count
Object.defineProperty(user,"age",{
get:function(){
return count;
},
set:function(newVal){
count=newVal+1;
}
})
console.log(user.age);//12
user.age=145;
console.log(user.age);//146
console.log(count);//146
說明 注意：當(dāng)使用了getter或setter方法仑撞，不允許使用writable和value這兩個(gè)屬性(如果使用赤兴，會(huì)直接報(bào)錯(cuò)滴)
get 是獲取值的時(shí)候的方法，類型為 function 隧哮，獲取值的時(shí)候會(huì)被調(diào)用桶良，不設(shè)置時(shí)為 undefined
set 是設(shè)置值的時(shí)候的方法，類型為 function 沮翔，設(shè)置值的時(shí)候會(huì)被調(diào)用陨帆，undefined
get或set不是必須成對(duì)出現(xiàn)，任寫其一就可以
var user ={
name:"狂奔的蝸牛"
} ;
var count = 12;
//定義一個(gè)age 獲取值時(shí)返回定義好的變量count
Object.defineProperty(user,"age",{
get:function(){
console.log("這個(gè)人來獲取值了２墒础疲牵！");
return count;
},
set:function(newVal){
console.log("這個(gè)人來設(shè)置值了！搏存！");
count=newVal+1;
}
})
console.log(user.age);//12
user.age=145;
console.log(user.age);//146
【完結(jié)】
Object.defineProperty方法直接在一個(gè)對(duì)象上定義一個(gè)新屬性瑰步，或者修改一個(gè)已經(jīng)存在的屬性， 并返回這個(gè)對(duì)象
value: 設(shè)置屬性的值
writable: 值是否可以重寫璧眠。true | false
enumerable: 目標(biāo)屬性是否可以被枚舉。true | false
configurable: 目標(biāo)屬性是否可以被刪除或是否可以再次修改特性 true | false
set: 目標(biāo)屬性設(shè)置值的方法
get：目標(biāo)屬性獲取值的方法
下一篇读虏，我們來看看怎么用它做一個(gè)簡單的雙向綁定
文章傳送門 => 用Object.defineProperty手寫一個(gè)簡單的雙向綁定
