Heim > Web-Frontend > js-Tutorial > Tiefes Verständnis der Funktionen in JavaScript

Tiefes Verständnis der Funktionen in JavaScript

黄舟
Freigeben: 2016-12-15 10:29:26
Original
780 Leute haben es durchsucht

Funktionen sind die Grundlage für die modulare Programmierung. Um komplexe Ajax-Anwendungen zu schreiben, müssen Sie über ein tieferes Verständnis der Funktionen verfügen. Funktionen in JavaScript unterscheiden sich von anderen Sprachen. Jede Funktion wird als Objekt verwaltet und ausgeführt. Über die Eigenschaften von Funktionsobjekten können Sie ganz einfach einer Variablen eine Funktion zuweisen oder die Funktion als Parameter übergeben. Bevor wir fortfahren, werfen wir einen Blick auf die Syntax der Verwendung von Funktionen:

function func1(…){…}
var func2=function(…){…};
var func3=function func4 ( …){…};
var func5=new Function();
 Dies ist die korrekte Syntax zum Deklarieren von Funktionen. Sie unterscheiden sich stark von gängigen Funktionen in anderen Sprachen oder den zuvor eingeführten Methoden zur Funktionsdefinition. Warum kann es also in JavaScript so geschrieben werden? Welcher Syntax folgt es? Diese werden im Folgenden beschrieben.

Funktionsobjekt verstehen

Mit dem Schlüsselwort function können Sie eine Funktion definieren, einen Funktionsnamen für jede Funktion angeben und sie über den Funktionsnamen aufrufen. Wenn JavaScript interpretiert und ausgeführt wird, werden Funktionen als Objekt verwaltet, bei dem es sich um das einzuführende Funktionsobjekt handelt.

Funktionsobjekte unterscheiden sich wesentlich von anderen benutzerdefinierten Objekten, z. B. als Datumsobjekt (Date), Array-Objekt (Array) und String-Objekt (String All). sind interne Objekte. Die Konstruktoren dieser integrierten Objekte werden von JavaScript selbst definiert: Durch die Ausführung einer Anweisung wie new Array() zur Rückgabe eines Objekts verfügt JavaScript über einen internen Mechanismus zur Initialisierung des zurückgegebenen Objekts, anstatt dass der Benutzer angibt, wie das Objekt aufgebaut ist .

In JavaScript ist der entsprechende Typ eines Funktionsobjekts „Function“, genau wie der entsprechende Typ eines Array-Objekts „Array“ und der entsprechende Typ eines Datumsobjekts „Date“ ist. Sie können ein Funktionsobjekt über new Function() erstellen. Oder Sie können ein Objekt über das Funktionsschlüsselwort erstellen. Zum besseren Verständnis vergleichen wir die Erstellung von Funktionsobjekten mit der Erstellung von Array-Objekten. Schauen wir uns zuerst das Array-Objekt an: Die folgenden beiden Codezeilen erstellen beide ein Array-Objekt myArray:

var myArray=[];
//Äquivalent zu
var myArray=new Array() ;
In ähnlicher Weise erstellen auch die folgenden beiden Codeteile eine Funktion myFunction:
function myFunction(a,b){
return a+b;
}
//Äquivalent zu
var myFunction=new Function("a","b","return a+b");
Durch den Vergleich mit der Anweisung zum Erstellen eines Array-Objekts können Sie die Essenz des Funktionsobjekts deutlich erkennen Die zuvor eingeführte Funktionsdeklaration ist die oben beschriebene erste Art des Codes. Wenn Sie im Interpreter auf diese Syntax stoßen, wird automatisch ein Funktionsobjekt erstellt und die Funktion wird als internes Objekt gespeichert und ausgeführt. Daraus ist auch ersichtlich, dass ein Funktionsobjektname (Funktionsvariable) und ein gewöhnlicher Variablenname dieselben Spezifikationen haben. Beide können über den Variablennamen auf die Variable verweisen, dem Funktionsvariablennamen können jedoch Klammern und ein Parameter folgen Liste, um den Funktionsaufruf auszuführen.

Es ist nicht üblich, eine Funktion in Form von new Function() zu erstellen, da ein Funktionskörper normalerweise mehrere Anweisungen enthält. Wenn diese als Parameter in Form einer Zeichenfolge übergeben werden, beeinträchtigt dies die Lesbarkeit des Codes wird arm sein. Im Folgenden wird die Verwendungssyntax vorgestellt:

var funcName=new Function(p1,p2,,pn,body);
Die Parametertypen sind alle Zeichenfolgen, p1 bis pn stellen die Parameternamen der erstellten dar Funktionsliste, Body stellt die Funktionskörperanweisung der erstellten Funktion dar und funcName ist der Name der erstellten Funktion. Sie können eine leere Funktion erstellen, ohne Parameter anzugeben, und eine unbenannte Funktion erstellen, ohne funcName anzugeben. Natürlich hat eine solche Funktion keine Bedeutung.

Es ist zu beachten, dass p1 bis pn Listen mit Parameternamen sind, d. h. p1 kann nicht nur einen Parameter darstellen, sondern auch eine durch Kommas getrennte Parameterliste sein. Beispielsweise sind die folgenden Definitionen äquivalent :

new Function("a", "b", "c", "return a+b+c")
new Function("a, b, c", "return a+b +c" ")
new Function("a,b", "c", "return a+b+c")
JavaScript führt den Funktionstyp ein und stellt eine Syntax wie new Function() als Funktionsobjekt bereit Fügt Attribute hinzu und Methoden müssen auf dem Funktionstyp basieren.
Das Wesentliche einer Funktion ist ein internes Objekt, und der JavaScript-Interpreter bestimmt, wie es funktioniert. Die durch den obigen Code erstellte Funktion kann über den Funktionsnamen im Programm aufgerufen werden. Die am Anfang dieses Abschnitts aufgeführten Probleme bei der Funktionsdefinition werden ebenfalls erläutert. Beachten Sie, dass Sie direkt nach der Funktionsdeklaration Klammern hinzufügen können, um anzuzeigen, dass die Funktion unmittelbar nach der Erstellung aufgerufen wird, zum Beispiel:

var i=function (a,b){
return a+b;
} (1,2);
alert(i);
Dieser Code zeigt an, dass der Wert der Variablen i gleich 3 ist. i stellt den zurückgegebenen Wert dar, nicht die erstellte Funktion, da die Klammern „(“ eine höhere Priorität haben als das Gleichheitszeichen „=“. Solcher Code wird möglicherweise nicht häufig verwendet, aber wenn der Benutzer dies möchte, ist dies eine gute Lösung für modulare Design oder um Namenskonflikte zu vermeiden

Es ist zu beachten, dass die folgenden beiden Methoden zum Erstellen von Funktionen gleichwertig sind:

function funcName(){
//Funktionskörper
}
//Äquivalent zu
var funcName=function(){
//Funktionskörper
}
Aber die erstere Methode erstellt eine benannte Funktion und die letztere Methode erstellt eine unbenannte Funktion, indem sie einfach eine Variable auf die unbenannte Funktion verweisen lässt. Es gibt nur einen Unterschied in der Verwendung: Für eine benannte Funktion kann sie nach dem Aufruf definiert werden, während sie für eine unbenannte Funktion vor dem Aufruf definiert werden muss. Zum Beispiel:

<script language="JavaScript" type="text/javascript">
<!--
func();
var func=function(){
warning(1)
}
//-->
</script>
Diese Anweisung generiert einen undefinierten Fehler für func und:

<!--
func();
function func(){
warning(1)
}
//-- >
</script>
kann korrekt ausgeführt werden, und die folgende Anweisung kann auch korrekt ausgeführt werden:

<script language="JavaScript" type="text/javascript">
<! --
func();
var someFunc=function func(){
alarm(1)
}
//-->
</script>

Es ist ersichtlich, dass JavaScript zwar eine interpretierte Sprache ist, beim Aufruf einer Funktion jedoch prüft, ob im gesamten Code eine entsprechende Funktionsdefinition vorhanden ist. Dieser Funktionsname kann nur in der Form function funcName( definiert werden. ) Gültig und kann keine anonyme Funktion sein.

Die Beziehung zwischen Funktionsobjekten und anderen internen Objekten

Zusätzlich zu Funktionsobjekten gibt es viele interne Objekte, wie zum Beispiel: Objekt, Array, Datum, RegExp, Mathematik, Fehler. Diese Namen stellen tatsächlich einen Typ dar, und ein Objekt kann über den neuen Operator zurückgegeben werden. Allerdings unterscheiden sich Funktionsobjekte von anderen Objekten. Wenn „typeof“ verwendet wird, um den Typ eines Funktionsobjekts abzurufen, wird immer noch die Zeichenfolge „function“ zurückgegeben, und wenn „typeof“ ein Array-Objekt oder ein anderes Objekt ist, wird die Zeichenfolge „object“ zurückgegeben ". Der folgende Code veranschaulicht die verschiedenen Typen von typeof:

alert(typeof(Function)));
alert(typeof(new Function()));
alert ( typeof(Array));
alert(typeof(Object));
alert(typeof(new Array()));
alert(typeof(new Date()));
alert ( typeof(new Object()));
Wenn Sie diesen Code ausführen, können Sie feststellen, dass in den ersten vier Anweisungen „Funktion“ angezeigt wird, während in den nächsten drei Anweisungen „Objekt“ angezeigt wird Funktion gibt tatsächlich eine Funktion zurück. Dies unterscheidet sich stark von anderen Objekten. Andere Typen wie Array und Object geben über den neuen Operator ein normales Objekt zurück. Obwohl die Funktion selbst ebenfalls ein Objekt ist, unterscheidet sie sich dennoch von gewöhnlichen Objekten, da sie auch ein Objektkonstruktor ist. Das heißt, Sie können eine neue Funktion erstellen, um ein zuvor eingeführtes Objekt zurückzugeben. Alle Objekte, deren Typ „Funktion“ zurückgibt, sind Funktionsobjekte. Solche Objekte werden auch Konstruktoren genannt. Daher sind alle Konstruktoren Objekte, aber nicht alle Objekte sind Konstruktoren.

Da die Funktion selbst auch ein Objekt ist, ist ihr Typ eine Funktion. Wenn Sie an die Klassendefinitionen objektorientierter Sprachen wie C++ und Java denken, können Sie die Rolle des Funktionstyps erraten Mit Hilfe des Prototypobjekts der Funktion können Sie einige Funktionen für das Funktionsobjekt selbst definieren und die Definition des Funktionstyps leicht ändern und erweitern Die Methode method1 wird hinzugefügt. Die Funktion besteht darin, ein Dialogfeld zur Anzeige von „function“ aufzurufen:

Function.prototype.method1=function(){
warning("function");
}
function func1(a,b,c){
return a+b+c ;
}
func1.method1();
func1.method1.method1();
Beachten Sie die letzte Anweisung: func1.method1.mehotd1(), die Methode1 der Methode des Funktionsobjekts method1 aufruft. Obwohl es etwas verwirrend erscheint, wird bei genauerer Betrachtung der Syntax klar: Es handelt sich um eine rekursive Definition. Da Methode1 selbst ebenfalls eine Funktion ist, verfügt sie auch über die Eigenschaften und Methoden des Funktionsobjekts. Alle Methodenerweiterungen des Funktionstyps verfügen über solche rekursiven Eigenschaften.

Funktion ist die Basis aller Funktionsobjekte, und Objekt ist die Basis aller Objekte (einschließlich Funktionsobjekte). In JavaScript ist jedes Objekt eine Instanz von Object. Daher kann der Objekttyp so geändert werden, dass alle Objekte über einige gemeinsame Eigenschaften und Methoden verfügen. Das Ändern des Objekttyps erfolgt über den Prototyp:

Object .prototype.getType =function(){
return typeof(this);
}
var array1=new Array();
function func1(a,b){
return a+ b;
}
alert(array1.getType());
alert(func1.getType());
Der obige Code fügt allen Objekten die getType-Methode hinzu, die den Objekttyp zurückgeben soll. Die beiden Warnanweisungen zeigen jeweils „Objekt“ und „Funktion“ an.

Funktionen als Parameter übergeben

Das Wesen von Funktionsobjekten wurde bereits vorgestellt. Jede Funktion wird als spezielles Objekt dargestellt, das einfach einer Variablen zugewiesen werden kann, und der Funktionsaufruf erfolgt dann über diesen Variablennamen. Als Variable kann sie in Form eines Parameters an eine andere Funktion übergeben werden. Dies wurde in der vorherigen Einführung zum JavaScript-Ereignisbehandlungsmechanismus gesehen. Das folgende Programm übergibt beispielsweise func1 als Parameter an func2:

function func1(theFunc){
theFunc();
}
function func2(){
alarm("ok");
}
func1(func2);
In der letzten Anweisung wird func2 als Objekt an den formalen Parameter theFunc von func1 übergeben und dann wird theFunc intern von func1 aufgerufen. Tatsächlich ist die Übergabe von Funktionen als Parameter oder die Zuweisung von Funktionen an andere Variablen die Grundlage aller Ereignismechanismen.

Wenn Sie beispielsweise beim Laden der Seite einige Initialisierungsarbeiten durchführen müssen, können Sie zunächst eine Init-Initialisierungsfunktion definieren und diese dann über window.onload=init; an das Abschlussereignis des Ladens der Seite binden. Stellungnahme. Das Init ist hier ein Funktionsobjekt, das zur Onload-Ereignisliste des Fensters hinzugefügt werden kann.

Das Obige ist der Inhalt eines umfassenden Verständnisses der Funktionen in JavaScript. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn)!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage