使用Object.definePropety报错 Maximum call stack size exceeded

本文探讨使用Object.defineProperty实现属性监听时出现的无限递归问题及其解决方案。通过创建额外变量存储值,避免getter方法中的无限循环,确保代码稳定运行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本篇文章参考以下博文

  最近在监听界面样式变化是,用到了 Object.definePropety 使用过程中,报错 Maximum call stack size exceeded 翻译为: 超出了最大调用堆栈大小

  使用方法如下:

let demo = document.getElementById('demo').style;
Object.defineProperty(demo, 'display', {
	get: function () {
	    return this.display;
    },
    set: function (value) {
    	this.display = value;
    }
});
console.log('display', demo.display);

  上面方法看似没什么问题,但是执行后会报,超出了最大调用堆栈大小错误,这是因为,当打印 demo.display 的时候,触发了 访问器属性 getter ,而 get 里面会返回 this.display ,程序遇到这个 this.display 后,要去获取这个变量里面的值,就又一次的触发了 访问器属性 getter ,如此递归下去,没有终止条件,最后超出堆栈限制报错。

  所以需要修改一下。具体修改方法是创建一个新的变量去存储。如下:

let demo = document.getElementById('demo').style;
Object.defineProperty(demo, 'display', {
	get: function () {
	    return this._display || 'none';
    },
    set: function (value) {
    	this._display = value;
    }
});
console.log('display', demo.display);

  上面方法中, display _display 进行了绑定,也就是 this.display === this._display ,这样在访问器属性中获取或修改 _display 的时候,就不会触发 display 的方法了。

  

  




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值