Object.defineProperty()中set频繁触发导致报错: Uncaught RangeError: Maximum call stack size exceeded

最近在练习使用Object.defineProperty()对于对象的赋值与读取操作进行拦截时，发现踩了个坑，先来看看报错信息:

 我们来看一下导致报错的代码:

let obj = {};
Object.defineProperty(obj, 'name', {
    set(newVal) {
        obj['name'] = newVal;
    }
});
obj.name = 'hzj';

其实原因很简单，因为set()这个函数本来就是对于obj这个对象的赋值操作进行拦截的，你在set()里写个赋值操作，就会再次触发set()函数，然后set()函数里有个赋值操作，赋值操作又触发了set()函数，如此往复形成了一个死循环

 

所以我们想要实现真正的拦截要这么写才行:

let obj = {};
let name = '';//使用一个全局变量进行类似代理的操作
Object.defineProperty(obj, 'name', {
    set(newVal) {
        console.log(`有人试图修改name属性为: ${newVal}`);
        name = newVal;//其实修改的是name变量
    },
    get(){
        console.log(`有人试图读取name属性`);
        return name;//返回name变量的值出去
    }
});
obj.name = 'hzj';
console.log(obj);

我们在此基础上可以封装一个函数 ，让这个拦截操作更加的方便使用:

//函数接收两个参数，一个是要被处理的对象，一个是要被拦截赋值和操作的属性名
function fun(obj, key) {
    let value = null; //先初始化一个value用于代理未来obj[key]对应的值
    Object.defineProperty(obj, key, {
        set(newVal) {
            console.log(`有人试图修改${key}属性为: ${newVal}`);
            value = newVal;
        },
        get(){
            console.log(`有人试图读取${key}属性`);
            return value;
        }
    })
};

let obj = {
    name:'mikaisa'
};
fun(obj,'name');
obj.name = 'mikaisa22';
console.log(obj.name);

 来看下效果:

 好了，觉得有帮助的朋友别忘了点赞收藏加关注哦。我是普通但是有着大厂前端梦的小韩.

个人其它平台账号

知乎: Mikaisa,Mikaisa - 知乎

gitee码云: @mikaisazzz,MikaisaZzz (mikaisazzz) - Gitee.com

优快云: Mikaisa, Mikaisa的博客_优快云博客-软件使用技巧,前端刷题-js篇,前端小案例领域博主