자바 스크립트 입력 이벤트 : retain() 루프 변수

Question

몇 가지 객체를 작성하고 관리하기 위해 생성자/프로토 타입 접근 방식을 사용하는 앱을 개발했습니다. JavaScript 및 jQuery를 사용하여 프로토 타입 중 하나는 익명 함수가 onclick 이벤트에 선언되는 입력 필드를 만듭니다.

익명 함수 내에서 외부 참조 (var = this)를 사용하여 기본 객체에 쉽게 액세스 할 수 있으며 입력 객체 자체에 연결된 속성에 액세스 할 수 있습니다. 그러나, 내 입력 필드는 for() 루프 내에서 빌드되며 루프 (유명한 "var i"를 사용하여 반복)에 의해 반복되는 반복 변수를 유지해야합니다.

"i"값이 참조로 전달되므로 모든 입력에 항상 마지막 값 "i"가 유지됩니다. 그래서 나는 입력 객체에 "i"속성을 부여함으로써 해결 방법을 발견했다.

제 질문은 이것이 좋은 접근 방법입니까? 아니면 다른 방법으로이 작업을해야합니까? ... 통해 반복 시도

대신 for()

// Let's create the constructor 
function familly(motherName,fatherName,children) { 
    // We give to the properties their values 
    this.motherName = motherName; 
    this.fatherName = fatherName; 
    this.children = children; 
} 

// Then we create a prototype that creates an input field for each child 
familly.prototype.createChildrenInputs = function() { 

    // I declare a variable that will serve as a reference to the main object (some people would name it "that") 
    var famillyObject = this; 

    // We pass into a loop all the children existing in the object property 
    var children = this.children; 
    for(var i in children) { 

     // We create the input field 
     var input = document.createElement('input'); 
      $(input).val(i); 

      // !!! WORKAROUND !!! : I attach the "i" variable as a property to the input 
      input.i = i; 

      $(input).on('click', function() { 

       // 1. The main object is accessible through the var famillyObject 
       console.log(famillyObject); 

       // 2. The value of the element is accessible with this.value 
       console.log(this.value); 


       // !!! HOWEVER !!! 
       // --------------- 

       // 3. The var "i" will always return "2" 
       console.log(i); 
       // 4. But the var "this.i" will show the good value (0, 1 or 2), since the reference was turned into a value with the workaround 
       console.log(this.i); 

      }); 
     document.body.appendChild(input); 
    } 
} 

var mother = 'Nancy'; 
var father = 'Eric'; 
var children = [ 
    { 
     'name':'Stephan', 
     'gender':'male' 
    }, 
    { 
     'name':'Lois', 
     'gender':'female' 
    }, 
    { 
     'name':'Andrew', 
     'gender':'male' 
    } 
]; 

var newFamilly = new familly(mother,father,children); 
newFamilly.createChildrenInputs(); 

Answer 1

이 항목은 잘 SO에 덮여 있지만 일부 주변 청소 장치도 가능하기 때문에 내가 대답을 제공하고 있습니다 : 여기

코드입니다 this.children과 .forEach(). 매 반복마다 함수 인수는 i을 비롯한 모든 로컬 변수를 포함하는 클로저를 형성합니다.

familly.prototype.createChildrenButtons = function() { 
    var famillyObject = this; 
    this.children.forEach(function(child, i) { 
     var $input = $('<input />').val(i).on('click', function() { 
      console.log(famillyObject); 
      console.log(this.value); 
      console.log(i); 
     }); 
     $(document).append($input); 
    }); 
};