Wie flexibel ist JavaScript?

JavaScript ist eine flexible Sprache und äußerst ausdrucksstark. Lassen Sie mich Ihnen ein Beispiel geben, das garantiert viele Menschen überraschen wird.

Dieser Artikel wurde von Kyle Simpsons Artikel „Iterating ES6 Numbers“ inspiriert.

Stellen Sie zunächst eine Add-Methode für das Number.prototype-Objekt bereit.

Number.prototype.add = function (x) {
  return this + x;
};

Der obige Code definiert eine Add-Methode für Number-Instanzen. (Wenn Sie mit dieser Schreibmethode nicht vertraut sind, wird empfohlen, zuerst meine „JavaScript-Objektorientierte Programmierung“ zu lesen.)

Da die Instanz von Number ein numerischer Wert ist, wird beim Aufruf einer Methode auf der numerischer Wert, der numerische Wert wird automatisch in ein Instanzobjekt konvertiert, sodass die folgenden Ergebnisse erzielt werden.

8['add'](2)
// 10

Im obigen Code wird die aufrufende Methode als 8['add'] statt als 8.add geschrieben, weil der Punkt nach dem Wert als Dezimalpunkt interpretiert wird ein Punktoperator.

Indem Sie den Wert in Klammern setzen, können Sie den Punktoperator verwenden, um die Methode aufzurufen.

(8).add(2)
// 10

Eigentlich gibt es eine andere Möglichkeit, es zu schreiben.

8..add(2)
// 10

Der erste Punkt im obigen Code wird als Dezimalpunkt und der zweite Punkt als Punktoperator interpretiert. Der semantischen Klarheit halber verwende ich im Folgenden Klammern.

Da die Add-Methode immer noch einen numerischen Wert zurückgibt, kann sie verkettet werden.

Number.prototype.subtract = function (x) {
  return this - x;
};
(8).add(2).subtract(4)
// 6

Der obige Code stellt die Subtract-Methode für die Instanz des Number-Objekts bereit, das in einer Kette mit der Add-Methode aufgerufen werden kann.

Wenn Sie zum Aufrufen von Attributen eckige Klammern verwenden, wird die Schreibweise seltsam.

8["add"](2)["subtract"](4)
// 6

Wir können auch komplexere Methoden einsetzen.

Number.prototype.iterate = function () {
  var result = [];
  for (var i = 0; i <= this; i++) {
    result.push(i);
  }
  return result;
};
(8).iterate()
// [0, 1, 2, 3, 4, 5, 6, 7, 8]

Der obige Code stellt die Iterate-Methode für den Prototyp des Number-Objekts bereit, mit der ein Wert automatisch in ein Array erweitert werden kann.

Kurz gesagt, wir können jetzt Methoden für Werte direkt aufrufen, aber das Klammerpaar hinten sieht etwas nervig aus. Ist es möglich, die Klammern zu entfernen? Mit anderen Worten: Kann der folgende Ausdruck

(8).double().square()

anders geschrieben werden?

(8).double.suqare

Es ist machbar.

ES5 legt fest, dass jedes Objektattribut über eine Wertmethode get verfügt, mit der der Lesevorgang des Attributs angepasst wird.

Number.prototype = Object.defineProperty(
  Number.prototype, "double", {
    get: function (){return (this + this)} 
  }
);
Number.prototype =  Object.defineProperty(
  Number.prototype, "square", {
    get: function (){return (this * this)} 
  }
);

Der obige Code definiert zwei Eigenschaften double und quadrat auf Number.prototype sowie deren Wertmethode get.

Daher kann das Lesen dieser beiden Attribute bei jedem Wert wie folgt geschrieben werden.

(8).double.square
// 256

Sie können stattdessen auch den eckigen Klammeroperator verwenden.

8["double"]["square"]
// 256