Question

我正在浏览HTML5游戏教程并遇到了以下功能。任何人都可以解释这个功能是如何工作的吗？

 var super_update = self.update;
    self.update = function(){
            super_update();
            self.attackCounter += self.atkSpd;
    }

我不确定为什么你需要这种类型的功能，逻辑似乎令人困惑。

为什么我们需要一个名为super_update的变量？

//------------------------- Full code -------------------//


Player = function(){
        var self = Actor('player','myId',50,40,30,5,20,20,'green',10,1);

        self.updatePosition = function(){
                if(self.pressingRight)
                        self.x += 10;
                if(self.pressingLeft)
                        self.x -= 10;  
                if(self.pressingDown)
                        self.y += 10;  
                if(self.pressingUp)
                        self.y -= 10;  


        var super_update = self.update;
        self.update = function(){
                super_update();
                if(self.hp <= 0){
                        var timeSurvived = Date.now() - timeWhenGameStarted;           
                        console.log("You lost! You survived for " + timeSurvived + " ms.");            
                        startNewGame();
                }
        }

        self.pressingDown = false;
        self.pressingUp = false;
        self.pressingLeft = false;
        self.pressingRight = false;
        return self;

}

Entity = function(type,id,x,y,spdX,spdY,width,height,color){
        var self = {
                type:type,
                id:id,
                x:x,
                y:y,
                spdX:spdX,
                spdY:spdY,
                width:width,
                height:height,
                color:color,
        };
        self.update = function(){
                self.updatePosition();
                self.draw();
        }
        self.draw = function(){
                ctx.save();
                ctx.fillStyle = self.color;
                ctx.fillRect(self.x-self.width/2,self.y-self.height/2,self.width,self.height);
                ctx.restore();
        }
        self.getDistance = function(entity2){   //return distance (number)
                var vx = self.x - entity2.x;
                var vy = self.y - entity2.y;
                return Math.sqrt(vx*vx+vy*vy);
        }

        self.updatePosition = function(){
                self.x += self.spdX;
                self.y += self.spdY;

                if(self.x < 0 || self.x > WIDTH){
                        self.spdX = -self.spdX;
                }
                if(self.y < 0 || self.y > HEIGHT){
                        self.spdY = -self.spdY;
                }
        }

        return self;
}



Actor = function(type,id,x,y,spdX,spdY,width,height,color,hp,atkSpd){
        var self = Entity(type,id,x,y,spdX,spdY,width,height,color);

        self.hp = hp;
        self.atkSpd = atkSpd;
        self.attackCounter = 0;
        self.aimAngle = 0;



        var super_update = self.update; // WHAT IS THIS FOR?
        self.update = function(){
                super_update();
                self.attackCounter += self.atkSpd;
        }


        self.performAttack = function(){
                if(self.attackCounter > 25){    //every 1 sec
                        self.attackCounter = 0;
                        generateBullet(self);
                }
        }



        return self;
}

Answer 1

首先，您没有链接所有代码。有可能在这里有另一条线：

var self = this;
// Stuff...

// Code you posted.

至于它如何运作......

链接的代码段以var super_update = self.update;开头。在JavaScript中，这可以理解为，＆＃34;将对象update的属性self的内容分配给变量{{1 }}。

此的工作原理是因为JavaScript是一种面向对象的语言！下一行super_update正在创建一个具有给定函数体的函数对象，并将其分配给对象self.update = function () { functionbody };的属性update。

现在，我确定你问自己，＆＃34;指令的顺序不重要？＆＃34;在这种情况下......答案是肯定的，但需要注意事项＆＃39;。像self / undefined，null和number这样的基元都是按值传递的;对象和数组通过非常类似于引用*的东西传递。由于boolean对象仍然是对象，因此它们不会按值传递，因此每次调用function时，super_update 的内容都会显示为self.update作业将执行。

现在，由于@JaredSmith在原始问题的评论中指出，这不起作用：有一个无限递归的情况，或者一个方法调用自己而不是不这样做。您已将self.update分配给self.update，但在super_update内呼叫self.update。因此，此代码将锁定它正在执行的页面。 这不是一件好事。我建议删除对super_update函数内super_update的调用。

我确定您没有发布所有代码的另一个原因是，通常这种“分配行为”的行为是＆＃39;设置发生在JavaScript框架中，例如three.js或angular ...可能，无论你正在做什么教程。而且，这就是代码的重点 - 将可配置的行为传递给某些预定义的代码，以使其以自定义方式运行。

TL; DR：在JavaScript函数中，可以将其分配给变量/属性并作为参数传递。您可以使用它来使现有代码表现出多态行为。

超级TL; DR：在JavaScript中，函数是该语言的first-class citizens。

Super-Duper TL; DR：此片段：

self.update

......是什么叫做封闭;这意味着var super_update = self.update; self.update = function () {};已分配super_update，因为它在分配时已存在。 Closures are a useful topic you may want to read more on.（感谢@ankhzet在这个回答中的评论。）

*：我之所以说“非常类似于引用”的原因，是因为JavaScript实际上没有通过引用/指针传递内容的概念--JavaScript是一种高级语言，因此不会处理准确地传递内存地址。这发生在JavaScript引擎内部。

HTML5游戏功能

1 个答案: