在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將在點擊處理程序中可用。