在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

您可以使用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變量是「內」單擊處理匿名函數可用，因爲他們都宣稱範圍相同（在PAGINATE功能）「內」。

然而，一旦你的匿名函數內部，this指的是功能，而不是功能，它在聲明中調用對象。如果您需要訪問this的「分頁」來電者，那麼你就可以像其他人說的那樣緩存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 2

這是因爲內部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 3

在這個特殊的例子，這是更好地宣佈parentlist爲VAR函數PAGINATE（）

該變量將是封閉在PAGINATE功能點擊功能訪問。

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

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

Answer 4

不要在變量前加this.。 paginate()範圍內的this是全局範圍（窗口）。

如果您將其定義爲var parentlist = elt.find('ul');，則parentlist將在click處理程序中處於可用狀態。