javascript - 访问闭包内的类成员

Question

我在这个方法中有一个类方法和一个闭包。如何从闭包中访问类成员？

Person = function(x) {
  this.x = x;
}

Person.prototype = {
   myMethod: function() {
      $('#myBtn').click( function() {
         // how to access to this.x? the this reference points in another context 
      });
   }
}

Answer 1

使用Function.prototype.bind将在这里帮助您

Person = function(x) {
  this.x = x;
}

Person.prototype.myMethod = function() {
  $('#myBtn').click(function() {
    this.x;
  }.bind(this));
};

---

您也可以在这里使用更好的代码分离

Person = function(x) {
  this.x = x;
};

Person.prototype.myMethod = function {
  $('#myBtn').click(this.clickHandler.bind(this));
};

Person.prototype.clickHandler = function(event) {
  console.log(this.x);
};

请注意，如果您想支持旧版浏览器，请查看es5-shim

---

编辑

我在大约 6 个月后重新审视这个问题，我可能会以不同的方式编写上面的代码。我喜欢这里的私人/公开曝光。此外，不需要任何奇特的绑定或类似的东西^.^

function Person(x, $button) {

  // private api
  function onClick(event) {
    console.log(x);
  }

  function myMethod() {
    $button.click();
  }

  // exports
  this.x        = x;
  this.myMethod = myMethod;

  // init
  $button.click(onClick);
}

var b = $("#myBtn"),
    p = new Person("foo", b);

p.x;          // "foo"
p.myMethod(); // "foo"
btn.click();  // "foo"

Answer 2

只需分配this给其他一些变量，例如_this：

Person = function(x) {
    this.x = x;
}

Person.prototype = {
    myMethod: function() {
        var _this = this;
        $('#myBtn').click( function() {
            console.log(_this.x);
        });
    }
}

Answer 3

Person = function(x) {
  this.x = x;
}

Person.prototype = {
   myMethod: function() {
      var self = this;
      $('#myBtn').click( function() {
         // Access to self.x 
      });
   }
}

Answer 4

代理在这里将非常有用。

现在，您正在为 click 事件分配一个匿名函数。默认情况下，上下文将是事件的并与您的对象分开。

使用代理，您可以将特定上下文分配给（回调）函数。因此，当事件触发时，您正在处理您的 person 对象。

1. 在单独的函数中分配事件处理程序，例如initialize(), 并myMethod()成为处理程序。

2. 使用 aJQuery.proxy()将对象的上下文分配给事件处理程序。

   Person.prototype = {
       initialize: function() {
           $('#myBtn').click($.proxy(this.myMethod, this));
       },
   
       myMethod: function(event) {
        ...
        console.log(this); // Person object
       }
   }
   

---

只是为了引出我和@naomik 的解决方案之间的区别：

• JQuery.proxy()是对上下文的临时或狭窄分配。
• Function.prototype.bind()是一个强大的上下文分配。该方法将“永远”绑定到您给它的上下文。