JavaScript-Funktionsausdrücke (grafisches Tutorial)-js-Tutorial-php.cn

In diesem Artikel werden hauptsächlich detaillierte Erklärungen und Beispiele für JavaScript-Funktionsausdrücke vorgestellt.

JavaScript-Funktionsausdrücke

Es gibt zwei Möglichkeiten, eine Funktion zu definieren: eine ist eine Funktionsdeklaration und die andere ist ein Funktionsausdruck

1.1 Funktionsdeklaration

function functionName(arg){
   //函数体
}

Nach dem Login kopieren

Bei der Funktionsdeklaration ist eine wichtige Funktion die Funktionsdeklarationsförderung, was bedeutet, dass die Funktionsdeklaration vor der Ausführung des Codes gelesen wird. Dies bedeutet, dass die Funktion nach der Anweisung platziert werden kann, die sie aufruft. Wie unten gezeigt:

helloworld(); //在代码执行之前会先读取函数声明
function helloworld(){
  console.log("hello world");
}

Nach dem Login kopieren

1.2 Funktionsausdruck

var functionName=function(arg){
   //函数体
}

Nach dem Login kopieren

Diese Form sieht so aus sieht aus wie eine reguläre Variablenzuweisungsanweisung, bei der eine Funktion erstellt und der Variablen Funktionsname zugewiesen wird. Die in diesem Fall erstellte Funktion wird als anonyme Funktion bezeichnet. Weil nach dem Funktionsschlüsselwort kein Bezeichner steht.

Funktionsausdrücken muss wie anderen Ausdrücken vor der Verwendung ein Wert zugewiesen werden; der folgende Code führt zu einem Fehler

helloworld(); //错误，还未赋值，函数不存在

var helloworld=function(){
  console.log("hello world");
}

Nach dem Login kopieren

Ja Mit Dem Funktionsausdruck können wir dem Funktionsausdruck dynamisch Werte zuweisen, wie im folgenden Code gezeigt:

var helloworld; //声明
if(condition){ //条件
  helloworld=function(){ //赋值
    console.log("hello world"); 
  }
}
else{
  helloworld=function(){ //赋值
    console.log("你好，世界");
  }
}

Nach dem Login kopieren

2. Rekursive Funktion

Eine rekursive Funktion wird gebildet, wenn eine Funktion sich selbst über ihren Namen aufruft (dasselbe wie C# und andere Sprachen, daher ist die Kernidee des Programms ähnlich, es gibt jedoch einige Unterschiede in der Syntax. Lernen Wenn Sie die Grundlagen einer Sprache gut beherrschen und andere viel einfacher lernen, nehmen wir eine klassische Rekursionsinterviewfrage. Die Regeln für eine Zahlenspalte lauten wie folgt: 1, 1, 2, 3, 5, 8, 13, 21, 34... Finden Sie die 30. Ziffer und verwenden Sie die Rekursionsalgorithmus-Implementierung. Der Code lautet wie folgt:

   function foo(n) {
      if (n <= 0)
        return 0;
      else if (n > 0 && n <= 2)
        return 1;
      else
        return foo(n - 1) + foo(n - 2);
    }

Nach dem Login kopieren

Obwohl diese Funktion kein Problem zu haben scheint, Folgendes Code kann dazu führen, dass es schief geht:

   var foo1 = foo;
    foo = null;
    console.log(foo1(34));

Nach dem Login kopieren

Der obige Code speichert zuerst die foo()-Funktion in der Variablen foo1 und setzt dann die foo-Variable auf null Dadurch gibt es nur einen Verweis auf die ursprüngliche Funktion. Wenn jedoch foo1() als nächstes aufgerufen wird, tritt in diesem Fall ein Fehler auf, da foo() ausgeführt werden muss und foo bereits null ist. Die Verwendung von arguments.callee kann dieses Problem lösen. arguments.callee ist ein Zeiger auf die ausgeführte Funktion, sodass Sie damit rekursive Aufrufe der Funktion implementieren können

 function foo(n) {
      if (n <= 0)
        return 0;
      else if (n > 0 && n <= 2)
        return 1;
      else
        return arguments.callee(n - 1) + arguments.callee(n - 2);
    }

Nach dem Login kopieren

Sie können auch benannte Funktionsausdrücke verwenden um das gleiche Ergebnis zu erzielen. Zum Beispiel:

 var foo = (function f(n) {
      if (n <= 0)
        return 0;
      else if (n > 0 && n <= 2)
        return 1;
      else
        return f(n - 1) + f(n - 2);
    });

Nach dem Login kopieren

3. Schließung

3.1 Schließung bedeutet das Recht, auf einen anderen Funktionsumfang zuzugreifen. Ein üblicher Weg Einen Abschluss zu erstellen bedeutet, eine Funktion innerhalb einer Funktion zu erstellen. Um Abschlüsse zu verstehen, müssen Sie zunächst den Umfang der speziellen JavaScript-Variablen verstehen. Der Umfang von Variablen besteht aus nichts anderem als zwei Typen, globalen Variablen und lokalen Variablen, um ihn intuitiv auszudrücken:

 var n = 100; //定义一个全局变量
    function fn() {
      console.log(n); //函数内部直接读取全局变量
    }

    fn();

Nach dem Login kopieren

Lokale Variablen können nicht direkt außerhalb der Funktion gelesen werden:

    function fn() {
      var n = 100;
    }

    console.log(n); //n is not defined

Nach dem Login kopieren

Eine Sache, die hier zu beachten ist, ist, dass es wird innerhalb der Funktion deklariert. Achten Sie bei der Verwendung von Variablen darauf, var zu verwenden. Wenn sie nicht verwendet wird, wird sie zu einer globalen Variablen:

 function fn() {
       n = 100;
    }
    fn();
    console.log(n); //100

Nach dem Login kopieren

Manchmal brauchen wir um die innerhalb der Funktion deklarierten Variablen abzurufen. Sie können also die oben erwähnte übliche Methode zum Erstellen von Abschlüssen verwenden, um eine weitere Funktion innerhalb der Funktion zu erstellen:

   function fn() {
      n = 100;

      function fn1() {
        console.log(n);
      }

      fn1();
    }
    fn(); //100

Nach dem Login kopieren

Im Im obigen Code ist die Funktion fn1 in der Funktion fn enthalten. Alle lokalen Variablen in fm sind für fn1 sichtbar. Aber das Gegenteil funktioniert nicht. Die lokalen Variablen in fn1 sind für fn unsichtbar. Dies ist die einzigartige „Kettenbereich“-Struktur der Javascript-Sprache. Das untergeordnete Objekt sucht Ebene für Ebene nach den Variablen aller übergeordneten Objekte. Daher sind alle Variablen des übergeordneten Objekts für das untergeordnete Objekt sichtbar, umgekehrt jedoch nicht.

Es stellt sich heraus, dass fn1 die internen Variablen von fn lesen kann. Solange also fn1 als Rückgabewert verwendet wird, können wir die Variablen von fn extern lesen

function fn() {
      n = 100;

      function fn1() {
        console.log(n);
      }

      return fn1;
    }
    
    var result=fn();
    result(); //100

Nach dem Login kopieren

Hier ist fn1 ein Abschluss, und ein Abschluss ist eine Funktion, die die internen Variablen anderer Funktionen lesen kann. Da in der Javascript-Sprache nur Unterfunktionen innerhalb der Funktion lokale Variablen lesen können, können Abschlüsse einfach als „innerhalb einer Funktion definierte Funktionen“ verstanden werden. Im Wesentlichen ist der Abschluss also eine Brücke, die das Innere der Funktion mit der Außenseite der Funktion verbindet.

3.2 Der Zweck des Abschlusses

Es hat zwei Hauptzwecke: Der eine besteht darin, die Variablen innerhalb der Funktion zu lesen, und der andere besteht darin, die Werte dieser Variablen beizubehalten in Erinnerung. Wie im folgenden Code gezeigt:

function fn() {
      n = 100;

      nadd = function () {
        n += 1;
      }

      function fn1() {
        console.log(n);
      }

      return fn1;
    }

    var result = fn();
    result(); //100
    nadd();
    result(); //101

Nach dem Login kopieren

注意：由于闭包函数会携带包含它的函数的作用域，因此会比其他函数占用更多的内存，过度使用闭包可能会导致内存占用过多，所以在退出函数之前，将不使用的局部变量全部删除。

四、块级作用域

块级作用域（又称为私有作用域）的匿名函数的语法如下所示：

(function(){
   //块级作用域
})();

Nach dem Login kopieren

无论在什么地方，只要临时需要一些变量，就可以使用私有作用域，比如：

(function () {
      var now = new Date();
      if (now.getMonth() == 0 && now.getDate() == 1) {
        alert("新年快乐");
      }
    })();

Nach dem Login kopieren

把上面这段代码放到全局作用域中，如果到了1月1日就会弹出“新年快乐”的祝福；这种技术经常在全局作用域中被用在函数外部，从而限制向全局作用域中添加过多的变量和函数。一般来说,我们都应该尽量少向全局作用域中添加变量和函数。在一个由很多开发人员共同参与的大型应用程序中，过多的全局变量和函数很容易导致命名冲突。而通过创建私用作用域，每个开发人员既可以使用自己的变量，又不必担心搞乱全局作用域。

上面是我整理给大家的，希望今后会对大家有帮助。

关于如何优化你的JS代码（图文教程）

畅谈HTML+CSS+JS（详细讲解）

原生JS+AJAX做出三级联动效果（附代码）

Das obige ist der detaillierte Inhalt vonJavaScript-Funktionsausdrücke (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!