Aufrufen einer Funktion ohne Klammern

Mir wurde heute gesagt, dass es möglich ist, eine Funktion ohne Klammern aufzurufen. Ich konnte mir nur vorstellen, Funktionen wie applyoder zu verwenden call.

f.apply(this);
f.call(this);

Aber diese erfordern Klammern applyund calllassen uns auf dem ersten Platz. Ich dachte auch über die Idee nach, die Funktion an eine Art Ereignishandler zu übergeben, wie zum Beispiel setTimeout:

setTimeout(f, 500);

Aber dann lautet die Frage: "Wie rufst du setTimeoutohne Klammern auf?"

Was ist die Lösung für dieses Rätsel? Wie können Sie eine Funktion in Javascript aufrufen, ohne Klammern zu verwenden?

Es gibt verschiedene Möglichkeiten, eine Funktion ohne Klammern aufzurufen.

Nehmen wir an, Sie haben diese Funktion definiert:

function greet() {
    console.log('hello');
}

Dann folgen hier einige Möglichkeiten, um greetohne Klammern aufzurufen :

1. Als Konstruktor

Mit können newSie eine Funktion ohne Klammern aufrufen:

new greet; // parentheses are optional in this construct.

Von MDN auf dem newOprator :

Syntax

new constructor[([arguments])]

2. As toStringoder valueOfImplementierung

toStringund valueOfsind spezielle Methoden: Sie werden implizit aufgerufen, wenn eine Konvertierung erforderlich ist:

var obj = {
    toString: function() {
         return 'hello';
    }
}

'' + obj; // concatenation forces cast to string and call to toString.

Sie können dieses Muster (ab) verwenden, um greetohne Klammern aufzurufen :

'' + { toString: greet };

Oder mit valueOf:

+{ valueOf: greet };

valueOfund toStringwerden tatsächlich von der @@ toPrimitive- Methode (seit ES6) aufgerufen , sodass Sie diese Methode auch implementieren können :

+{ [Symbol.toPrimitive]: greet }
"" + { [Symbol.toPrimitive]: greet }

2.b Überschreiben valueOfdes Funktionsprototyps

Sie können die vorherige Idee verwenden, um die valueOfMethode für den FunctionPrototyp zu überschreiben :

Function.prototype.valueOf = function() {
    this.call(this);
    // Optional improvement: avoid `NaN` issues when used in expressions.
    return 0; 
};

Sobald Sie das getan haben, können Sie schreiben:

+greet;

Und obwohl es in der Folge Klammern gibt, enthält der eigentliche auslösende Aufruf keine Klammern. Weitere Informationen hierzu finden Sie im Blog "Aufrufen von Methoden in JavaScript, ohne sie wirklich aufzurufen".

3. Als Generator

Sie können eine Generatorfunktion (mit *) definieren, die einen Iterator zurückgibt . Sie können es mit der Spread-Syntax oder mit der for...ofSyntax aufrufen .

Zuerst brauchen wir eine Generatorvariante der ursprünglichen greetFunktion:

function* greet_gen() {
    console.log('hello');
}

Und dann rufen wir es ohne Klammern auf, indem wir die Iterator- Methode @@ definieren :

[...{ [Symbol.iterator]: greet_gen }];

Normalerweise haben Generatoren yieldirgendwo ein Schlüsselwort, aber es wird nicht benötigt, damit die Funktion aufgerufen wird.

Die letzte Anweisung ruft die Funktion auf, aber das könnte auch mit Destrukturierung geschehen :

[,] = { [Symbol.iterator]: greet_gen };

oder ein for ... ofKonstrukt, aber es hat eigene Klammern:

for ({} of { [Symbol.iterator]: greet_gen });

Beachten Sie, dass Sie können die oben mit dem Original zu tun greetund Funktion, aber es wird eine Ausnahme in den Prozess auslösen, nachdem greet ausgeführt wurde (getestet auf FF und Chrome). Sie können die Ausnahme mit einem try...catchBlock verwalten.

4. Als Getter

@ jehna1 hat eine vollständige Antwort darauf, also gib ihm Anerkennung. Hier ist eine Möglichkeit, eine Funktion ohne Klammern für den globalen Bereich aufzurufen , wobei die veraltete__defineGetter__ Methode vermieden wird. Es wird Object.definePropertystattdessen verwendet.

greetDazu müssen wir eine Variante der ursprünglichen Funktion erstellen :

Object.defineProperty(window, 'greet_get', { get: greet });

Und dann:

greet_get;

Ersetzen Sie windowdurch was auch immer Ihr globales Objekt ist.

Sie können die ursprüngliche greetFunktion aufrufen, ohne eine Spur für das globale Objekt zu hinterlassen:

Object.defineProperty({}, 'greet', { get: greet }).greet;

