Не могу получить сеттеры/геттеры для работы

Question

Я хочу конвертировать Mike Herchel's Importing CSS Breakpoints в класс ES6. Для этого я решил использовать get и set, чтобы наконец узнать, как это сделать.

Мой код до сих пор:

export default class Breakpoints { 
    constructor() { 
    this.value = null; 

    this.refreshValue(); 

    window.addEventListener('resize',() => { 
     this.refreshValue(); 
    }); 
    } 

    refreshValue() { 
    let val = window.getComputedStyle(document.querySelector('body'), ':before').getPropertyValue('content').replace(/\"/g, ''); 

    this.value = val; 
    } 

    set value(val) { 
    this.value = val; 
    } 

    get value() { 
    return this.value; 
    } 
} 

Проблема заключается в том, когда я запускаю его, я получаю Maximum call stack size exceeded. Где я ошибся?

Answer 1

Здесь абсолютно нет причин использовать геттеры/сеттеры здесь, они не делают ничего, кроме обычного объекта.

Когда я запускаю его, я получаю Maximum call stack size exceeded. Где я ошибся?

Ваш геттер снова возвращает значение свойства, тем самым ссылаясь на себя. Ваш сеттер снова устанавливает значение свойства, тем самым ссылаясь на себя. Не делай этого.

Если вы действительно хотите использовать добытчик по какой-то причине, пойти на

export default class Breakpoints { 
    constructor() { 
    this._val = null; 

    this.refreshValue(); 
    window.addEventListener('resize',() => { 
     this.refreshValue(); 
    }); 
    } 

    refreshValue() { 
    this._val = window.getComputedStyle(document.querySelector('body'), ':before').getPropertyValue('content').replace(/\"/g, ''); 
    } 

    get value() { 
    return this._val; 
    } 
    // no `value` setter, because it can't be changed from outside 
}