함수 배열 만들기 실용적인 이유?

Question

나는 폐쇄를 배우고있다. 자바 스크립트 모듈 패턴을 이해하지만 closure의 다른 "실용적인 응용 프로그램"처럼 루프에서 생성되고 배열로 푸시되는 함수의 문제를 피하는 것 같습니다.

나는 이것을 할 하나의 이유를 생각할 수 없다. 다음은 루프의 폐쇄 문제의 예는 여기에서 가져온 것입니다 : JavaScript closure inside loops – simple practical example

var funcs = []; 
for (var i = 0; i < 3; i++) {  // let's create 3 functions 
    funcs[i] = function() {   // and store them in funcs 
    console.log("My value: " + i); // each should log its value. 
    }; 
} 
for (var j = 0; j < 3; j++) { 
    funcs[j]();      // and now let's run each one to see 
} 

언제 당신은 이제까지 실제 소프트웨어에서 이런 짓을 했을까? 나는 실망했다. factory을 작성 했으므로 정상적으로 작동하므로 여기서 실제 응용 프로그램을 보지 못했습니다.

Answer 1

1 주일 전 간단한 막대 그래프를 그리기 위해 노력하고있었습니다. 그래프는 비교 대상의 속성에 대한 특정 값을 비교합니다. 그래프는 양수와 음수를 모두 표시 할 수 있지만, 경우에 따라 모든 수치가 음수이거나 모두 양수입니다.

이 8 경우가 밝혀 :

1. 이 세트에 모두 표시이, 나는 그리기 해요 그래프입니다 부정적인 최소
2. 세트에서 모두 징후가있다 및 내가 그리는 그래프는 양의 최대 값입니다.
3. 집합에 두 기호가 있으며, 그리는 그래프는 최소가 아닌 음수 값입니다.
4. 집합에 두 가지 기호가 있고 내가 그리는 그래프는 최대 값이 아닌 양수 값입니다.
5. 모든 값은 제외하고, I 드로잉있어 그래프
6. 모든 값이 양수 마이너스 최소이고, I는 드로잉있어 그래프는 양의 최대
7. 모든 값이 음수 대한 것이며 내가 그리는거야 그래프는 모든 값이 긍정적 최소
8. 아니라 음의 값이고, 나는 그리기있어 그래프는 최대

는, 내가 만든 점을 감안 아니라 양의 값입니다 특정 값 집합의 자질을보고 0과 7 사이의 수를 제공하는 간단한 함수입니다. 그런 다음 f 함수는 결과 값이 나타내는 함수를 호출합니다. 그렇게하면 혼란 스러울 수있는 코드를 깨끗하게 분리 할 수 ​​있습니다. 또한 디버깅을 위해 "상황 코드"를 기록하거나 달리 기억할 수 있습니다. 특정 종류의 막대가 틀리게 보이는 경우, 나는 어떤 기능을보아야하는지 정확하게 알고 있습니다.

Answer 2

내 게임 엔진의 클로저 배열에 대한 내 상황을 더 잘 설명합니다.

먼저 나는 게임 오브젝트를 수정 재미있는 구성 요소를 만들 :

• X/Y 위치
• 회전
• 규모

그들은 같은 것을 보일 것이다 :

class ComponentA extends Component { 
    update() { 
     console.log('Component A') 
    } 
} 

class ComponentB extends Component { 
    update() { 
     console.log('Component B') 
    } 
} 

을

다음으로, w henever 나는 gameObject가 해당 객체의 기능에 접근하도록하고 싶습니다. 단지 그 구성 요소를 gameObject에 연결합니다. 이제 모든 프레임마다 업데이트 기능이 실행됩니다. ComponentA에서 위의 gameObject1 및 gameObject2주에서 동일한 기능을

let gameObject1 = new GameObject() 
gameObject1.addComponent(ComponentA) // component instance gets added to global array 

let gameObject2 = new GameObject() 
gameObject2.addComponent(ComponentA) // component instance gets added to global array 
gameObject2.addComponent(ComponentB) // component instance gets added to global array 

하지만 gameObject2도 ComponentB에서 추가 기능이 있습니다 : 그것은 다음과 같이 보입니다.

class engine { 

    static components = [] 

    tick() { 
     // Here is what you need to pay attention to: 
     engine.components.forEach(comp => { 
      if(typeof comp == 'function') { 
       comp['update']() 
      } 
     }) 
     window.requestAnimationFrame(this.tick.bind(this)) 
    } 

    run() { 
     window.requestAnimationFrame(this.tick.bind(this)) 
     startRenderer() 
    } 
} 

new engine().run() 

즉 : s는 생성 된 우리의 gameObject '(우리는 당신의 질문과 관련된 곳이다) 엔진이 구성 요소의 배열을 통해 루프와 같은 자신의 update를 실행의 일단 지금

모든 내 엔진이 어떻게 작동하는지, 이것은 당신이하는 것과 매우 흡사합니다. 단지 그것을하는 다른 방법 일뿐입니다.