Question

执行以下操作是否有任何问题....

var myObject = {
    name: "Johnny",
    init: function() {
        $("body").mousemove(this.setStatus);
    },
    setStatus: function(ev) {
        $("body").append("<div>Mouse Move by: " + myObject.name + "</div>");
    }
};

myObject.init();

这是以这种方式创建类时引用对象属性的最佳方法（即从setStatus函数调用myObject.name）？

Answer 1

看起来您知道当触发this.setStatus时，上下文变量this将引用接收到该事件的元素（即您的<body>）而不是myObject 1}}。

但是你真的不应该在对象本身内引用myObject - 一个对象应该不知道它本身被称为什么。

要解决此问题，您可以将this作为附加参数传递给.mouseMove，因此：

$("body").mousemove(this, this.setStatus);

然后在您的事件处理程序中，您可以通过事件的data字段检索当前对象引用：

setStatus: function(ev) {
    var self = ev.data;
    $("body").append("<div>Mouse Move by: " + self.name + "</div>");
}

Answer 2

这很好。如果其他地方未使用setStatus，您可以将其移至匿名函数并将其传递给mousemove。

Answer 3

您需要确保this仍然可用。将函数传递给事件处理程序时，this将指向相关的DOM节点。

由于您使用的是jQuery，因此可以使用$.proxy()将函数内的this绑定到其他内容：

$("body").mousemove($.proxy(this.setStatus, this));

但是，通过其他方式提供原始this会更清晰：

var myObject = {
    name: "Johnny",
    init: function() {
        var self = this;
        $("body").mousemove(function(ev) {
            self.setStatus.call(this, ev, self);
        });
    },
    setStatus: function(ev, self) {
        $("body").append("<div>Mouse Move by: " + self.name + "</div>");
    }
};

Answer 4

这样很好。另一种方法是将匿名函数传递给mousemove：

var myObject = {
    name: "Johnny",
    init: function() {
        var thisObject = this;
        $("body").mousemove(function() {
            $("body").append("<div>Mouse Move by: " + thisObject.name + "</div>");
        });
    }
};

myObject.init();

请参阅fiddle

引用自己的对象属性

4 个答案: