Javascript：Phaser 在另一個方法類中調用一個方法

Question

我在使用 Phaser 進行 javascript 開發時遇到了問題。 我嘗試在類的方法中調用方法，但出現錯誤。

這是我的課：

import Enemy from '../classes/Enemy';
import Turret from '../classes/Turret';
import Bullet from '../classes/Bullet';


class GameScene extends Phaser.Scene {

    constructor() {
        super({
            key: 'GameScene'
        });
    }

    preload()
    {
        this.load.image('turret', './www/assets/tour_simple.png');
    }

    drawGrid(graphics)
    {
        graphics.lineStyle(1, 0x0000ff, 0.8);
        for(var i = 0; i < 8; i++)
        {
            graphics.moveTo(0, i * 64);
            graphics.lineTo(640, i * 64);
        }
        for(var j = 0; j < 10; j++)
        {
            graphics.moveTo(j * 64, 0);
            graphics.lineTo(j * 64, 512);
        }
        graphics.strokePath();
    }

    canPlaceTurret(i, j)
    {
        return this.map[i][j] === 0;
    }

    placeTurret(pointer)
    {
        var i = Math.floor(pointer.y/64);
        var j = Math.floor(pointer.x/64);
        if(this.canPlaceTurret(i, j)) {
            var turret = this.turrets.get();
            if (turret)
            {
                turret.setActive(true);
                turret.setVisible(true);
                turret.place(i, j);
            }
        }
    }

    damageEnemy(enemy, bullet)
    {
        // only if both enemy and bullet are alive
        if (enemy.active === true && bullet.active === true) {
            // we remove the bullet right away
            bullet.setActive(false);
            bullet.setVisible(false);

            //todo mettre dans une classe constante
            var BULLET_DAMAGE = 25;
            // decrease the enemy hp with BULLET_DAMAGE
            enemy.receiveDamage(BULLET_DAMAGE);
        }
    }



    create() {
        this.add.text(200, 230, 'good!', { fill: '#0f0' });

        var graphics = this.add.graphics();

        this.map = [[ 0,-1, 0, 0, 0, 0, 0, 0, 0, 0],
            [ 0,-1, 0, 0, 0, 0, 0, 0, 0, 0],
            [ 0,-1,-1,-1,-1,-1,-1,-1, 0, 0],
            [ 0, 0, 0, 0, 0, 0, 0,-1, 0, 0],
            [ 0, 0, 0, 0, 0, 0, 0,-1, 0, 0],
            [ 0, 0, 0, 0, 0, 0, 0,-1, 0, 0],
            [ 0, 0, 0, 0, 0, 0, 0,-1, 0, 0],
            [ 0, 0, 0, 0, 0, 0, 0,-1, 0, 0]];

        //TODO creer une classe qui dessine le path
        // the path for our enemies
        // parameters are the start x and y of our path
        this.path = this.add.path(96, -32);
        this.path.lineTo(96, 164);
        this.path.lineTo(480, 164);
        this.path.lineTo(480, 544);

        graphics.lineStyle(3, 0xffffff, 1);
        // visualize the path
        this.path.draw(graphics);

        this.enemies = this.physics.add.group({ classType: Enemy, runChildUpdate: true });

        this.nextEnemy = 0;

        var graphics = this.add.graphics();
        this.drawGrid(graphics);

        this.turrets = this.add.group({ classType: Turret, runChildUpdate: true });
        this.input.on('pointerdown', this.placeTurret);

        this.bullets = this.physics.add.group({ classType: Bullet, runChildUpdate: true });

        this.physics.add.overlap(this.enemies, this.bullets, this.damageEnemy);
    }

    update(time, delta) {
        if (time > this.nextEnemy)
        {
            var enemy = this.enemies.get();
            console.log(enemy);
            if (enemy)
            {
                enemy.setActive(true);
                enemy.setVisible(true);
                // place the enemy at the start of the path
                enemy.startOnPath();

                this.nextEnemy = time + 2000;
            }
        }
    }


}

export default GameScene;

在我的游戲過程中出現錯誤：

TypeError: this.canPlaceTurret 不是函數

錯誤來自我調用placeTurret方法的canPlaceTurret方法。

我嘗試了一些事情，比如向我的班級添加一個屬性： self = this; 並用self.canPlaceTurret調用我的函數，但問題總是存在。 我認為這是一個范圍問題，但我不知道如何解決。

另一個重要信息：我們正在使用 Webpack

謝謝閱讀：）。

Answer 1

嘗試更換：

this.input.on('pointerdown', this.placeTurret);

和：

this.input.on('pointerdown', pointer => this.placeTurret(pointer));

（根據您在下面的評論略作編輯）

基本上，當您將方法作為回調傳遞時，它就變成了一個簡單的函數引用。 當稍后調用該函數時， this將不會引用您期望的類實例，因為它不再在您的類的上下文中調用。

通過使用粗箭頭語法，您創建了一個特定的回調，並明確告訴它在當前上下文中調用該方法（如在定義所述回調時） this 。

或者，您也可以這樣做：

this.input.on('pointerdown', this.placeTurret.bind(this));

this 不是創建一個新的匿名函數，而是將您的方法作為參考（就像它開始時所做的那樣），但手動將當前this綁定到它。

請參閱這篇文章以獲得更詳細的解釋。

Answer 2

調用 canPlaceTurret() 時，如果不在 placeTurret() 方法中使用this關鍵字，它會不會工作？

 placeTurret(pointer)
        {
            var i = Math.floor(pointer.y/64);
            var j = Math.floor(pointer.x/64);
            if(canPlaceTurret(i, j)) {
                var turret = this.turrets.get();
                if (turret)
                {
                    turret.setActive(true);
                    turret.setVisible(true);
                    turret.place(i, j);
                }
            }
        }