Ist der Modifikator eine Funktion von es6 oder es7?

Modifikatoren sind eine es7-Funktion. Modifikator ist eine von ES7 eingeführte klassenbezogene Syntax, die zum Kommentieren oder Ändern von Klassen und Klassenmethoden verwendet wird. Sie basiert auf der Methode „Object.defineProperty“ von ES5 und kann in sie eingefügt werden Klassen, Methoden und Attributparameter werden verwendet, um die Funktionen von Klassen, Attributen, Methoden und Parametern zu erweitern.

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

Was ist ein Decorator?

Decorator ist eine Syntax von ES7. Es handelt sich um eine klassenbezogene Syntax, die zum Kommentieren oder Ändern von Klassen und Klassenmethoden verwendet wird.

Sein Aussehen kann zwei Probleme lösen:

• Methoden zwischen verschiedenen Klassen teilen

• Ändern des Verhaltens von Klassen und Methoden während der Kompilierung

Modifikator Eine Wrapper-Funktion wird als @函数名 geschrieben. Es kann vor der Definition von Klassen und Klassenmethoden platziert werden und zur Bereitstellung zusätzlicher Funktionalität für Klassen, Eigenschaften oder Funktionen verwendet werden.

@frozen class Foo {
  @configurable(false)
  @enumerable(true)
  method() {}
 
  @throttle(500)
  expensiveMethod() {}
}

Oben werden insgesamt vier Dekoratoren verwendet, einer wird in der Klasse selbst verwendet und die anderen drei werden in den Klassenmethoden verwendet.

Decorator ist kein neues Konzept, wie Java und Python. Der Decorator in ES7 leiht sich Schreibmethoden aus anderen Sprachen, verlässt sich jedoch auf die Object.defineProperty-Methode.

Klassenänderung

@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true;
}

MyTestableClass.isTestable // true

@testable ist ein Dekorator, der das Verhalten der MyTestableClass-Klasse ändert und ihr das statische Attribut isTestable hinzufügt. Das Parameterziel der testbaren Funktion ist die MyTestableClass-Klasse selbst.

@decorator
class A {}

// 等同于

class A {}
A = decorator(A) || A;

Mit anderen Worten, ein Dekorator ist eine Funktion, die eine Klasse verarbeitet. Der erste Parameter der Dekoratorfunktion ist die zu dekorierende Zielklasse.

Wenn Sie mehrere Parameter hinzufügen möchten, können Sie eine Funktionsebene außerhalb des Dekorators kapseln.

function testable(name) {
    return function(target) {
      target.name = name;
    }
  }

@testable('MyTestableClass')
class MyTestableClass {}
MyTestableClass.name // MyTestableClass

@testable('MyClass')
class MyClass {}
MyClass.isTestable // MyClassf

Das obige Beispiel besteht darin, der Klasse ein statisches Attribut hinzuzufügen.
Wenn Sie Instanzattribute hinzufügen möchten, können Sie über das Prototype-Objekt der Zielklasse arbeiten.

export function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list)
  }
}

// main.js
import { mixins } from './mixins'

const Foo = {
  foo() { console.log('foo') }
};

@mixins(Foo)
class MyClass {}

let obj = new MyClass();
obj.foo() // 'foo'

Wenn React in der tatsächlichen Entwicklung in Kombination mit der Redux-Bibliothek verwendet wird, ist es häufig erforderlich, es wie folgt zu schreiben.

class MyreactComponent extends React.Component {};

export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

Mit Dekoratoren können Sie den obigen Code neu schreiben.

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {};

Beachten Sie, dass der Dekorateur das Verhalten der Klasse ändert. Dies geschieht, wenn der Code kompiliert wird, nicht zur Laufzeit. Dies bedeutet, dass der Dekorateur den Code während der Kompilierungsphase ausführen kann. Mit anderen Worten: Der Dekorator ist im Wesentlichen eine Funktion, die zur Kompilierungszeit ausgeführt wird.

Modifikation der Methode

class Person {
  // 用来装饰”类“的 name 方法
  @readonly
  name() { return `${this.first} ${this.last}` }
}

Die Decorator-Funktion readonly kann insgesamt drei Parameter akzeptieren.

function readonly(target, name, descriptor){
  // descriptor对象原来的值如下
  // {
  //   value: specifiedFunction,
  //   enumerable: false,
  //   configurable: true,
  //   writable: true
  // };
  descriptor.writable = false;
  return descriptor;
}

readonly(Person.prototype, 'name', descriptor);
// 类似于
Object.defineProperty(Person.prototype, 'name', descriptor);

• Der erste Parameter des Dekorators ist das Prototypobjekt der Klasse. Das obige Beispiel ist Person.prototype. Die ursprüngliche Absicht des Dekorators besteht darin, die Instanz der Klasse zu „dekorieren“. Zu diesem Zeitpunkt kann nur der Prototyp dekoriert werden. (Dies unterscheidet sich von der Klassendekoration. In diesem Fall bezieht sich der Zielparameter auf die Klasse selbst.)
• Der zweite Parameter ist der Name des zu dekorierenden Attributs.
• Der dritte Parameter ist das Beschreibungsobjekt des Attributs

Der Dekorator hat auch die Funktion einer Annotation. Beispielsweise können wir auf einen Blick erkennen, dass die obige Namensmethode schreibgeschützt ist.

Zusätzlich zu Annotationen können Dekorateure auch zur Typprüfung eingesetzt werden. Für Klassen ist diese Funktion also sehr nützlich. Langfristig wird es ein wichtiges Werkzeug zur statischen Analyse von JavaScript-Code sein. Es wird als experimentelle Funktion in TypeScript unterstützt.

Warum Dekoratoren nicht für Funktionen verwendet werden können

Dekoratoren können aufgrund des Funktionshebens nur für Klassen und Methoden von Klassen verwendet werden, nicht für Funktionen.

var counter = 0;

var add = function () {
  counter++;
};

@add
function foo() {}

Der obige Code beabsichtigt, dass der Zähler nach der Ausführung gleich 1 ist, aber das tatsächliche Ergebnis ist, dass der Zähler gleich 0 ist. Aufgrund der Funktionsförderung lautet der tatsächlich ausgeführte Code wie folgt.

@add
function foo() {
}

var counter;
var add;

counter = 0;

add = function () {
  counter++;
};

Kurz gesagt, aufgrund der Existenz von Funktionsaufzügen können Dekorateure nicht für Funktionen eingesetzt werden. Klassen werden nicht befördert, daher gibt es diesbezüglich kein Problem.

core-decorators.js

[core-decorators.js]() ist ein Drittanbietermodul, das mehrere gängige Dekoratoren bereitstellt.

• @autobind: Bindet dieses Objekt in der Methode an das ursprüngliche Objekt.
• @readonly: Macht die Eigenschaft oder Methode nicht beschreibbar.
• @override: Überprüfen Sie, ob die Methode der Unterklasse die gleichnamige Methode der übergeordneten Klasse korrekt überschreibt. Wenn sie falsch ist, wird ein Fehler gemeldet.
• @deprecate (alias @deprecated): Zeigt in der Konsole eine Warnung an, die darauf hinweist, dass die Methode veraltet ist.

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

Das obige ist der detaillierte Inhalt vonIst der Modifikator eine Funktion von es6 oder es7?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!