Как "отразить" свойство в JavaScript?

Question

Я, вероятно, не использую правильный термин. Чего я хочу добиться, так это "отразить" или "синхронизировать" переменную в javascript. У меня есть следующий код:

class myClass {
    constructor(elem) {
        this.text = elem.innerText;
    }
}

Это не меняет innerText собственностью elem, Как бы я сконфигурировал переменную [s], чтобы они отражали друг друга?

PS Мне было трудно гуглить вокруг этого, потому что я не знаю термин для того, чего я пытаюсь достичь.

Answer 1

var myElem = Sizzle("#myElem");
var obj = {
    set myVar(text) {
        myElem.innerText = text;
    },
    get myVar() {
        return myElem.innerText;
    }
};
obj.myVar = "foo";

Вы можете использовать сеттеры и геттеры, но вам нужно, чтобы ваша связанная переменная находилась внутри объекта.

РЕДАКТИРОВАТЬ:

Технически говоря, даже глобальные переменные принадлежат window объект, так что это должно работать:

var myElem = Sizzle("#myElem");
Object.defineProperty(window, 'myVar', {
    set: function(text) {
        myElem.innerText = text;
    },
    get: function() {
        return myElem.innerText;
    }
});
myVar = "foo";  // works assuming that we are using global scope
                // i.e. myVar isn't overridden in local scope
window.myVar = "foo"; // will work regardless

ОБНОВИТЬ:

Вопрос был изменен, поэтому вот обновленный ответ:

class myClass {
    constructor(elem) {
        Object.defineProperty(this, 'text', {
            set: function(text) {
                elem.innerText = text;
            },
            get: function() {
                return elem.innerText;
            }
        });
    }
}

Answer 2

То, что вы хотите, называется привязкой данных. Переменные в Javascript по своей сути не работают так. Вы должны обернуть их методами получения / установки.

Так что это будет выглядеть примерно так:

var myElem = Sizzle("#myElem");

mirror('myVar', function(myVar){
    myElem.innerText = myVar;
});

mirror('myVar', 'foo');

И импликация для зеркала будет выглядеть так:

var __data__ = {};
var __bindings__ = {};
function mirror(name, value){
    // if no value is passed in
    // get the existing value
    if(!value){
        return __data__[name];
    }

    // if the "value" is a function
    // register it to the list of
    // functions that get called when
    // the value changes. Also known
    // as a listener.
    if(typeof value == 'function'){
        var func = value;

        // if there's no existing list
        // for this value, create one
        if(!__bindings__[name]){
            __bindings__ = [];
        }

        // if the data already exists
        // go ahead and fire this function
        // immediately
        if(__data__.hasOwnProperty(name)){
            func(__data__[name]);
        }

        __bindings__[name].push(func);
        return;
    }

    // if we've made it this far, we're setting
    // the value of our variable
    __data__[name] = value;

    // if there's a list of functions (listeners)
    // call each of them passing in the value that
    // we just set
    if(__bindings__.hasOwnProperty(name)){
        __bindings__[name].forEach(function(func){
            func(__data__[name]);
        });
    }
}

Answer 3

В js, как и в других языках программ, присваивая переменную примитивного типа, не создавайте ссылку на нее. так что вы, вероятно, напишите это, чтобы установить innerHTML:

var myElem = Sizzle("#myElem");
myElem.innerText = "foo";