实例方法不是“功能”[重复]答案

【问题标题】：Instance method not a 'FUNCTION' [duplicate]实例方法不是“功能”[重复]
【发布时间】：2015-08-18 07:03:11
【问题描述】：

我似乎无法弄清楚出了什么问题。我尝试在设置之前声明更新，但在另一个实例方法上调用实例方法仍然有问题。

我相信这应该可行。但我可以是wrong。现在我知道 'this' 可能会在作用域发生变化时发生变化，反正我不必引用实例来调用我的方法！

我该如何解决这个问题？

function MainGameScene(renderer , screenSize)
{
    PIXI.loader
        .add("_assets/textures/sprites.json")
        .load(this.setup);  
}

MainGameScene.prototype.update = function()
{       
    var now = Date.now();

    var delta = (now - this.mLastCalledTime);
    this.mLastCalledTime = now;
    this.mElapsed += (delta / 1000);

    this.mSpaceShip.getSprite().x += this.mSpaceShip.getVelocity().x;
    this.mSpaceShip.getSprite().y += this.mSpaceShip.getVelocity().y;

    if(this.mCurrentScore != this.mSpaceShip.getHits())
    {
        this.mCurrentScore = this.mSpaceShip.getHits();
        scoreText.setText(this.mCurrentScore);
    }

    if(this.mElapsed >= MAX_SPAWN_RATE)
    {
        this.generateEnemy();
        this.mElapsed = 0.0;
    }

    for(var e in this.mEnemyShipsArray)
    {
        var index = parseInt(e);
        var enemy = this.mEnemyShipsArray[index];

        enemy.getSprite().y += enemy.getVelocity().y;

        if(enemy.getSprite().y > this.mScreenSize.height + 50 || enemy.isMarkedDestroy())
            this.mEnemyShipsArray.splice(index , 1);
    }

    this.mRenderer.render(this.mStage);
    requestAnimationFrame(this.update);
}

MainGameScene.prototype.setup = function()
{   
    this.mRenderer = renderer;
    this.mScreenSize = screenSize;

    this.MAX_SPAWN_RATE  = 3.0;
    this.SPACESHIP_SPPED = 5.0;
    this.ENEMYSHIP_SPEED = 3.8;

    this.mSpaceShip = {};
    this.mEnemyShip = {};

    this.mLastCalledTime = Date.now();
    this.mElapsed = 0.0;

    this.mStyle = 
    {
        font   : 'bold italic 36px Arial'
      , fill   : '#F7EDCA'
      , stroke : '#4a1850'
      , strokeThickness : 5
    }

    this.mCurrentScore = 0;         
    this.mScoreText = new PIXI.Text(this.mCurrentScore , this.mStyle);
    this.mScoreText.x = screenSize.width / 2.0;
    this.mScoreText.y = 30.0;

    this.mEnemyShipsArray = new Array();

    this.mStage = new PIXI.Container(); 

    this.mSpaceShip = new SpaceShip(this.mStage , "spaceship.png");
    this.mSpaceShip.setPixelPosition({x : 200 , y : 550});
    this.mSpaceShip.perceiveEnemyShips(this.mEnemyShipsArray);

    this.mStage.addChild(this.mSpaceShip.getSprite());
    this.mStage.addChild(this.mSpaceShip.getSprite());

    document.onkeydown = function()
    {
        var e = e || window.event;

        if(e.keyCode == '38') // up
        {
            //if((spaceship.getSprite().y + (spaceship.getSprite().height / 2.0)) <= screenSize.height)
                this.mSpaceShip.setVelocityY(-SPACESHIP_SPEED);
        }           

        if(e.keyCode == '40') // down
        {
            //if((spaceship.getSprite().y - (spaceship.getSprite().height / 2.0)) >= 0)
                this.mSpaceShip.setVelocityY(SPACESHIP_SPEED);
        }           

        if(e.keyCode == '37') // left
        {
            //if((spaceship.getSprite().x - (spaceship.getSprite().width / 2.0)) >= 0)
                this.mSpaceShip.setVelocityX(-SPACESHIP_SPEED);
        }           

        if(e.keyCode == '39') // right
        {
            //if((spaceship.getSprite().x + (spaceship.getSprite().width / 2.0)) <= screenSize.width)
                this.mSpaceShip.setVelocityX(SPACESHIP_SPEED);
        }
    }

    document.onkeyup = function()
    {
        var e = e || window.event;

        if(e.keyCode == '38' || e.keyCode == '40') // up and down
            this.mSpaceShip.setVelocityY(0);

        if(e.keyCode == '37' || e.keyCode == '39') // left and right
            this.mSpaceShip.setVelocityX(0);
    }

    self.update();
}

我是 JavaScript 新手，无法使用这种脚本语言处理实例。

我将不胜感激！

【问题讨论】：

哪条线路/电话导致错误
我很抱歉这行'this.update'。我试着呼应这个和自我的价值。这指向我正在使用的框架的 Loader 类。当加载程序完成加载文件时，将调用函数设置。我尝试回显自我，但它指向 Window。我认为那里没有任何肤浅的东西。它具有应有的价值。我的挫败感来自于我不知道如何掌握班级的“实例”。还有一点，如果this指向Loader类，那就是大问题了！对此的所有调用都来自 Loader 的实例。我不确定如何正确地做到这一点

标签： javascript

【解决方案1】：

你应该采用这种方法来使用嵌套函数：

MainGameScene.prototype.setup = function(){       
    this.mRenderer = renderer;
    var self = this;
    ....
    document.onkeydown = function(){
        self.mSpaceShip.setVelocityY(-SPACESHIP_SPEED);
        ....
    }
    ....
}

【讨论】：

哇，这就是 self 的用途。好的，稍等。我将尝试为“this”运行一些步骤。因为如果“this”完全指向框架的加载器，我仍然不能引用“MainGameScene”类实例。
这行不通。 this 仍然指向 Loader 类。

【解决方案2】：

看来我的问题与从另一个实例方法调用实例方法更相关。

我的“this”指针总是指向我正在使用的框架的 Loader 类。我似乎无法在 SO 中找到此处的链接，但我能够通过这样做来解决我的问题：

var loader = new PIXI.loaders.Loader();
loader.add("_assets/textures/sprites.json");
loader.once("complete" , this.setup.bind(this));
loader.load();

问题是，我必须将我对 setup 的方法调用绑定到 this。 this 总是根据功能范围而变化。

也许我会改用另一种 JavaScript 风格，比如使用 TypeScript 或 CoffeeScript，它可以让我轻松完成这些事情。

感谢您的帮助！

【讨论】：