监听数组变化

最新推荐文章于 2022-11-21 09:19:33 发布

前端酱紫

最新推荐文章于 2022-11-21 09:19:33 发布

阅读量481

点赞数

分类专栏： Vue 文章标签： javascript vue

本文链接：https://blog.csdn.net/wuj1935/article/details/116207484

版权

Vue 专栏收录该内容

66 篇文章 2 订阅

订阅专栏

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>

前端酱紫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
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"> <
复制链接

扫一扫