Man könnte jedoch argumentieren, dass wir hier Klammern haben (obwohl sie nicht am eigentlichen Aufruf beteiligt sind).

5. Als Tag-Funktion

Seit ES6 können Sie eine Funktion aufrufen, die ihr ein Vorlagenliteral mit folgender Syntax übergibt :

greet``;

Siehe "Tagged Template Literals" .

6. Als Proxy-Handler

Seit ES6 können Sie einen Proxy definieren :

var proxy = new Proxy({}, { get: greet } );

Wenn Sie dann einen beliebigen Eigenschaftswert lesen, wird Folgendes aufgerufen greet:

proxy._; // even if property not defined, it still triggers greet

Es gibt viele Variationen davon. Noch ein Beispiel:

var proxy = new Proxy({}, { has: greet } );

1 in proxy; // triggers greet

7. Als Instanzprüfer

Der instanceofOperator führt die @@hasInstanceMethode für den zweiten Operanden aus, wenn er definiert ist:

1 instanceof { [Symbol.hasInstance]: greet } // triggers greet

Der einfachste Weg, dies zu tun, ist mit dem newBediener:

function f() {
  alert('hello');
}

new f;

Das ist zwar unorthodox und unnatürlich, funktioniert aber und ist vollkommen legal.

Der newOperator benötigt keine Klammern, wenn keine Parameter verwendet werden.

Sie können Getter und Setter verwenden.

var h = {
  get ello () {
    alert("World");
  }
}

Führen Sie dieses Skript nur mit:

h.ello  // Fires up alert "world"

Bearbeiten:

Wir können sogar argumentieren!

var h = {
  set ello (what) {
    alert("Hello " + what);
  }
}

h.ello = "world" // Fires up alert "Hello world"

Bearbeiten 2:

Sie können auch globale Funktionen definieren, die ohne Klammern ausgeführt werden können:

window.__defineGetter__("hello", function() { alert("world"); });
hello;  // Fires up alert "world"

Und mit Argumenten:

window.__defineSetter__("hello", function(what) { alert("Hello " + what); });
hello = "world";  // Fires up alert "Hello world"

Haftungsausschluss:

Wie @MonkeyZeus sagte: Niemals dürfen Sie diesen Code in der Produktion verwenden, egal wie gut Ihre Absichten sind.

Hier ist ein Beispiel für eine bestimmte Situation:

window.onload = funcRef;

Diese Anweisung wird zwar nicht aufgerufen , führt aber zu einem zukünftigen Aufruf .

Aber ich denke, Grauzonen könnten für solche Rätsel in Ordnung sein :)

Wenn wir einen Ansatz des Querdenkens akzeptieren, gibt es in einem Browser mehrere APIs, die wir missbrauchen können, um beliebiges JavaScript auszuführen, einschließlich des Aufrufs einer Funktion, ohne tatsächliche Klammerzeichen.

1. locationund javascript:Protokoll:

Eine solche Technik besteht darin, das javascript:Protokoll bei der locationZuweisung zu missbrauchen .

Arbeitsbeispiel:

location='javascript:alert\x281\x29'

Obwohl technisch \x28 und \x29immer noch in Klammern, sobald der Code ausgewertet wird, ist der tatsächliche( und das )Zeichen nicht angezeigt. Die Klammern werden in einer JavaScript-Zeichenfolge maskiert, die bei der Zuweisung ausgewertet wird.

2. onerror und eval:

Ebenso können wir je nach Browser das Globale missbrauchen onerror , indem es auf setzen evalund etwas auslösen, das zu gültigem JavaScript führt. Dieser ist schwieriger, da Browser in diesem Verhalten inkonsistent sind, aber hier ist ein Beispiel für Chrome.

Arbeitsbeispiel für Chrome (nicht Firefox, andere ungetestet):

window.onerror=eval;Uncaught=0;throw';alert\x281\x29';

Dies funktioniert in Chrome, da throw'test'es 'Uncaught test'als erstes Argument an onerrordas fast gültige JavaScript übergeben wird. Wenn wir es stattdessen tun throw';test', wird es vergehen 'Uncaught ;test'. Jetzt haben wir gültiges JavaScript! Definieren Sie einfach Uncaughtden Test und ersetzen Sie ihn durch die Nutzlast.

Abschließend:

Solcher Code ist wirklich schrecklich und sollte niemals verwendet werden , wird aber manchmal bei XSS-Angriffen verwendet, sodass die Moral der Geschichte nicht darauf beruht, Klammern zu filtern, um XSS zu verhindern. Die Verwendung eines CSP zur Verhinderung eines solchen Codes wäre ebenfalls eine gute Idee.

In ES6 haben Sie sogenannte Tagged Template Literals .

Beispielsweise:

function foo(val) {
    console.log(val);
}

foo`Tagged Template Literals`;