內部函數變量丟失外部函數的“ this”值

Question

我使用JavaScript創建了一個類，如下所示：

class TreeMatching
{
        constructor()
        {
            this.thresholdPoints=0;
            this.neighborWeight = 0.4;
            this.totalFrequency = 0.0;
            this.listSeq = [];
            this.listFreq = [];
            this.mapScore = new Object();
            this.tree = new Trie();
        }

        createTree()
        {
            var list_Dictionary;
            var loadWordList = $.get("../wordFrequencyTop5000.txt", function(data)
            {
                list_Dictionary = data.split("\n");
            });

            loadWordList.done(function()
            {
                for(var i=0;i<list_Dictionary.length;i++)
                {
                    var string = list_Dictionary[i];
                     this.tree.insert(string); //<-- Cannot read property 'insert' of undefined
                }
            });

       }
}

它應該按如下所示在Trie類中調用insert方法：

class Trie
{
        constructor()
        {
            this.count=1;
            this.root = new TrieNode();
        }

        insert(word)
        {
            var children = new Object();

            for(var i=0; i<word.length(); i++){
                var c = word.charAt(i);

                var t;
                if(children[c]){
                        t = children[c];
                }else{
                    t = new TrieNode(c);
                    children.put(c, t);
                }

                children = t.children;

                //set leaf node
                if(i==word.length()-1)
                    t.isLeaf = true;   
            }
        }
}

但是，標記錯誤的代碼行（外部函數的this值）沒有屬性tree ， mapScore等。

有沒有辦法可以從內部回調函數訪問這些值？

謝謝

Answer 1

看一下' this'-您將必須定義局部變量以維護對調用中對“ this”的引用，如鏈接中所述。

createTree()
        { 
            var self = this;
            var list_Dictionary;
            var loadWordList = $.get("../wordFrequencyTop5000.txt", function(data)
            {
                list_Dictionary = data.split("\n");
            });

            loadWordList.done(function()
            {
                for(var i=0;i<list_Dictionary.length;i++)
                {
                    var string = list_Dictionary[i];
                     self.tree.insert(string); //<-- Now you should be able to do it
                }
            });

       }

Answer 2

內部匿名中的“ this”具有不同的范圍。 嘗試利用JS中close的優勢，它將可以訪問函數調用程序范圍。

var that = this;
loadWordList.done(function() {
    for(var i=0;i<list_Dictionary.length;i++)
    {
         var string = list_Dictionary[i];
         that.tree.insert(string); // 'that' will hold 'this' in the right scope
    }
});

Answer 3

loadWordlist.done內部的匿名函數創建具有新上下文的新范圍。

如果要保留舊的上下文，可以使用ES2015箭頭功能：

loadWordList.done(() => {
    //code here
);

或在createTree（）中創建一個var，如下所示：

var that = this;

然后在loadWordList回調中，您可以使用以下命令引用正確的上下文：

that.tree.insert(string);

我個人更喜歡箭頭功能，因為“那”是var名稱的糟糕選擇。 並且由於您使用ES2015類瀏覽器，因此一定不能成為問題。