javascript - 如何在 jQuery 中创建适当的闭包？

Question

这是我的代码示例:

var bar = function() {

  this.baz = function() {
    this.input = $('.input');
    this.input.bind("keydown keyup focus blur change", this.foo);
  }

  this.foo = function(event){
    console.log(this);
  }

}

显然，单击我的输入会在控制台中显示 input。我如何才能将 bar 改为 this？

Answer 1

发生这种情况是因为当您 bind一个事件，使用触发事件的 DOM 元素的上下文调用事件处理函数，this 关键字表示 DOM 元素。

要获得“bar”，您应该存储对外部闭包的引用:

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

  this.baz = function() {
    this.input = $('.input');
    this.input.bind("keydown keyup focus blur change", this.foo);
  }

  this.foo = function(event){
    console.log(this); // the input
    console.log(self); // the bar scope
  }
};

注意:如果调用 bar 函数时没有 new运算符，this 将成为窗口对象，baz 和 foo 将成为全局变量，小心!

但是我认为您的代码可以简化:

var bar = {
  baz: function() {
    var input = $('.input');
    input.bind("keydown keyup focus blur change", this.foo);
  },

  foo: function(event){
    console.log(this); // the input
    console.log(bar); // reference to the bar object
  }
};