Question

我有一个对象文字，如下所示。在Init方法中，我为click事件设置了一个处理程序。稍后，当调用处理程序时，我想使用Bar关键字访问this属性。那时，this具有jQuery含义。

另外，为了清楚起见，我不想实现与选择器内联的函数。

var StackOver = {

    Bar: "MyBarValue",

    Init: function(){
        $("#postId").click(this.Foo);
    },

    Foo: function(eventObject){
        // here **this** is jQuery keyword
        // how do I access StackOver.Bar?
    }
}

如何在Foo内访问此对象文字的属性？

如果我使用构造函数文字，这可能很容易，这对我来说不合适：

var StackOver = function (){
    var self = this;

    function bar()
    {
        // I can use self here
    }
}

编辑我忘了提到我在这个对象文字中使用了Revealing Module Pattern，它隐藏了对象的私有属性。

Answer 1

其他人都在建议.bind，这是有道理的，但你也可能只能在闭包中引用对象本身：

Foo: function(eventObject) {
    console.log(StackOver.Bar);
}

Answer 2

一个选项：

Init: function(){
    $("#postId").click(this.Foo.bind(this));
}

另一种选择:(来自http://api.jquery.com/jquery.proxy/）

Init: function(){
    $("#postId").click($.proxy(this.Foo, this));
}

两者都采用this变量，因此您无法将this用于其他目的

但是，如果您无法使用this：

Init: function(){
    $("#postId").click(function (self) {
        return function (event) {
            return self.Foo(self, event);
        }
    }(this));
}

并在Foo中添加self参数。

Foo: function (self, event...) {
  ...
}

所有这一切，为什么你不能使用(function () {var self = this; ... }())？毕竟是揭示模块模式

Answer 3


var StackOver = {
    /*...*/
    Init: function(){
        $("#postId").click(this.Foo.bind(this));
    },
    /*...*/
    Foo: function(eventObject){
        // here **this** was actually the html element
        // now it's the old this.
        alert(this.Bar);
    }
}

Answer 4

我不确定为什么这必须是一个对象文字。如果你可以使用其他结构，你可以通过这样的揭示模块获得访问权限：

var StackOver = (function() {
    var bar = "MyBarValue",
        init = function(){
            $("#postId").click(foo);
        },
        foo = function(eventObject) {
            // here `this` might be a jQuery wrapper object
            // but you can access `bar` directly.
        };

    return {
        Bar: bar, // Or not.  Do you really want this public?
        Init: init,
        Foo: foo
    }
}())

在jQuery方法中访问对象文字的属性

4 个答案: