Heim  >  Artikel  >  Web-Frontend  >  Betrachten Sie das Vorladen von JavaScript anhand der Funktionsdefinition

Betrachten Sie das Vorladen von JavaScript anhand der Funktionsdefinition

高洛峰
高洛峰Original
2016-11-28 15:26:151191Durchsuche

Es gibt zwei Möglichkeiten, eine Funktion in JavaScript zu definieren:

function ftn(){} // 第一种
var ftn = function(){} // 第二种

Manche Leute sagen, dass diese beiden Schreibweisen völlig gleichwertig sind. Vor dem Parsen wird jedoch die erstere Schreibweise vom Parser automatisch in den Kopf des Codes befördert, was gegen das Prinzip verstößt, Funktionen zuerst zu definieren und dann zu verwenden. Daher wird empfohlen, wann die letztere Schreibweise zu verwenden Funktionen definieren.

Nachdem ich diesen Satz gelesen habe, habe ich zunächst das Gefühl, dass die beiden in ihrer Verwendung völlig gleich sind, es jedoch Unterschiede in der Analyse gibt. Aber seine Erklärung, dass „die frühere Schreibweise vom Parser automatisch an den Kopf des Codes befördert wird“, verwirrte mich.

Also hatte ich folgenden ersten Test:

<script type="text/javascript">
function ftn()
{
    alert(&#39;old&#39;);
}
 
var b = ftn;
 
function ftn()
{
    b();
    alert(&#39;new&#39;);
}
 
ftn();//浏览器报内存溢出
</script>

Dann habe ich den zweiten Test gemacht:

<script type="text/javascript">
var ftn = function()
{
    alert(&#39;old&#39;);
}
 
var b = ftn;
 
var ftn = function()
{
    b();
    alert(&#39;new&#39;);
}
 
ftn();//old,new依次弹出
</script>

Die Online-Erklärung dafür lautet: Die erste Methode ist dass die Funktion ftn zu Beginn nicht neu definiert, sondern darin ausgeführt wird. Der zweite Weg, ftn=function() wird hier nicht im Code ausgeführt. Funktion ftn wurde neu definiert, daher ist die Neudefinition hier gültig.

Wenn es nicht klar ist, habe ich den folgenden Test durchgeführt:

<script type="text/javascript">
function ftn()
{
    alert(&#39;old&#39;);
}
 
var b = ftn;
 
function ftn()
{
    b();
    alert(&#39;new&#39;);
}
 
alert(b);//结果是重新定义的ftn内容
</script>

Die Testergebnisse ergaben, dass sich nach der Neudefinition von ftn auch der Inhalt von b ändert. Als nächstes habe ich zwei weitere Tests durchgeführt:

<script type="text/javascript">
var ftn = function()
{
    alert(&#39;old&#39;);
}
 
var b = ftn;
 
var ftn = function()
{
    b();
    alert(&#39;new&#39;);
}
 
alert(b);//结果是老的ftn内容
</script>

Das ist in JavaScript sehr interessant, außer den grundlegenden Datentypen. Das Objekt wird im Heap gespeichert und sein Alias ​​ist die Adresse Im Stapel kann der letztere Test offensichtlich mit diesem Prinzip verstanden werden. Warum hat sich der vorherige Test b mit der Neudefinition von ftn geändert?

Ich habe eine neue Erklärung, ich weiß nicht, ob sie richtig ist oder nicht. Es wird keine Methodenüberladung in JavaScript geben überschreiben Sie die vorherige Funktion, var b = ftn; Dieser Satz verweist auf die Referenzen von b und ftn auf den Speicher im selben Heap. Nach der Neudefinition der Funktion ftn(){} überschreibt das neue Funktionsobjekt das alte Objekt und den Heap, auf den verwiesen wird b und ftn Der Adressraum hat sich nicht geändert. Wenn dies der Fall ist, ist diese Schreibweise sinnvoll:

<script type="text/javascript">
function ftn()
{
    alert(&#39;old&#39;);
}
 
var b = ftn;
 
var ftn = function()
{
    b();
    alert(&#39;new&#39;);
}
 
alert(b);//老的ftn
alert(ftn);//新的ftn
ftn();//old ,new
</script>

Auf diese Weise hat sich die Adresse des neuen ftn im Stapel geändert zur Definition des neuen Funktionsobjekts und des Originals Die Funktion wurde nicht überschrieben und wird weiterhin gespeichert, sodass b immer noch die Adresse ist, auf die der alte FTN verweist.

Ich habe gerade einen Artikel über das Verständnis von Funktionen in JavaScript geschrieben. Wenn ich zurückblicke und über den Inhalt meines Artikels nachdenke, habe ich das Gefühl, dass mein Verständnis der Testergebnisse immer noch besteht Beginnen Sie mit dem Kompilieren und Ausführen. JavaScript kompiliert den Code, wenn der Code ausgeführt wird, sodass der durch unsere Variable definierte Typ variabel sein kann. Die von uns gekapselten Objekte können daher häufig Eigenschaften und Methoden hinzufügen, sodass wir die durch meinen Titel verursachten Probleme verstehen können , wie Definition Eine Variable var obj = new Object() führt nur einen sehr anfänglichen Prozess aus, der in JavaScript als Vorkompilierung bezeichnet wird. Sie ist so schwach, dass Sie sie nach Belieben ändern können, ohne die Ausführung zu beeinträchtigen Wenn das Objekt aufgerufen wird, kompiliert der JavaScript-Interpreter den Code und führt ihn dann aus. Dies ist eine Besonderheit von Java Die meisten Skriptsprachen sind nicht schnell. Wenn Sie jedoch eine Funktion wie diese definieren: fonction ftn(){}, wird der Code kompiliert, d. h. ausgeführt. Diese Schreibmethode ist der Definition einer Java-Funktion sehr ähnlich. Dies ist meine neue Interpretation, und ich denke, diese Erklärung ist vernünftiger.

Die „Kompilierung“ von JavaScript prüft nur, ob Codefehler vorliegen, führt den Code jedoch nicht aus. Sie können versuchen, etwas in die Funktion zu schreiben, um ihn zu testen. Vorladen, zuerst Funktion, dann Var. Im obigen Code sind nur Demo1 und Demo3 betroffen. Die Reihenfolge des Quellcodes nach dem Vorladen lautet: Funktion – Funktion – Var 🎜 >

<script type="text/javascript">
//demo1
function ftn()
{
    alert(&#39;old&#39;);
}
function ftn()
{
    b();
    alert(&#39;new&#39;);
}
var b = ftn;
 
ftn();//浏览器报内存溢出
</script>
Das war’s auch schon mit dem Vorladen.
<script type="text/javascript">
//demo3
function ftn()
{
  alert(&#39;old&#39;);
}
function ftn()
{
  b();
  alert(&#39;new&#39;);
}
var b = ftn;
 
alert(b);//结果是重新定义的ftn内容
</script>
Stellungnahme:
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