在javascript函数范围内定义变量的最佳方法是什么？

Question

我想在paginate()范围内定义变量。 但是，使用this定义的任何变量（例如this.parentlist ）在jQuery click方法中不可用

var paginate = function(elt) {
          //would like to define variables within scope of paginate()
          //however, any variable defined with this (e.g. this.parentlist) is not available within the jQuery click method
          this.parentlist = elt.find('ul');
          var listitems = elt.find('li');
          this.listcount = this.list.find('li').size();
          var showitems = '3';

          this.numberofpages = ~~((this.count / this.show) + 1);

          this.parentlist.after('<ul class="links"></ul>');

          for(i=1;i<=this.numberofpages;i++) {
            $('.links').append('<li><a href="#'+i+'">'+i+'</a></li>')
          };

          //click a link
          $('.links a').click(function() {
            //this.parentlist is not available here
            listitems.hide();
            this.start = listitems.index() * showitems;
            this.end = (this.start + 1) * showitems;
            this.selected = listitems.slice(this.start,this.end).show().addClass('selected');
            console.log(this.selected);
            console.log(this.parentlist);
          }); 
  };

  paginate($('.pages'));

Answer 1

这是因为里面click事件处理this点可以固定在其上的事件处理程序附加元素。

你必须在处理程序之外声明一个变量然后使用它。 它仍然在paginate函数范围内。 尝试这个

var paginate = function(elt) {
          //would like to define variables within scope of paginate()
          //however, any variable defined with this (e.g. this.parentlist) is not available within the jQuery click method
          var parentlist = elt.find('ul');

          ..
          ..
          //click a link
          $('.links a').click(function() {

            //this.parentlist is not available here
            //Use parentlist instead of this.parentlist 
            ..
            ..

          }); 
  };

  paginate($('.pages'));

Answer 2

您可以使用var关键字在当前范围内声明变量。

//For example:
var paginate = function(){

    // create a local variable (local to "paginate function")
    var myvar = 7;

    // create the click handler
    $('.links a').click(function() {

        // access the local variable
        alert(myvar);

    });
}

myvar变量在单击处理程序匿名函数中“可用”，因为它们都在同一范围内（分页函数）声明。

但是，一旦你进入匿名函数， this引用了该函数的调用对象而不是它所声明的函数。如果你需要访问this作为“paginate”调用者，那么你可以缓存this变量像其他人一样说： var that = this; < - 这是声明一个局部变量（如上所述）并将其值设置this值。

因此，在您的示例中，您可以像这样更改它：

var paginate = function(elt) {

      var parentlist = elt.find('ul');
      var listitems = elt.find('li');
      var listcount = this.list.find('li').size();
      var showitems = '3';

      var numberofpages = ~~((this.count / this.show) + 1);

      parentlist.after('<ul class="links"></ul>');

      for(i=1;i<=numberofpages;i++) {
        $('.links').append('<li><a href="#'+i+'">'+i+'</a></li>')
      };

      //click a link
      $('.links a').click(function() {
        //this.parentlist is not available here
        listitems.hide();
        this.start = listitems.index() * showitems;
        this.end = (this.start + 1) * showitems;
        this.selected = listitems.slice(this.start,this.end).show().addClass('selected');
        console.log(this.selected);
        console.log(parentlist);
      }); 
};

paginate($('.pages'));

Answer 3

在这个特定的例子中，最好将parentlist声明为var函数paginate（）

然后可以在paginate函数中包含的click函数中访问该变量。

var paginate = function () {
     var parentlist = "some value";

     $('#selector').click(function () {
         alert(parentlist);
     });
};

Answer 4

不要this.变量添加前缀this. 。 paginate()范围内的this是全局范围（窗口）。

如果将其定义为var parentlist = elt.find('ul'); ， parentlist将在点击处理程序中可用。