Я задаюсь вопросом, когда я должен использовать
Object.defineProperty
создать новые свойства для объекта. Я знаю, что могу установить вещи как
enumerable: false
но когда Вам нужно это действительно? Если Вы просто устанавливаете свойство как
myObject.myprop = 5;
его дескрипторы все установлены на истинный, правильно? Мне на самом деле более любопытно, когда Вы парни используете тот довольно подробный вызов для .defineProperty () и для какой причины.
Например, это - то, что Vue.js отслеживает изменения в data
объект :
при передаче плоскости объект JavaScript экземпляру Vue как
data
опция Vue будет идти через все его свойства и преобразовывать их вgetter/setters
использованиеObject.defineProperty
. Это - ES5-единственная и un-shimmable функция, которая является, почему Vue doesn’t поддерживают IE8 и ниже.метод считывания/методы set невидим для пользователя, но под капотом они позволяют Vue выполнить отслеживание зависимости и уведомление изменения, когда к свойствам получают доступ или изменяют.
[...]
Имеют в виду, что даже супер тонкая и базовая версия Vue.js использовала бы что-то большее чем всего Object.defineProperty
, но основная функциональность прибывает из него:
Здесь Вы видите статью, где автор реализует минимальную версию версия PoC чего-то как Vue.js: https://medium.com/js-dojo/understand-vue-reactivity-implementation-step-by-step-599c3d51cd6c
И здесь разговор (на испанском языке), где динамик создает что-то подобное при объяснении реактивности в Vue.js: https://www.youtube.com/watch? v=axXwWU-L7RM
Очень полезный случай должен наблюдать изменения к чему-то и действию на них. Это легко, потому что у Вас может быть огонь функций обратного вызова каждый раз, когда значение установлено. Вот основной пример.
у Вас есть объект Player
, который может играть или не играть. Вы хотите, чтобы что-то произошло право, когда оно начинает играть, и право, когда оно прекращает играть.
function Player(){}
Object.defineProperty(Player.prototype, 'is_playing', {
get(){
return this.stored_is_playing; // note: this.is_playing would result in an endless loop
},
set(newVal){
this.stored_is_playing = newVal;
if (newVal === true) {
showPauseButton();
} else {
showPlayButton();
}
}
});
const cdplayer = new Player();
cdplayer.is_playing = true; // showPauseButton fires
Этот ответ связан с парой других ответов здесь, которые являются хорошими ступающими точками для получения дополнительной информации, но без потребности перейти по внешним ссылкам для чтения о библиотеках или парадигмах программирования.