Heim > Web-Frontend > js-Tutorial > Analyse und Erklärung rekursiver Funktionen in JavaScript

Analyse und Erklärung rekursiver Funktionen in JavaScript

黄舟
Freigeben: 2017-11-18 10:28:58
Original
2210 Leute haben es durchsucht

Wir haben Ihnen die rekursive Funktion in PHP bereits vorgestellt. Tatsächlich werden rekursive Funktionen normalerweise eher im Backend verwendet. Für Back-End-Entwickler sollte die Rekursion ein Kinderspiel sein, eine sehr einfache Sache, aber viele Front-End-Entwickler wissen nicht viel darüber. Tatsächlich wird Rekursion häufig im Frontend verwendet. Heute analysieren wir die rekursive Funktion in JavaScript für Sie!

js ruft rekursiv auf

// 一个简单的阶乘函数  var f = function (x) {  
    if (x === 1) {  
        return 1;  
    } else {  
        return x * f(x - 1);  
    }  };
Nach dem Login kopieren

Die große Flexibilität von Funktionen in Javascript führt zu Schwierigkeiten bei der Verwendung des Funktionsnamens während der Rekursion, f ist eine Variable, sodass ihr Wert leicht ersetzt werden kann:

var fn = f;  f = function () {};
Nach dem Login kopieren

Die Funktion ist ein Wert, sie wird fn zugewiesen. Wir erwarten, dass wir fn(5) verwenden, um einen Wert zu berechnen, aber aufgrund des internen Die Variable f wird immer noch referenziert, daher funktioniert sie nicht richtig.

Sobald wir also eine rekursive Funktion definiert haben, müssen wir darauf achten, den Namen der Variablen nicht leicht zu ändern.

Was wir oben besprochen haben, sind alle Funktionsaufrufe. Es gibt andere Möglichkeiten, Funktionen aufzurufen, beispielsweise den Aufruf als Objektmethoden.

Wir deklarieren Objekte oft wie folgt:

var obj1 = {  
    num : 5,  
    fac : function (x) {  
        // function body  
    }  };
Nach dem Login kopieren

Deklarieren Sie eine anonyme Funktion und weisen Sie sie dem Attribut des Objekts (fac) zu.

Wenn wir hier eine Rekursion schreiben wollen, müssen wir auf die Eigenschaft selbst verweisen:

var obj1 = {  
    num : 5,  
    fac : function (x) {  
        if (x === 1) {  
            return 1;  
        } else {  
            return x * obj1.fac(x - 1);  
        }  
    }  };
Nach dem Login kopieren

Natürlich wird sie auch unter dem gleichen Problem leiden wie der Funktionsaufruf:

var obj2 = {fac: obj1.fac};  
obj1 = {};  
obj2.fac(5); // Sadness
Nach dem Login kopieren

Nachdem die Methode dem fac-Attribut von obj2 zugewiesen wurde, muss obj1.fac noch intern referenziert werden, also... schlägt es fehl.

Eine weitere Möglichkeit wird verbessert:

var obj1 = {  
     num : 5,  
     fac : function (x) {  
        if (x === 1) {  
            return 1;  
        } else {  
            return x * this.fac(x - 1);  
        }  
    }  };  var obj2 = {fac: obj1.fac};  obj1 = {};  obj2.fac(5); // ok
Nach dem Login kopieren

Rufen Sie die Attribute im Kontext ab, wenn die Funktion über das Schlüsselwort this ausgeführt wird, sodass bei der Ausführung von obj2.fac darauf verwiesen wird innerhalb des Funktionsattributs fac von obj2.

Aber die Funktion kann auch durch willkürliche Änderung des Kontexts aufgerufen werden, also durch den universellen Aufruf und die Anwendung:

obj3 = {};  obj1.fac.call(obj3, 5); // dead again
Nach dem Login kopieren

Die rekursive Funktion kann also nicht wieder richtig funktionieren.

Wir sollten versuchen, dieses Problem zu lösen. Erinnern Sie sich an die zuvor erwähnte Funktionsdeklarationsmethode?

var a = function b(){};
Nach dem Login kopieren

