Verwenden Sie „Apply' und „Bind' in JS, um eine dynamische Anzahl von Parametern an eine Funktion oder class_javascript-Fähigkeiten zu übergeben

Um 10 Jahre lang nicht zu bloggen, beginnen wir meinen ersten Blogbeitrag mit einem so interessanten Tipp -___-

Wenn wir in ES5 eine Funktion aufrufen und die zu übergebenden Parameter auf der Grundlage anderer Funktionen oder Bedingungen generiert werden, d. h. wenn nicht sicher ist, wie viele Parameter übergeben werden, wird die ursprüngliche Funktion dies tun nicht geändert werden. Was sollen wir als nächstes tun?

(Wenn Sie die in diesem Artikel beschriebene Situation vermeiden können, versuchen Sie sie natürlich zu vermeiden, indem Sie beispielsweise die Parameter in ein Objekt oder ein Array usw. ändern.)

Die meisten Menschen wissen vielleicht, dass eine Bewerbung dieses Problem perfekt lösen kann:

Apply verwendet wie call den ersten Parameter als aufrufendes Objekt der Funktion, d. h. dieser Zeiger in der aufrufenden Funktion wird als erster Parameter umgeschrieben. Wenn es sich nicht um eine Objektmethode handelt, können Sie dies ignorieren und übergeben Sie eine Null-Dose.

Der Unterschied liegt in den folgenden Parametern: „Apply“ fügt alle Parameter, die an die aufrufende Funktion übergeben werden sollen, in einem Array ein und „Call“ hängt sie der Reihe nach an, wie bei der Originalfunktion.

Da es sich um ein Array handelt, kann das Generieren eines Arrays auf der Grundlage anderer Funktionen oder logischer Beurteilungen den Zweck der Übergabe einer dynamischen Anzahl von Parametern erreichen.

Aber ich habe beim Erstellen eines Objekts mit New ein Problem gehabt. Dies ist ein Problem, auf das ich nur alle paar Jahre stoße:

Wenn Sie ES6 verwenden und den Rest-Parameter haben, wird keines der oben genannten Probleme ein Problem darstellen. Beachten Sie, dass das Hinzufügen von drei Punkten vor dem Array args kein Syntaxfehler ist, sondern die von ES6 bereitgestellte Methode zum Schreiben von Parametern. Sie können es so verstehen, dass Sie ...args durch die Zeichen ersetzen, nachdem Sie die eckigen Klammern im args-Array entfernt haben.

Aber gibt es in ES5 wirklich keine Möglichkeit, dies zu erreichen? Schließlich ist der größte Teil von ES6 syntaktischer Zucker und kann mit Tools wie Babel in ES5 kompiliert werden. Wenn Sie Fragen haben, kompilieren wir es mit Babel und sehen, was wir bekommen:

Sie waren schockiert, als Sie die letzte Zeile sahen. Haben Sie keine Angst. Lassen Sie uns diesen Code analysieren. Lassen Sie uns es zunächst analysieren und in drei Schritten betrachten:

1. Es besteht kein Zweifel, dass wir mit concat zum Verbinden von null und unseren Parametern als zweiten Parameter von apply [null, 1, 2, 3] erhalten

2. Berechnen wir den ersten Parameter Foo, um die native Bindungsmethode aufzurufen. Der Inhalt des zweiten Parameterarrays wird als Parameter von bind übergeben, d. h. Foo.bind(null, 1 , 2, 3);

3. Der erste Parameter der Bind-Methode ähnelt apply und call. Er ändert den Zeiger, und die nachfolgenden Parameter können den standardmäßig voreingestellten führenden Argumentwert für die Funktion implantieren, d. h. nach der Ausführung von Bind Innerhalb des ersten Satzes von Klammern erhalten wir eine Foo-Klasse, in die drei Parameterwerte eingefügt sind. Nennen wir sie FooWithArgs;

Wenn wir schließlich FooWithArgs(); neu definieren, müssen wir keine Parameter übergeben. Entspricht new Foo(1, 2, 3);