监听数组变化

蔚落 2023-01-17 07:45 131阅读 0赞

## 03-监听数组变化 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
    
        <script>
    
            let arr = [1, 2, 3]
            // Array.prototype.newPush = function (val) { this.push(val) }
            // arr.newPush(4)
            // console.log(arr);
            // 实现数组方法的拦截器
            const arrayProto = Array.prototype;// 保存原先的原型对象
            const arrayMethods = Object.create(arrayProto);
            // 将改变数组自身内容的7个方法 放置到数组
            const methodsToPatch = [
                'push',
                "pop",
                'shift',
                'unshift',
                'splice',
                'sort',
                'reverse'
            ];
            methodsToPatch.forEach(function (method) { 
                const original = arrayProto[method];
                Object.defineProperty(arrayMethods, method, { 
                    enumerable: false,
                    configureable: true, // 是否可配置
                    writable: true,
                    value: function (...args) { 
                        // 侦听设置数组的操作
                        console.log(`通过${ method}方法修改数组`);
                        const result = original.apply(this, args);
                        return result;   // 调用原先数组的方法，并且返回结果
                    }
                })
            });
    
            arr.__proto__ = arrayMethods;
            arr.push(1);
            console.log(arr);
            arr.pop()
            console.log(arr);
    
    
        </script>
    </body>
    
    </html>