범위 지정 문제, 콜백에서 함수를 호출 할 때

Question

캔버스 내부를 클릭하면 볼이 생성되고 클릭 된 위치로 이동합니다. 공이 그 위치에 도착하면 제거하려고합니다. 하지만 난 문제가 범위를 removeBall() 함수를 호출 할 때 생각합니다.

당신은 작업 예제 그녀를 찾을 수 있습니다 jsfiddle

/* 
    * Main app logic 
    */ 
    function Main() { 
    this.canvas = "canvas"; 
    this.stage = null; 
    this.WIDTH = 0; 
    this.HEIGHT = 0; 
    this.init(); 
    } 

    Main.prototype.init = function() { 
    console.clear(); 
    this.stage = new createjs.Stage(this.canvas); 
    this.resize(); 
    //start game loop 
    createjs.Ticker.setFPS(30); 
    createjs.Ticker.addEventListener("tick", this.gameLoop); 
    //click event handler 
    this.stage.on("stagemousedown", function(evt) { 
     main.fireBall(evt); 
    }); 
    }; 

    Main.prototype.fireBall = function(evt) { 
    var bal = new Bal(evt.stageX, evt.stageY); 
    }; 

    Main.prototype.resize = function() { 
    //resize the canvas to take max width 
    this.WIDTH = window.innerWidth; 
    this.HEIGHT = Math.floor(window.innerWidth * 9/16); 
    this.stage.canvas.width = this.WIDTH; 
    this.stage.canvas.height = this.HEIGHT; 
    }; 

    Main.prototype.gameLoop = function() { 
    //game loop 
    main.stage.update(); 
    }; 

    /* 
    * Ball logic 
    */ 
    function Bal(toX, toY) { 
    this.toX = toX ; 
    this.toY = toY; 
    this.widthPerc = 8; 
    this.init(); 
    } 

    Bal.prototype.width = function() { 
    return Math.floor(main.stage.canvas.width/100 * this.widthPerc); 
    }; 

    Bal.prototype.init = function() { 
    //create a new ball 
    this.ball = new createjs.Shape(); 
    this.ball.graphics.beginFill("green").drawCircle(0, 0, this.width()); 
    this.ball.x = (main.stage.canvas.width/2) - (this.width()/2); 
    this.ball.y = main.stage.canvas.height - 20; 
    main.stage.addChild(this.ball);  
    this.move(); 
    }; 

    Bal.prototype.move = function() { 
    //create a tween to cliked coordinates 
    createjs.Tween.get(this.ball).to({ 
     x: this.toX , 
     y: this.toY , 
     scaleX:0.4,scaleY:0.4, 
     rotation: 180 
     }, 
     750, //speed 
     createjs.Ease.none 
    ).call(this.removeBall); // <---- How can i pass the correct scope to the called function? 
    }; 

    Bal.prototype.removeBall = function() { 
    //try to remove the ball 
    main.stage.removeChild(this.ball); 
    }; 

    var main = new Main(); 

Answer 1

확인 해결책을 발견! bind() 기능을 사용합니다.

Bal.prototype.move = function() { 
    console.log(this.toX +","+this.toY); 
    createjs.Tween.get(this.ball).to({ 
     x: this.toX , 
     y: this.toY , 
     scaleX:0.4,scaleY:0.4, 
     rotation: 180 
    }, 
    750, //speed 
    createjs.Ease.none 
).call(this.removeBall.bind(this)); 
}; 

Answer 2

바인드를 사용하는 위의 해결책이 있지만 훨씬 좋은 해결책이 있습니다. Bind는 모든 브라우저에서 사용할 수 있습니다 (특히 Safari 5.1는 최신 브라우저 임). http://kangax.github.io/es5-compat-table/#Function.prototype.bind

TweenJS에는 call()을 사용할 때 범위 지정 기능이 내장되어 있습니다. 범위를 세 번째 인수로 전달하십시오.

Ball.prototype.move = function() { 
    console.log(this.toX +","+this.toY); 
    createjs.Tween.get(this.ball).to({ 
     x: this.toX , 
     y: this.toY , 
     scaleX:0.4,scaleY:0.4, 
     rotation: 180 
    }, 
    750, //speed 
    createjs.Ease.none 
).call(this.removeBall, null, this); 
}; 

두 번째 매개 변수로 함수 인수 배열을 전달할 수도 있습니다.

Tween.call(this.removeBall, [this.ball], this);