JavaScript 来自 Chrome 扩展 api 的 OOP 和异步方法

Question

我正在制作一个 chrome 扩展，它使用了小块文本。我制作了一个 class，每个块都是 class 的一个实例。这样：

function Block(bid){
    var block = Object.create(Block.prototype);
    block.title = "Default"
    block.content = "";
    block.bid = bid;
    return block;
};

Block.prototype.setTitle = function (){
    chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
        this.title = tabs[0].title;
    });
};

我的问题是，当我在块 object 上调用 setTitle() 时，该方法没有更改标题属性；它停留在 "Default"。我知道这与同步和异步方法有关，但我完全无法解决这个问题。

如有任何帮助，我们将不胜感激！

Answer 1

为避免进一步讨论，我假设这是一个范围界定问题。您能否尝试使用以下代码：

function Block(bid){
    var block = Object.create(Block.prototype);
    block.title = "Default"
    block.content = "";
    block.bid = bid;
    return block;
};

Block.prototype.setTitle = function (){

    var callback = function(tabs) {
        this.title = tabs[0].title;
    }

    chrome.tabs.query({currentWindow: true, active: true}, callback.bind(this));
};

Answer 2

这里的问题是你在回调中的 this.title 不是引用 Block 实例而是引用回调所以你只需要在变量中声明实例引用并使用它。

function Block(bid){
    var block = Object.create(Block.prototype);
    block.title = "Default"
    block.content = "";
    block.bid = bid;
    return block;
};

Block.prototype.setTitle = function (){

    var self = this; // Get the reference to the instance
    chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
        self.title = tabs[0].title;
    });
};

Answer 3

Gyus，我不确定为什么每个人都复制这样一个构造函数，它确实创建了 returns 一个 Block 实例。

虽然问题得到了回答，但我建议采用以下方式来安排代码，同时防止范围问题。

function Block(id) {
    this.id = id;
    this.title = 'Default';
    this.content = '';
}

Block.prototype.setTitleByCurrentTab = function() {
    chrome.tabs.query({currentWindow: true, active: true},
                      this.setTitleByTab.bind(this));
}

Block.prototype.setTitleByFirstTab = function(tabs) {
    this.title = tabs[0].title;
}

如果有 2 个方法似乎是一种开销，可以按照 Mjh 的建议将后一个方法转换为 setter 中的闭包。

我只想在这里强调两件事：

最小构造函数
方法命名 - setTitle() 听起来像一个普通的 setter，客户可以期望那里有一个参数，除非它（以某种方式）知道实现细节

JavaScript 来自 Chrome 扩展 api 的 OOP 和异步方法

JavaScript OOP and asynchronous methods from Chrome extension api

javascript

oop

asynchronous

google-chrome

google-chrome-extension