引用自己的对象属性

Referencing own object properties

本文关键字：属性 对象 自己的 引用      更新时间：2023-09-26

做以下操作有问题吗....

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)?

看起来您已经意识到，当this.setStatus被触发时，上下文变量this将引用接收事件的元素(即您的<body>)而不是myObject。

然而，你真的不应该在对象本身中引用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>");
}

这很好。如果setStatus没有在其他地方使用，您可以将其移动到一个匿名函数并将其传递给mousemove。

您需要确保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>");
    }
};

这样就可以了。另一种方法是向mousemove传递一个匿名函数:

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

看到小提琴

相关文章：