Diese Deklarationsmethode wird als Inline-Funktion bezeichnet. Obwohl die Variable b nicht außerhalb der Funktion deklariert wird, können Sie sich mit b() innerhalb der Funktion aufrufen, also

var fn = function f(x) {  
    // try if you write "var f = 0;" here  
    if (x === 1) {  
        return 1;  
    } else {  
        return x * f(x - 1);  
    }  };  
    var fn2 = fn;  fn = null;  fn2(5); // OK  // here show the difference between "var f = function f() {}" and "function f() {}"  var f = function f(x) {  
    if (x === 1) {  
        return 1;  
    } else {  
        return x * f(x - 1);  
    }  };  var fn2 = f;  f = null;  fn2(5); // OK  var obj1 = {  
    num : 5,  
    fac : function f(x) {  
        if (x === 1) {  
            return 1;  
        } else {  
            return x * f(x - 1);  
        }  
    }  };  var obj2 = {fac: obj1.fac};  obj1 = {};  obj2.fac(5); // ok  var obj3 = {};  obj1.fac.call(obj3, 5); // ok
Nach dem Login kopieren

Das war's, wir haben einen Namen, den wir intern verwenden können, ohne uns Gedanken darüber machen zu müssen, wem die rekursive Funktion zugewiesen ist und wie sie aufgerufen wird.

Das arguments-Objekt innerhalb der Javascript-Funktion verfügt über ein callee-Attribut, das auf die Funktion selbst verweist. Es ist also auch möglich, arguments.callee zu verwenden, um Funktionen intern aufzurufen:

function f(x) {  
    if (x === 1) {  
        return 1;  
    } else {  
        return x * arguments.callee(x - 1);  
    }  }
Nach dem Login kopieren

Aber arguments.callee ist eine Eigenschaft, die bald veraltet ist und wahrscheinlich in einer zukünftigen ECMAscript-Version, in ECMAscript, verschwinden wird 5 Bei „use strict“ kann arguments.callee nicht verwendet werden.

Der letzte Vorschlag lautet: Wenn Sie eine rekursive Funktion deklarieren möchten, verwenden Sie bitte die neue Funktion mit Vorsicht. Die vom FunktionKonstruktor erstellte Funktion wird bei jedem Aufruf neu kompiliert rekursiv aufgerufen wird, führt zu Leistungsproblemen – Sie werden feststellen, dass Ihr Speicher schnell erschöpft ist.

js rekursive Funktionsanwendung

Als ich kürzlich an einem Projekt arbeitete, habe ich eine rekursive Funktion verwendet, um die untergeordneten Knoten von JSON aufzurufen und alle untergeordneten Knoten in JSON zu Objekten hinzuzufügen, die a enthalten Eine bestimmte Anzahl wird in ein Array verschoben und dann daran gebunden.

Ich habe den folgenden rekursiven Aufruf

var new_array=[];
     function _getChilds(data){
         if(data.ObjType=="某个数"){
            new_array.push(cs_data);
        }
        if(data.Childs){
          if(data.Childs.length>0){
              getChilds(data.Childs)
          }
       }
     }
    function getChilds(data){
        for(var i=0;i<data.length;i++){
            _getChilds(data[i]);
        }
    }使用方法:getChilds("json数据")
Nach dem Login kopieren

durchgeführt, um alle Daten, die eine bestimmte Zahl in JSON enthalten, in das neue_Array-Array zu verschieben.

Zusammenfassung:

Ich glaube, dass durch die obige Erklärung nicht nur jeder ein fortgeschritteneres Verständnis rekursiver Funktionen erlangen kann Es kann in PHP verwendet werden und kann auch in Front-End-JavaScript verwendet werden. Ich hoffe, es wird Ihnen hilfreich sein!

Verwandte Empfehlungen:

Verfeinertes Verständnis rekursiver Funktionen in JavaScript und Beispielcode-Sharing

Rekursive Funktionen in JS

Einführung in die Verwendung rekursiver Funktionen in JS

Das obige ist der detaillierte Inhalt vonAnalyse und Erklärung rekursiver Funktionen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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