Heim > Artikel > Web-Frontend > Wofür werden es6-Modifikatoren verwendet?
In ES6 werden Dekoratoren verwendet, um Klassen und Klassenmethoden zu kommentieren oder zu ändern. Dabei wird auf die Methode „Object.defineProperty“ von ES5 zurückgegriffen, die als „@Funktionsname“ geschrieben wird. Der Dekorator ist eigentlich eine Funktion, die normalerweise in Klassen und Klassen an der Vorderseite platziert wird der Methode. Modifikatoren können in Klassen, Methoden und Attributparameter eingefügt werden, um die Funktionen von Klassen, Attributen, Methoden und Parametern zu erweitern.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.
Decorator Pattern ermöglicht das Hinzufügen neuer Funktionen zu einem vorhandenen Objekt, ohne seine Struktur zu ändern. Bei dieser Art von Entwurfsmuster handelt es sich um ein Strukturmuster, das als Hülle um eine vorhandene Klasse fungiert.
Dieses Muster erstellt eine Dekorationsklasse, um die ursprüngliche Klasse zu umschließen und zusätzliche Funktionalität bereitzustellen, während gleichzeitig die Integrität der Klassenmethodensignatur gewahrt bleibt.
In ES6 ist Decorator (Decorator) eine klassenbezogene Syntax, die zum Kommentieren oder Ändern von Klassen und Klassenmethoden verwendet wird.
Ein Dekorator ist eigentlich eine Funktion, die normalerweise vor Klassen und Klassenmethoden platziert wird.
@decorateClass class Example { @decorateMethods method(){} }
Im obigen Code werden zwei Dekoratoren verwendet. Der Dekorator @decorateClass() wird für die Klasse selbst verwendet, um die Funktionalität der Klasse hinzuzufügen oder zu ändern Klasse. Methode, die zum Kommentieren oder Ändern von Klassenmethoden verwendet wird.
Dekoratoren können aufgrund der Funktionsförderung nur für Klassen und Klassenmethoden verwendet werden, nicht für Funktionen.
Dekoratoren können nur für Klassen und Klassenmethoden verwendet werden. Schauen wir uns die Verwendung von zwei Arten von Dekoratoren an. Klassendekoratoren werden zum Dekorieren der gesamten Klasse verwendet. Klassendekoratoren Der Parameter
@decorateClass class Example { //... } function decorateClass(target) { target.isTestClass = true }
@decorateClass(true) class Example { //... } function decorateClass(isTestClass) { return function(target) { target.isTestClass = isTestClass } }
class MyReactComponent extends React.Component {} export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);
@connect(mapStateToProps, mapDispatchToProps) export default class MyReactComponent extends React.Component {}
Klassenmethodendekorator
// descriptor对象原来的值如下 { value: specifiedFunction, enumerable: false, configurable: true, writable: true };
Wenn ein Dekorator gleichzeitig zum Dekorieren einer Klasse und einer Klassenmethode in einer Klasse verwendet wird, lautet die Ausführungsreihenfolge der Dekoratoren: Führen Sie die Klassenmethode aus Zuerst den Dekorator und dann den Klassendekorator ausführen.
class Example { @log instanceMethod() { } @log static staticMethod() { } } function log(target, methodName, descriptor) { const oldValue = descriptor.value; descriptor.value = function() { console.log(`Calling ${name} with`, arguments); return oldValue.apply(this, arguments); }; return descriptor; }
如上面代码中,会先执行类方法的装饰器 @decoratorMethods(1) 和 @decoratorMethods(2),执行完后再执行类装饰器 @decoratorClass(1) 和 @decoratorClass(2)
上面代码中的类方法装饰器中,外层装饰器 @decoratorMethods(1) 先进入,但是内层装饰器 @decoratorMethods(2) 先执行。类装饰器同理。
function log(target, name, descriptor) { var oldValue = descriptor.value; descriptor.value = function () { console.log(`Calling "${name}" with`, arguments); return oldValue.apply(null, arguments); } return descriptor; } // 日志应用 class Maths { @log add(a, b) { return a + b; } } const math = new Maths(); // passed parameters should get logged now math.add(2, 4);
【相关推荐:javascript视频教程、web前端】
Das obige ist der detaillierte Inhalt vonWofür werden es6-Modifikatoren verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!