数据劫持

Vue2的Object.defineProperty()

Vue2的响应式是通过Object.defineProperty()拦截数据，将数据转换成getter/setter的形式，在访问数据的时候调用getter函数，在修改数据的时候调用setter函数。然后利用发布-订阅模式，在数据变动时触发依赖，也即发布更新给订阅者，订阅者收到消息后进行相应的处理

描述符分为数据描述符和存取描述符，只能是其中之一，不可两者同时存在

configurable:表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为false。
enumerable：表示能否通过for in循环访问属性，默认值为false
//数据描述符
1.writable：表示能否修改属性的值。默认值为false。
2.value：包含这个属性的数据值。默认值为undefined。
//存取描述符
1.get：在读取属性时调用的函数，默认值是undefined
2.set：在写入属性的时候调用的函数，默认值是undefined

  <script>
        function defineReactive(data) {
            if (!data || Object.prototype.toString.call(data) !== '[object Object]')
                return
            for (let key in data) {
                let val = data[key]
                Object.defineProperty(data, key, {
                    configurable: true,//可配置
                    enumerable: true,//可枚举
                    set: function (newval) {
                        console.log('调用set');
                        if (newval === val) {
                           return ;
                        }
                        console.log('属性值发生变化');
                        val = newval

                    },
                    get() {
                        console.log('调用get');
                        return val
                    },

                })
                if (typeof val === 'object') {
                    defineReactive(val)
                }
            }
        }
        const data = {
            name: 'better',
            firends: ['1', '2']
        }
        defineReactive(data)

        console.log('data.friends[0]:', data.firends[0]);
        console.log('data.name:', data.name);
        data.name = 'lihua'
        console.log('更改后的data.name:', data.name);
        data.friends[0] = '100'
        // 在JavaScript中，数组是一种特殊的对象，因此直接对数组进行defineProperty并不能监听数组元素的变化。
        // 当我们尝试修改数组元素时，比如data.friends[0] = 100，实际上并不会触发set函数，也就无法实现数组元素的响应式更新。
        console.log('更改后的data.friends[0]:', data.firends[0]);

    </script>

弊端：
1.无法劫持对象的添加和删除操作，Vue2的解决方法(新增set和delete)
2.无法劫持到数组的api(push、pop…)，Vue2的解决方法是重写数组的api
3.存在深层嵌套关系，通过无脑递归，但也会劫持到项目始终都不会用到的对象，造成性能损耗

Vue3的proxy（解决vue2响应式的弊端）

Proxy(代理)：用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。
Reflect(反射)：对源对象的属性进行操作

Vue3基于ES6新增的Proxy对象实现数据代理以及通过Reflect对源数据进行操作，它解决了Vue2中无法追踪数据新增或删除属性的问题。另外，Proxy可以直接监听数组，无需像Vue2响应式那样需要重写数组方法进行拦截

proxy详解

const p = new Proxy(target, handler)
//target:要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
//handler:一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

 <script>

        function isObject(obj) {
            if (typeof obj !== "object" || !obj) {
                return false;
            }
            return true;
        }

        // vue3使用reactive定义响应式对象时返回的就是reactive的实例
        function reactive(obj) {
            // 对整个对象进行劫持
            return new Proxy(obj, {
                get(target, key) {
                    console.log('get:', key);
                    // proxy想要监听深层对象也需要进行递归处理，不过这里用懒加载，用不到的属性不用进行深层监听
                    let res = Reflect.get(target, key)
                    return isObject(res) ? reactive(res) : res;
                },
                set(target, key, value) {
                    console.log('set:', key, value);
                    return Reflect.set(target, key, value)
                },
                deleteProperty(target, key) {
                    console.log('delete', key);
                    return Reflect.deleteProperty(target, key)
                }
            })
        }

        let person = reactive({ name: 'zs', age: 18, job: { code: "前端" } })
        console.log('person.name:', person.name);
        // 直接对proxy实例操作
        person.name = '小张'
        console.log('------------');
        person.gender = '男'
        delete person.age
        console.log('------------');
        console.log('测试对数组的监听');
        //数组的push方法,作为push的属性理应也该被劫持到
        let arr = reactive([1, 2, 3, 4, 5])
        arr.push(11)

        console.log('--------------------');
        console.log('对深层对象的测试');
        console.log('person.job.code:', person.job.code);
        person.job.code = "php"


    </script>

总结

优点

1.Proxy直接劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式的目的
2.Proxy可以直接监听数组的变化（push,shift,splice…）
3.Proxy有多达13中拦截方法，不限于apply、ownKeys、deleteProperty、has等等，这是Object.defineProperty所不具备的
4.Proxy懒加载，解决递归造成的性能问题

缺点

Proxy不兼容IE

闭包

 <script>
        function fn1() {
            debugger;
            let num = 999;
            function innerFn1() {
                debugger;
                console.log(num);
            }
            innerFn1()
        }
        fn1()
    </script>

函数依赖外部变量就形成闭包

闭包的应用场景

函数内部return出去一个函数，就是结合了闭包的应用场景之一，目的是为了让那个闭包持久化

    <script>
        function fn1() {
            debugger;
            let num = 999;
            function innerFn1() {
                debugger;
                console.log(num);
            }
           return innerFn1
        }
        let closure1=fn1();//闭包 num:999
        // 两个不同的闭包，因此闭包可以解决全局变量命名冲突问题
        let closure2=fn1();//闭包 num:999
    </script>

<script>
        // 面试题
        function fn3(a, b) {
            console.log('第二个参数的值是：', b);
            return {
                innerFn: function (c) {
                    return fn3(c, a);
                }
            }
        }
        // 链式调用
        fn3(1).innerFn(2).innerFn(3).innerFn(4)
        // 1.外部调用 传递a:1 返回一个对象 形成闭包 (a:1)=>输出undefined
        // 2.传递c:2 执行函数，并返回一个对象  fn3(c,a) (c:2,a:1)=>输出1
        // 3.外部a:2,b:1,返回一个对象(a:2)
        // 4.参数c:3,执行fn(3,2)   外部：(a:3,b:2)=>输出2
        // 5.闭包(a:3)
    </script>

        // 面试题
        function fn(a, b) {
            debugger
            console.log('第二个参数的值是：', b);
            return {
                //对象中的函数形成一个闭包
                fn: function (c) {
                    debugger
                    return fn(c, a)
                }
            }
        }
        let obj = fn(1)
        // 一个新对象有一个闭包=>1个
        // 访问的都是同一个闭包
        obj.fn(2)
        obj.fn(3)
        obj.fn(4)

 <script>
        // 面试题
        function fn(a, b) {
            debugger
            console.log('第二个参数的值是：', b);
            return {
                //对象中的函数形成一个闭包
                fn: function (c) {
                    debugger
                    return fn(c, a)
                }
            }
        }
        // let obj = fn(1)
        // // 一个新对象有一个闭包=>1个
        // // 访问的都是同一个闭包
        // obj.fn(2)
        // obj.fn(3)
        // obj.fn(4)

        console.log('----------------');
        let a = fn(1).fn(2)
        a.fn(3).fn(4)
        a.fn(5).fn(6)

    </script>