Heim > Artikel > Web-Frontend > Grundlegende Einführung in Getter und Setter in Javascript
Grundlegende Einführung in Getter und Setter in Javascript
- 巴扎黑Original
- 2017-08-18 10:52:561493Durchsuche
Ich bin kürzlich bei der Arbeit auf Getter und Setter gestoßen. Getter sind eine Methode zum Abrufen von Attributwerten, und Setter sind eine Methode zum Festlegen von Attributwerten. Der folgende Artikel führt Sie hauptsächlich in die relevanten Informationen zu Gettern und Settern in Javascript ein. Freunde, die sie benötigen, können einen Blick darauf werfen.
Vorwort
Dieser Artikel führt Sie hauptsächlich in den zugehörigen Inhalt von Gettern und Settern in Javascript ein, als ich zum ersten Mal von dieser Sache hörte Datenbindung in vue.js. Solange die Daten gebunden sind, können geänderte Objekteigenschaften automatisch an das DOM zurückgegeben werden. Später habe ich auch gesehen, dass die Implementierung im Dokument Getter und Setter für das Objekt definiert überschreibt einfach die Verwendung dieser beiden. Ich werde im Folgenden nicht viel sagen, werfen wir einen Blick auf die detaillierte Einführung.
Prinzip
Verwenden Sie Object.defineProperty, um Objekteigenschaften als Getter und Setter umzuschreiben und die Bindung von DOM-Knoten durch Getter und Setter zu ändern. Werte
Beispiel
Aus MDN entnommen
function Archiver() {
var temperature = null;
var archive = [];
Object.defineProperty(this, 'temperature', {
get: function() {
console.log('get!');
return temperature;
},
set: function(value) {
temperature = value;
archive.push({ val: temperature });
}
});
this.getArchive = function() { return archive; };
}
var arc = new Archiver();
arc.temperature; // 'get!'
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]Verwenden Sie dieses MDN Beispiel: Ich habe eine kleine Methode und eine Timer-DEMO geschrieben
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 id="testTime" z:bind="time">0s</h1>
<script>
// 双向绑定
function bind_data(ele, arg){
var bindAttributeName = 'z:bind';
var data = JSON.parse(JSON.stringify(arg)) || {};
Object.keys(arg).forEach(function(argKey, index, array){
Object.defineProperty(arg, argKey, {
get: function(){
return data[argKey];
},
set: function(value){
if(ele.getAttribute(bindAttributeName) !== argKey) {
return;
}
if(ele.tagName === 'INPUT'){
ele.value = value;
}else{
ele.innerHTML = value;
}
data[argKey] = value;
}
});
arg[argKey] = arg[argKey];
});
var key = ele.getAttribute(bindAttributeName);
if((ele.tagName === 'INPUT' || ele.tagName === 'TEXTAREA') && arg[key]){
ele.addEventListener('input', function(e){
data[key] = ele.value;
});
}
}
/*
例子很简单，直接改变对象属性，就直接
反馈到了DOM上，就好像是一个钩子，改变
这个对象的属性，这个属性的钩子把它绑
定的DOM的数据进行修改
*/
var start = (new Date()).getTime();
var now;
var b = {time: '0s'};
bind_data(document.getElementById('testTime'), b);
setInterval(function(){
var now = (new Date()).getTime();
b.time = ((now - start)/1000) + 's'
}, 1);
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonGrundlegende Einführung in Getter und Setter in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!