一、Object.keys()
Object.keys()方法會返回一個由給定對象的所有可枚舉自身屬性的屬性名組成的數組，數組中屬性名的排列順序和使用(for in)循環遍歷該對象時返回的順序一致 (順序一致不包括數字屬性)（兩者的主要區別是 for-in 還會遍歷出一個對象從其原型鏈上繼承到的可枚舉屬性）。
let obj = {
name:'dailu',
age:123,
sex:"female"
}
console.log(Object.keys(obj)); //["name", "age", "sex"]
var arr = ["a","b","c"];
console.log(Object.keys(arr)); //["0", "1", "2"]
// 類數組對象
var obj1 = {0:"a",1:"b",2:"c"}
console.log(Object.keys(obj1)); //["0", "1", "2"]
二、Object.defineProperty()
Object.defineProperty()方法會直接在一個對象上定義一個新屬性，或者修改一個已經存在的屬性， 并返回這個對象.
語法：
Object.defineProperty(obj,prop,descriptor)
概念:
ECMAScript中有兩種屬性：數據屬性和訪問器屬性
1. 數據屬性
屬性特性用[[]]括起來，js中不能直接訪問他們，這些特性是為了實現JavaScript引擎用的。
數據屬性有4個描述行為的特性:
-
[[configurable]]:表示能否能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或者能否把屬性修改為訪問器屬性。 -
[[Enumerable]]:當且僅當該屬性的 enumerable 為 true 時，該屬性才能夠出現在對象的枚舉屬性中 -
[[Writable]]:表示能否修改屬性的值 -
[[Value]]:表示屬性的值。
注：直接在對象上定義的屬性的前三個特性的默認值是true。
通過Object.defineProperty()定義屬性或者修改原有屬性。
例如：
var obj = {}
Object.defineProperty(obj,"name",{
configurable:false,
writable:false,
enumerable:true,
value:'elva'
})
console.log(obj.name); //elva
delete obj.name
console.log(obj.name); //elva
obj.name = 'haha'
console.log(obj.name);//elva
for(var key in obj){
console.log(key) //name
}
如果configurable設置成false,，那么除了 writable 外，其他特性都不能被修改,如果嘗試修改 （除 writable 以外），將會產生一個TypeError異常，除非當前值與修改值相同。
var obj = {}
Object.defineProperty(obj,"name",{
configurable:false,
writable:false,
enumerable:true,
value:'elva'
})
/*
Object.defineProperty(obj,"name",{
enumerable:false // Uncaught TypeError: Cannot redefine property: name
})
*/
Object.defineProperty(obj,"name",{
enumerable:true // 成功不報異常
})
注：如果一個屬性的 configurable 為 false，則其 writable 特性也只能修改為 false。
var obj = {}
Object.defineProperty(obj,"name",{
configurable:false,
writable:false,
enumerable:true,
value:'elva'
})
//再次調用Object.defineProperty()
Object.defineProperty(obj,"name",{
// 通過Object.defineProperty設置的屬性的confugurable特性值默認是false,因此第二次調用Object.defineProperty屬性不會報錯
writable:true // Uncaught TypeError: Cannot redefine property: name
})
2、訪問器屬性：
-
[[configurable]]:表示能否能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或者能否把屬性修改為訪問器屬性。 -
[[Enumerable]]:當且僅當該屬性的 enumerable 為 true 時，該屬性才能夠出現在對象的枚舉屬性中 -
[[get]]:在讀取屬性值時調用的函數，默認值為undefined。 -
[[]set]:在寫入屬性時調用的函數，默認值為undefined。
注:訪問器屬性不能直接定義，必須使用Object.defineProperty()定義
例如:
var book = {
_year:2004,
edition:1
}
Object.defineProperty(book,"year",{
get:function (){
return this._year
},
set:function (val){
if(val>2004){
this.edition +=val-2004
}
}
})
book.year = 2005
console.log(book.edition); // 2
_year:表示只能通過訪問器屬性訪問
3、定義多個屬性Object.defineProperties()
例如:
var book ={}
Object.defineProperties(book,{
_year:{
configurable:true,
enumerable:true,
writable:true,
value:2004
},
edition:{
configurable:true,
enumerable:true,
writable:true,
value:1
},
year:{
enumerable:true,
get:function (){
return this._year
},
set:function (val){
if(val>2004){
this.edition += val-2004
}
}
}
})
console.log(book._year); //2004
book._year = 2005
console.log(book.edition);// 1
console.log(book.year); // 2005
console.log(book._year); // 2005
book.year = 2005
console.log(book.edition); //2
console.log(book.year);//2005
總結：數據屬性和訪問器屬性都有[[configurable]]和[[enumarable]],[[writable]]和[[value]]只能在數據屬性中使用，[[get]]和[[set]]只能在訪問器屬性中使用。
任務目的
- 了解 getter 和 setter
- 了解 new
- 任務描述
這是“動態數據綁定”系列的第一題。
動態數據綁定就是 Vue 最為基礎，最為有用的一個功能。這個系列將分成5部分，一步一步來理解和實現這一功能。
ok，我們從最簡單的開始。給定任意一個對象，如何監聽其屬性的讀取與變化？也就是說，如何知道程序訪問了對象的哪個屬性，又改變了哪個屬性？ 舉個例子。
let app1 = new Observer({
name: 'youngwind',
age: 25
});
let app2 = new Observer({
university: 'bupt',
major: 'computer'
});
// 要實現的結果如下：
app1.data.name // 你訪問了 name
app1.data.age = 100; // 你設置了 age，新的值為100
app2.data.university // 你訪問了 university
app2.data.major = 'science' // 你設置了 major，新的值為 science
請實現這樣的一個 Observer，要求如下：
- 傳入參數只考慮對象，不考慮數組。
- new Observer返回一個對象，其 data 屬性要能夠訪問到傳遞進去的對象。
- 通過 data 訪問屬性和設置屬性的時候，均能打印出右側對應的信息。
任務注意事項
- 不能使用任何第三方的庫
- 程序執行環境為瀏覽器
代碼展示：
function Observer(data){
this.data = data;
this.walk(data)
}
var p = Observer.prototype;
// 遍歷
p.walk = function (obj){
var val,
_this = this;
Object.keys(obj).forEach(function (key){
val = obj[key]
if(typeof val==="object"){
new Observer(val)
}
_this.convert(key,val)
})
}
// 綁定getter 和setter
p.convert = function (key,val){
Object.defineProperty(this.data,key,{
configurable:true,
enumarable:true,
get:function (){
console.log("你訪問了"+key);
return val
},
set:function (newVal){
console.log("你設置了"+key);
console.log("新的"+key+"="+newVal);
// 如果設置的新值是一個對象，則遞歸它，加上set/get
if(typeof newVal ==="object"){
new Observer(newVal);
}
val = newVal
}
})
}
let data = {
user: {
name: "hello world",
age: "24"
},
address: {
city: "beijing"
}
};
var app = new Observer(data);
console.log(app.data.user);
