从回调(异步方法）内部访问对象文字属性

Accessing object literal properties from inside callbacks (async methods)

本文关键字：访问 对象 文字 属性 内部 回调 异步方法      更新时间：2023-09-26

我正在编写一个chrome扩展，它需要与书签子树交互。这个子树有很多交互，所以我将这个逻辑抽象成一个对象文字，如下所示：

var contextStore = {
    'root_id': undefined,
    'setup': function() {...},      // populates root_id
    'add': function(name) {...},    // uses root_id
    'remove': function(name) {...}, // uses root_id
    // ... etc ...
};
contextStore.setup(); // only once.
contextStore.add("foo");
contextStore.add("bar");
// ... etc

到目前为止，一切都很好。

我遇到的麻烦是由异步Chrome API(以及我缺乏JS-fu(引起的。也就是说：

var contextStore = {
    'root_id': undefined,
    'setup': function() {
        chrome.bookmarks.getTree(function(tree) {
           // do some work to find a given folder in bookmarks.
           // now I want to save that folder's id for access in other methods.
           // Fail: 'this' refers to chrome.bookmarks.getTree. 
           this.root_id = computed_thing; // doesn't work!
        });
    }
    // ... etc ...
};

我的问题是：

如何从各种Chrome API方法回调内部访问封闭对象文字的成员

我考虑过使用模块模式，但它似乎不会改变事情，而且这段代码不会被扩展之外的任何东西消耗。

您需要存储对指向contextStore对象的this的引用；

var contextStore = {
    'root_id': undefined,
    'setup': function() {
        var that = this; // Store reference here.
        chrome.bookmarks.getTree(function(tree) { 
           that.root_id = computed_thing; // does work!
        });
    }
    // ... etc ...
};

这相当于做；

var contextStore = {
    'root_id': undefined,
    'setup': function() {
        chrome.bookmarks.getTree(function(tree) { 
           contextStore.root_id = computed_thing; // does work!
        });
    }
    // ... etc ...
};

但是，您可以获得不在任何地方重用contextStore的好处。

this关键字可以绑定到不同的东西，这取决于你如何调用它。我不是javascript专家，但在a List Apart中有一个很好的解释。

解决方案是在使用my_function.apply(obj, [args])、my_function.call(obj, args)(现在调用(调用函数时显式绑定，或者预绑定函数以便稍后调用：my_function.bind(obj)。

作为一名python程序员，显式可能会让你感到高兴：-(

Matt的答案最终是更好的方法，因为它更加明确、简洁，并且不需要以某种方式调用或准备函数。我只是想试着解释一下发生了什么。

相关文章：