本篇文章参考以下博文
最近在监听界面样式变化是,用到了 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 的方法了。