Javascript: Özel bir nesne yöntemini olay dinleyicisine bağlama

Question

Javascript'in olay işleyici yönüne takılıyorum.

rowCells [j], benzersiz bir nesneye yapılan başvurudır. galleryCell ayrıca yeni oluşturulan nesneye de bir başvuru. İkisinin birbirine bağlanması gerekçesiyle duruyor. Bununla birlikte, olay dinleyicisinin düzgün çalışması için iki referansın bir araya geldiği görülmemektedir. Tüm hücreler aynı kesin şeylere atanır (son galleryCell nesnesi).

GaleriCell değişkeni, her yinelemede yeni bir başvuru almak için bir döngü içinde yer alır. Bu referanslar neden kaybediliyor?

function TypeGallery (galleryObj) 
{ //receives the <div> element that contains rows and cells of a gallery 

    //Properties -------------- 
    var galleryCellArr = []; //array of galleryZoomCell objects 

    //Methods ----------------- 
    var Initialize = function() 
    { 
     var rows  = galleryObj.children; 
     var rowCount = rows.length; 
     for (var i=0;i<rowCount;i++) 
     { 
     var rowCells  = rows[i].children; 
     var rowCellCount = rowCells.length; 
     for (var j=0;j<rowCellCount;j++) 
     { 
      var sliderObj = new TypeSlider(300,1,false); 
      var galleryCell = new TypeGalleryZoomCell(rowCells[j],sliderObj) 
      galleryCellArr.push(galleryCell); 

      rowCells[j].onmousedown = function() {galleryCell.Deploy();}; 
      rowCells[j].onmouseup = function() {galleryCell.Retract();}; 
     } 
     } 
    } 

    //Initialization 
    Initialize(); 
} 

Answer 1

deneyin böyle bir for döngüsü içindeki bir javascript kapatma koymak:

function TypeGallery (galleryObj) 
{ //receives the <div> element that contains rows and cells of a gallery 

    //Properties -------------- 
    var galleryCellArr = []; //array of galleryZoomCell objects 

    //Methods ----------------- 
    var Initialize = function() 
    { 
     var rows  = galleryObj.children; 
     var rowCount = rows.length; 
     for (var i=0;i<rowCount;i++) 
     { 
     var rowCells  = rows[i].children; 
     var rowCellCount = rowCells.length; 
     for (var j=0;j<rowCellCount;j++) 
     { 
      (function(j) { 

       var sliderObj = new TypeSlider(300,1,false); 
       var galleryCell = new TypeGalleryZoomCell(rowCells[j],sliderObj) 
       galleryCellArr.push(galleryCell); 

       rowCells[j].onmousedown = function() {galleryCell.Deploy();}; 
       rowCells[j].onmouseup = function() {galleryCell.Retract();}; 

      })(j); 
     } 
     } 
    } 

    //Initialization 
    Initialize(); 
} 

Answer 2

Tamam, ben Javascript ve blok-kapsam sınırlaması artık konuları anlamak. Ben ikinci bir olası düzeltme keşfetti Yol boyunca

:
'var' ile yerine herhangi itirazlar veya uyarılar var mıdır döngüler için içeride 'let'?
Bu kod, söyleyebileceğim kadar iyi çalışıyor. Herhangi bir gizli tehlike var mı?

var Initialize = function() 
    { 
     var rowsArr = galleryObj.children; 
     var rowCount = rowsArr.length; 
     for (let i=0;i<rowCount;i++) 
     { //Javascript does not understand block-scope unless the let keyword 
     let rowCellsArr = rowsArr[i].children; 
     let rowCellCount = rowCellsArr.length; 
     for (let j=0;j<rowCellCount;j++) 
     { 
      //Attach (rowCellsArr[j]); 

      let sliderObj = new TypeSlider(300,1,false); 
      let galleryCell = new TypeGalleryZoomCell(rowCellsArr[j],sliderObj); 
      galleryCellArr.push(galleryCell); 

      galleryCellArr[galleryCellArr.length-1].cell.onmousedown = function() {galleryCell.Deploy();}; 
      galleryCellArr[galleryCellArr.length-1].cell.onmouseup = function() {galleryCell.Retract();}; 

     } 
     } 
    }