对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。存取描述符是由 getter 函数和 setter 函数所描述的属性。一个描述符只能是这两者其中之一；不能同时是两者。

事情上，这两种描述符都是对象。它们共享以下可选键值

1. configurable

表示可删除的，默认值为false；当值为true时，该属性的描述符才能够被改变，同时该属性也能从对应的对象中删除

2. enumerable

表示可枚举的，默认为false；当设置为true时，该属性才会在对象枚举时枚举到

 

数据描述符：

存取描述符：

1. get

当获取该属性时，执行get函数，属性值就是get函数的返回值

2. set

当对象的属性修改时调用set函数，set函数的第一个参数默认为修改的值。

 

总结：

数据劫持的实现

let person = {}
let personName = 'lihua'

//在person对象上添加属性namep,值为personName
Object.defineProperty(person, 'namep', {

 get: function () {
 console.log('触发了get方法')
 return personName
 },
set: function (val) {
 console.log('触发了set方法')
 personName = val
 }
})

//当读取person对象的namp属性时，触发get方法
console.log(person.namep)//liming


//当修改personName时，重新访问person.namep发现修改成功
personName = 'liming'//不会触发set或者get
//触发get
console.log(person.namep)//liming

// 对person.namep进行修改，触发set方法
person.namep = 'huahua'//触发了set方法
//触发了get方法
console.log(person.namep)//huahua

通过这种方法，我们成功监听了person上的name属性的变化（如果直接修改personName不会触发）。

2.监听对象上的多个属性

上面的使用中，我们只监听了一个属性的变化，但是在实际情况中，我们通常需要一次监听多个属性的变化。
这时我们需要配合Object.keys(obj)返回一个迭代器，进行遍历。利用这个API，我们就可以遍历劫持对象的所有属性 但是如果只是上面的思路与该API的简单结合，我们就会发现并达不到效果，下面是一个错误的版本：

Object.keys(person).forEach(function (key) {
    Object.defineProperty(person, key, {
        enumerable: true,
        configurable: true,
        // 默认会传入this
        get() {
            return person[key]
        },
        set(val) {
            console.log(`对person中的${key}属性进行了修改`)
            person[key] = val
            // 修改之后可以执行渲染操作
        }
    })
})
console.log(person.age)

在访问person身上的属性时，就会触发get方法，返回person[key]，但是访问person[key]也会触发get方法，导致递归调用，最终栈溢出。

这也引出了我们下面的方法，我们需要设置一个中转Obsever，来让get中return的值并不是直接访问obj[key]。

let person = {
    name: '',
    age: 0
}
// 实现一个响应式函数
function defineProperty(obj, key, val) {
    Object.defineProperty(obj, key, {
        get() {
            console.log(`访问了${key}属性`)
            return val //返回值 不是返回obj.key
        },
        set(newVal) {
            console.log(`${key}属性被修改为${newVal}了`)
            val = newVal
        }
    })
}
// 实现一个遍历函数Observer
function Observer(obj) {//遍历获取它的value值
    Object.keys(obj).forEach((key) => {
        defineProperty(obj, key, obj[key])//遍历给对象的每个属性劫持
    })
}
Observer(person)
console.log(person.age)
person.age = 18
console.log(person.age)

3.深度监听一个对象

如何解决对象中嵌套一个对对象的情况呢？

• 在defineProperty()函数中，添加一个递归的情况
• observer里面加一个递归停止的条件

如果原本的属性值是一个字符串，但是我们重新赋值了一个对象，我们要如何监听新添加的对象的所有属性？

• 修改set属性

function defineProperty(obj, key, val) {
    //如果某对象的属性也是一个对象，递归进入该对象，进行监听
    if(typeof val === 'object'){
    observer(val)
    }
    Object.defineProperty(obj, key, {
        get() {
            console.log(`访问了${key}属性`)
            return val
        },
        set(newVal) {
            // 如果newVal是一个对象，递归进入该对象进行监听
        if(typeof newVal === 'object'){
             observer(key)
        }
        console.log(`${key}属性被修改为${newVal}了`)
        val = newVal



        }
    })
}


function Observer(obj) {
    //递归停止条件，如果传入的不是一个对象，return
    if (typeof obj !== "object" || obj === null) {
        return
    }
    // for (key in obj) {
    Object.keys(obj).forEach((key) => {
        defineProperty(obj, key, obj[key])
    })
    // }

}

如果原本的属性值是一个字符串，但是我们重新赋值了一个对象，我们要如何监听新添加的对象的所有属性，修改set属性：

4.监听数组

let arr = [1, 2, 3]
let obj = {}
//把arr作为obj的属性监听
Object.defineProperty(obj, 'arr', {
    get() {
        console.log('get arr')
        return arr
    },
    set(newVal) {
        console.log('set', newVal)
        arr = newVal
    }
})
console.log(obj.arr)//输出get arr [1,2,3]  正常
obj.arr = [1, 2, 3, 4] //输出set [1,2,3,4] 正常
obj.arr.push(3) //输出get arr 不正常，监听不到push

Proxy

在上面的讲述中，我们还有问题没有解决：那就是当我们要给对象新增加一个属性时，也需要手动去监听这个新增属性。

也正是因为这个原因，使用vue给 data 中的数组或对象新增属性时，需要使用 vm.$set 才能保证新增的属性也是响应式的。

通过Object.definePorperty()进行数据监听是比较麻烦的，需要大量的手动处理。这也是为什么在Vue3.0中尤雨溪转而采用Proxy。

1.基本使用

//定义一个需要代理的对象
let person = {
    age: 0,
    school: '西电'
}
//定义handler对象
let hander = {
    get(obj, key) {
        // 如果对象里有这个属性，就返回属性值，如果没有，就返回默认值66
        console.log('get')
        return key in obj ? obj[key] : 66
    },
    set(obj, key, val) {
        obj[key] = val
        return true
    }
}
//把handler对象传入Proxy
let proxyObj = new Proxy(person, hander)

// 测试get能否拦截成功
console.log(proxyObj.age)//输出 get 0
console.log(proxyObj.school)//输出get 西电
console.log(proxyObj.name)//输出默认值get 66

// 测试set能否拦截成功
proxyObj.age = 18
console.log(proxyObj.age)//输出 get 18 修改成功

可以看出，Proxy代理的是整个对象，而不是对象的某个特定属性，不需要我们通过遍历来逐个进行数据绑定。另外，MDN上明确指出set()方法应该返回一个布尔值，否则会报错TypeError。

2.轻松解决Object.defineProperty中遇到的问题

在上面使用Object.defineProperty的时候，我们遇到的问题有：
1.一次只能对一个属性进行监听，需要遍历来对所有属性监听。这个我们在上面已经解决了。
2. 在遇到一个对象的属性还是一个对象的情况下，需要递归深度监听，更改对象的属性string为对象时，要设置深度监听。
3. 对于对象的新增属性，需要手动监听
4. 对于数组通过push、unshift方法增加的元素，也无法监听

let person = {
    age: 0,
    school: '西电',
    children: {
        name: '小明'
    }
}
let hander = {
    get(obj, key) {
        return key in obj ? obj[key] : 66
    }, set(obj, key, val) {
        obj[key] = val
        return true
    }
}
let proxyObj = new Proxy(person, hander)

// 测试get
console.log(proxyObj.children.name)//输出：小明 问题2
console.log(proxyObj.children.height)//输出：undefined
// 测试set
proxyObj.children.name = '菜菜'
console.log(proxyObj.children.name)//输出: 菜菜

let subject = ['高数']
let handler = {
    get(obj, key) {
        return key in obj ? obj[key] : '没有这门学科'
    }, set(obj, key, val) {
        obj[key] = val
        //set方法成功时应该返回true，否则会报错
        return true
    }
}

let proxyObj = new Proxy(subject, handler)

// 检验get和set
console.log(proxyObj)//输出  [ '高数' ]
console.log(proxyObj[1])//输出  没有这门学科  问题3
proxyObj[0] = '大学物理'
console.log(proxyObj)//输出  [ '大学物理' ]

// // 检验push增加的元素能否被监听  问题4
proxyObj.push('线性代数')
console.log(proxyObj)//输出 [ '大学物理', '线性代数' ]