Variablen innerhalb des jQuery.getJSON-Callbacks behalten ihren Wert nicht bei

Question

In meiner Website verwende ich einen Kategorienbaum, der als JSON-Objekt in der Datei "categories.json" gespeichert ist. Sein Wert wird zusammen mit einigen Methoden für den Zugriff auf die Eigenschaft "tree" eines Objekts namens "category" gespeichert. Dies ist Teil des Codes:

var category = { 

    tree: {}, 

    // loads the tree into memory 
    loadTree: function() { 
     $.getJSON("categories.json", function(data) { 
      this.tree = data; 
      console.log("Tree loaded"); 
     }); 
    }, 

    // Returns an array with the children of a node 
    getChildren: function(name) { 
     return this.tree[name].children; 
    } 

    ... 
} 

Ich verstehe, dass da getJSON eine asynchrone Funktion ist, die Auswirkungen des Rückrufs, den ich als Argument übergeben werden nicht sofort stattfinden. Aber selbst nachdem die Nachricht "Tree loaded" angezeigt wurde, ist es immer leer, wenn ich auf das category.tree-Objekt zugreife (dh category.getChildren() aufruft und das Ergebnis drucke).

Answer 1

this bezieht sich auf nichts. Sie befinden sich innerhalb des Objekts category, daher müssen Sie darauf verweisen.

this würde Sinn machen, wenn Sie in einer Klasseninstanz waren, aber dies ist nur ein normales Objekt.

var category = { 
 

 
    tree: {}, 
 

 
    // loads the tree into memory 
 
    loadTree: function() { 
 
     category.tree = { foo : "bar" } 
 
    }, 
 

 
    // Returns an array with the children of a node 
 
    getChildren: function(name) { 
 
     return category.tree 
 
    } 
 

 
} 
 

 
category.loadTree() 
 
console.log(category.getChildren()) // { foo : "bar" }

Das Gleiche gilt für eine Klasse, wo this mit Sinn macht:

class Category { 
 

 
\t constructor(){ 
 
\t  this.tree = {} \t 
 
\t } 
 
\t 
 
    // loads the tree into memory 
 
    loadTree() { 
 
     this.tree = { foo : "bar" } 
 
    } 
 

 
    // Returns an array with the children of a node 
 
    getChildren(name) { 
 
     return this.tree 
 
    } 
 

 
} 
 

 
const category = new Category() 
 
category.loadTree() 
 
console.log(category.getChildren())