Was ist die Verwendung von Proxy in es6?

In es6 wird der Proxy zum Abfangen bestimmter Vorgänge an einem Objekt verwendet und kann den externen Zugriff filtern und neu schreiben. Der Proxy richtet eine „Abfangschicht“ vor dem Zielobjekt ein, über die der externe Zugriff auf das Objekt erfolgen muss Beim Abfangen der Ebene lautet die Syntax „neuer Proxy (Ziel, Handler);“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, ECMAScript Version 6.0, Dell G3-Computer.

Was ist die Verwendung von Proxy in es6?

Proxy kann als Einrichtung einer „Abfangschicht“ verstanden werden, bevor der externe Zugriff auf das Objekt diese Abfangschicht durchlaufen muss, sodass ein Mechanismus bereitgestellt wird das den externen Zugriff filtern und umschreiben kann. Die ursprüngliche Bedeutung des Wortes „Proxy“ bedeutet hier, dass es „im Namen bestimmter Vorgänge“ handelt. Es kann als „Agent“ übersetzt werden. Das Folgende ist eine Definition von Proxy aus der offiziellen Dokumentation.

let p = new Proxy(target, handler);

Ziel: Das Zielobjekt, das mithilfe eines Proxys umschlossen werden muss (kann jeder Objekttyp sein, einschließlich nativer Arrays, Funktionen oder sogar eines anderen Proxys).

Handler: Ein Objekt, dessen Eigenschaften Funktionen sind, die das Verhalten des Agenten definieren, wenn eine Operation ausgeführt wird (kann als eine Art Auslöser verstanden werden).

ES6 schlägt eine neue Funktion vor, Proxy, die zum Abfangen bestimmter Vorgänge an einem Objekt verwendet wird. Diese Funktion ist sehr nützlich. Um ein Beispiel zu nennen: Das

var engineer = { name: 'Joe Sixpack', salary: 50 };
var interceptor = {
 set: function (receiver, property, value) {
  console.log(property, 'is changed to', value);
  receiver[property] = value;
 }
};
engineer = Proxy(engineer, interceptor);

engineer-Objekt wird durch das von Proxy erstellte Proxy-Objekt ersetzt. Der zweite an Proxy übergebene Parameter ist eine Prozessorfunktion, die über mehrere Methoden verfügt, z. B. get, set und andere. Die Set-Methode hier kann alle am Proxy-Objekt ausgeführten Eigenschaftszuweisungsvorgänge abfangen.

Wenn wir die folgende Zuweisung ausführen:

engineer.salary = 60;

löst den Prozessor aus und gibt Informationen aus:

salary is changed to 60

Bei jeder Zuweisung des Proxy-Objekts wird die Prozessorfunktion aufgerufen, die zum Debuggen bestimmter Probleme verwendet werden kann.

Proxy wurde natürlich nicht nur zum Debuggen entwickelt. Wenn Sie Sencha Touch oder AngularJS verwendet haben, werden Sie feststellen, dass diese Frameworks ähnliche Funktionen wie die Datenmodellbindung haben.

Der Autor hat in Sencha Touch einen Proxy verwendet. Der Code lautet wie folgt:

proxy:{//数据代理
//       type:'localstorage',
//       id:'bills',
    // limitParam:'limit',
    // pageParam:'page',
    //将用户代理改为sql，通过websql来解决localstorage的5MB存储上限的问题
    type:'sql',
    database:'myDB',
    table:'bill',
},
//filters:[{property:"kind",value:"无"}],//过滤属性
listeners:{
    removerecords:function(){
      console.log("数据被删除");
    },
    addrecords:function(){
      console.log("数据被追加");
    },
    updaterecord:function(){
      console.log("数据被修改");
    },
}

Wie Sie sehen können, verwendet er eine Methode zur Überwachung von Settern und Gettern, während Angular die Dirty-Erkennung verwendet. . Wenn wir Proxy haben, können diese spezifischen Erkennungsmethoden für eine einfache Datenmodellbindung vereinfacht werden.

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】

Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von Proxy in es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!