Verwenden Sie das Javascript-Objekt.defineProperty, um Datenbindung zu erstellen

Question

Ich habe mit dem Javascript-Objekt .DefineProperty zum Erstellen von Datenbindung gespielt. Hier ist mein Beispiel.Ich verstehe nicht, warum die Eigenschaft der Daten: Name aktualisiert, wenn ich den Wert von input2 in der html.Thx sehr viel ändern.

<input type="text" id="text1" /> 
<input type="text" id="text2" /> 

var input1 = document.querySelector("#text1"); 
var input2 = document.querySelector("#text2"); 
var data = {}; 
Object.defineProperty(data, "name", { 
    configurable: true, 
    get: function(){ 
     console.log(1111); 
     return input1.value 
    }, 
    set: function(newValue){ 
     console.log(222); 
    input1.value = newValue; 
    input2.value = newValue; 
    } 
}) 
data.name = "sss"; 
input1.onchange = function(){ 
    console.log(33333) 
    data.name = data.name; 
} 
input2.onchange = function(){ 
    input1.value = this.value; 
    console.log(data); 
} 

Answer 1

1. Wenn der Benutzer ändert input2 wird input2.onchange() genannt.
2. input2.onchange() setzt input1.value.
3. Da die get()-Methode input1.value zurückgibt, gibt die Referenz data.name die neue input1.value zurück.