【学习笔记71】数据代理、回调函数和回调地域

一、数据代理

•  new Proxy(参数一: 代理那个对象)

        const obj = {
            name: 'QF001',
            age: 18
        }
 
        const res = new Proxy(obj, {
            get (target, p) {
                /**
                 *  target 当前代理的那个对象, 在当前案例中就是obj
                 *  p      proxy会自动遍历对象, 拿到对象每一个key
                */
               return target[p];
            },
            set (target, p, val) {
                target[p] = val;
 
                console.log('你想要修改某一个属性')
                // 代表修改成功
                return true; 
            }
        })
 
        res.age = 99;
        obj.abc = 999;
        console.log(res);

 二、回调函数

• 把函数A 通参数的形式传递给函数B, 在函数B内部以形参方式调用函数A就叫函数B的回调函数
• 通常用到回调函数的场景都是在异步代码封装

1、回调函数

        function A () {
            console.log('函数A执行')
        }
        function B(cb) {
            console.log('函数B执行')
            cb()
        }
        B(A)

 2. 封装一个异步函数，一般都是网络请求

        function fn (arg) {
            const timer = Math.ceil(Math.random() * 3000)
            setTimeout(() => {
                console.log('异步代码开始执行, 耗时:', timer)
                arg()
            }, timer)
        }
 
        fn(
            () => {
                console.log('异步代码执行完成我再执行')
            }
        )

3. 因为网络请求, 可能会成功, 也有可能失败

• 约定: 时间超过3500算作失败, 否则算成功

        function fn (chenggong, shibai) {
            console.log('班长帮我去买一瓶水')
            const timer = Math.ceil(Math.random() * 3000) + 2000
            setTimeout(() => {
                if (timer > 3500) {
                    console.log('班长买水失败', timer)
 
                    shibai()
                } else {
                    console.log('班长买水成功', timer)
 
                    chenggong()
                }
            }, timer)
        }
 
        fn(
            () => {
                console.log('谢谢班长辛苦了, 帮我退掉吧')
            },
            () => {
                console.log('辛苦班长了, 买不到别回来了')
            }
        )

三、回调地狱

• 并不是一个bug, 而是一种代码格式, 这种代码格式非常不利于我们阅读
• 解决：Promise(期约) ，解决回调地狱代码的

1、案例需求:

• 第一次买水成功以后, 再次执行一边, 但, 必须是第一次买水成功以后才能再去买一瓶
• 在第二次买水成功以后, 再次执行一边, 但, 必须是第二次买水成功以后才能再去买一瓶

        function fn(chenggong, shibai) {
            console.log('班长帮我去买一瓶水')
            const timer = Math.ceil(Math.random() * 3000)
            setTimeout(() => {
                if (timer > 3500) {
                    console.log('班长买水失败', timer)
 
                    shibai()
                } else {
                    console.log('班长买水成功', timer)
 
                    chenggong()
                }
            }, timer)
        }
 
        fn(
            () => {
                console.log('谢谢班长辛苦了, 帮我退掉吧')
                fn(
                    () => {
                        console.log('第二次买水成功')
                        fn(
                            () => {
                                console.log('第三次买水成功')
                            },
                            () => {
                                console.log('第三次买水失败')
                            }
                        )
                    },
                    () => {
                        console.log('第二次买水失败')
                    }
                )
            },
            () => {
                console.log('辛苦班长了, 买不到别回来了')
            }
        )