Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性。这个方法执行完成后会返回修改后的这个对象。
语法
Object.defineProperty(obj, prop, descriptor)
- obj
- 要处理的目标对象
- prop
- 要定义或修改的属性的名称
- descriptor
- 将被定义或修改的属性描述符
- 使用方法
var obj = {}
obj.name = 'hunger'
obj['age'] = 3
Object.defineProperty(obj, 'intro', {
value : 'hello world'
})
console.log(obj) // {name: 'hunger', age: 3, intro: 'hello world'}
以上三种方法都可以用来定义/修改一个属性，Object.defineProperty 的方法貌似看起来有些小题大做。没关系，且往下看它更复杂的用法
var obj = {}
Object.defineProperty(obj, 'intro', {
configurable: false
value : 'hello world'
})
obj.intro = 'jirengu'
console.log(obj.intro) // "helloworld"
delete obj.intro // false, 删除失败
console.log(obj.intro) // "helloworld"
Object.defineProperty(obj, 'name', {
configurable: true,
value : 'hunger valley'
})
delete obj.intro // true ， 成功删除
通过上面的例子可以看出，属性描述对象中 configurable 的值设置为 false 后(如果没设置，默认就是 false)，以后就不能再次通过 Object.defineProperty修改属性，也无法删除该属性。
var obj = {name: 'jirengu'}
Object.defineProperty(obj, 'age', {
value: 3,
enumerable: false
})
for(var key in obj){
console.log(key) // 只输出 'name'， 不输出'age'
}
设置 enumerable 属性为 false 后，遍历对象的时候会忽略当前属性(如果未设置，默认就是 false不可遍历)。
var obj = {name: 'jirengu'}
Object.defineProperty(obj, 'age', {
value: 3,
writable: false
})
obj.age = 4
console.log(obj.age) // 3， writable为 false 时，修改对象的当前属性值无效
value 和 writable 叫数据描述符，具有以下可选键值：
- value：该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。
- writable：当且仅当该属性的writable为true时，该属性才能被赋值运算符改变。默认为 false。
- configurable: true 和 wriable: true 的区别是，前者是设置属性能删除，后者是设置属性能修改
var obj = {}
var age
Object.defineProperty(obj, 'age', {
get: function(){
console.log('get age...')
return age
},
set: function(val){
console.log('set age...')
age = val
}
})
obj.age = 100 // 'set age...'
console.log(obj.age) // 'get age...', 100
get 和 set 叫存取描述符，有以下可选键值：
- get：一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。
- set：一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。
数据描述符和存取描述符是不能同时存在的
var obj = {}
var age
Object.defineProperty(obj, 'age', {
value: 100,
get: function(){
console.log('get age...')
return age
},
set: function(val){
console.log('set age...')
age = val
}
})
因为有 value，又有 get，上述代码会报错
实现数据的监听
现在我们利用Object.defineProperty这个方法动态监听数据
var data = {
name: 'hunger',
friends: [1, 2, 3]
}
observe(data)
console.log(data.name)
data.name = 'valley'
data.friends[0] = 4
function observe(data) {
if(!data || typeof data !== 'object') return
for(var key in data) {
let val = data[key] //注意点1：这里是 let 不是 var，想想为什么
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function() {
console.log(`get ${val}`)
return val
},
set: function(newVal) {
console.log(`changes happen: ${val} => ${newVal}`)
val = newVal
}
})
if(typeof val === 'object'){
observe(val)
}
}
}
代码中注意点1，要使用 let，不用 var，想想为什么？
上面的 observe 函数实现了一个数据监听，当监听某个对象后，我们可以在用户读取或者设置属性值的时候做个拦截，做我们想做的事
