javascript - 使用 jQuery 在回调函数中引用父对象

Question

我有一个动态生成的页面，其中包含一定数量(用户动态定义)的高级散点图。我打算创建一个定义散点图本身的 JavaScript 对象，即它采用一些参数、一些数据和一些容器 ID，并且将创建获得可视化所需的各种元素: Canvas 元素、工具栏等。为此，我从以下(简化的)类开始:

(function () {
    if (!this.namespace) { this.namespace = {};}

    this._instances = { index: 0 };

    this.namespace.ScatterPlot = function (containerId, file, options) {
        _instances.index ++;
        this.id          = this.containerId+"-"+_instances.index ;
        this.containerId = containerId ;
        _instances [this.id] = this;

        // ... Do stuffs with file and options ...

        // Initialize elements once the DOM is ready
        $(this.updateDOM);
    }

    namespace.ScatterPlot.prototype = {
        updateDOM: function() {
            $("<canvas>")
                .click(clickCallback)
                .appendTo("#"+this.containerId);
            //(...)
        },

        clickCallback: function() {
            alert("Some click: "+this.id);
        }
    }


})();

每个对象都可以通过以下方式创建:

var v1 = new namespace.ScatterPlot("container1", "foo", "foo");
var v2 = new namespace.ScatterPlot("container2", "foo", "foo");

这里有两个问题:(1) 在 updateDOM 中，“this”没有引用我的初始 ScatterPlot 对象，这意味着这个示例将永远无法工作，(2) 同样，clickCallback 将无法引用带有“this”的散点图。

我是 javascript 新手，而且我仍然在努力理解 javascript 中 OO 编程的逻辑，所以问题是:我在这里走错了方向吗？经过一番挖掘，我可以通过将其传递给 updateDOM 来大致实现我想要的目标:

$(this.updateDOM(this)); // This blows my eyes but does the trick, at least partially

updateDOM: function(that) {
    $("<canvas>")
        .click(that.clickCallback)
        .appendTo("#"+that.containerId);
    //(...)
},

clickCallback: function() {
    // Not working either... Should pass 'that' to the function too
    alert("Some click: "+this.id);
}

但我觉得这种模式不太优雅......而且关于点击回调的问题也没有解决。

想法？

Answer 1

看看MDN's introduction to the this keyword .

处理该问题的标准方法是使用 that 变量 - 不是作为参数，而是在单独的函数中:

var that = this;
$(function() {
    that.updateDOM();
});

// or

$(this.getClickCallback());
...
namespace.ScatterPlot.prototype.getClickCallback =  function() {
    var that = this;
    return function clickCallback(e) {
        alert("Some click: "+that.id);
    };
};

或者，您始终可以使用 .bind() (或 $.proxy 对于较旧的浏览器)，它以更通用的方式完成第二个示例的功能:

$(this.clickCallback.bind(this));