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

本篇文章参考以下博文

• 关于 Object.defineProperty() 小结

  最近在监听界面样式变化是，用到了 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 的方法了。