익명 함수를 사용하여 지역 변수를 감싸고 새 함수를 반환합니다.

Question

익명 함수 질문을해도 무척 유감 스럽지만 자바 스크립트는 다른 커브 공을 던졌습니다. 내가

for (i = 0; i < rows; i++) 
{ 
    for (j = 0; j < cols; j++) 
    { 
     index = i * cols + j; 
     circles [ index ] = new Kinetic.Circle({...}); 
     ... 
    } 
} 
... 
for (i = 0; i < rows; i++) 
{ 
    for (j = 0; j < cols; j++) 
    { 
     index = i * cols + j; 
     anims [ index ] = new Kinetic.Animation({func: function (frame) 
      { 
       (function (innerCircle) 
       { 
        ... 
       } (circles [ index ])); 
      }, 
      node: layer 
     } 
    ); 
    } 
} 

내 의도를 다음 원의 수를 만들 수 있도록 (these tutorials 다음)처럼 애니메이션을 KineticJS을 사용하고

는 익명 함수를 만들 때 index의 현재 값을 전달하는 것입니다. 문제는 마지막 이미지에만 애니메이션이 적용되고 이유를 파악할 수 없다는 것입니다. 여기에 full jsfiddle

Answer 1

새 변수 범위를 작성해야하는 함수의 위치가 잘못되었습니다. 그것은 함수가 전달되는 바깥에 있어야하고 return 새로운 기능이 있어야합니다.

반환 된 함수는 원하는 값에 액세스 할 수 있습니다.

for (i = 0; i < rows; i++) 
{ 
    for (j = 0; j < cols; j++) 
    { 
     index = i * cols + j; 
     anims [ index ] = new Kinetic.Animation({func: function(innerCircle) { 
                 return function (frame) { 

                 }; 
                 })(circles[index]), 
      node: layer 
     } 
    ); 
    } 
} 

---

하지만 솔직히,이 같은 인라인 기능하지 않습니다. 함수를 반환하는 명명 된 함수를 만들면 훨씬 더 명확 해집니다.

function makeFunc(innerCircle) { 
    return function (frame) { 
      // you can use innerCircle in here 
    }; 
} 

for (i = 0; i < rows; i++) { 
    for (j = 0; j < cols; j++) { 
     index = i * cols + j; 
     anims [ index ] = new Kinetic.Animation({ 
     func: makeFunc(circles[index]), 
     node: layer 
     }); 
    } 
} 

어떤 사람들은 어떤 이유로 그 인라인 함수를 사랑하지만 그들은 단지 혼란을 추가 생각합니다. 명명 된 함수는 코드를 조금 분해하고 코드에 약간의 설명서를 추가합니다.

또한 루프의 모든 반복에서 새로운 인라인 함수를 작성하지 않기 때문에 약간 더 효율적입니다. 대신 당신은 핸들러를 만들기 위해 같은 것을 재사용하고있다.