JavaScript OOP错误

您好，这是我第一次尝试编写JavaScript应用程序，所以我对使用它编写OOP代码还不熟悉

以下代码在控制台中运行时没有任何错误：

// Main file for the application
$(document).ready( function()
{
    var app = new application;
    setInterval( app.run, 50 );

});

function application()
{
   var canvas = Raphael(10,0,400,400);
   this.molecule = new molecule( new Vec2(50,50),new Vec2(1,0),canvas );
   this.molecule.update(10);

   this.run = function()
    {

    }
}

Uncaught TypeError: Object function molecule( pos,vel,canvas )
    {
        this.radius = 5;
        this.color = "red";

        this.canvas = canvas;

        this.pos = pos;
        this.vel = vel;

        this.circle = canvas.circle( this.pos.x,this.pos.y,this.radius );

        this.circle.attr("fill", this.color );


    } has no method 'update' 

但是，这段代码不起作用：

// Main file for the application
$(document).ready( function()
{
    var app = new application;
    setInterval( app.run, 50 );

});

function application()
{
   var canvas = Raphael(10,0,400,400);
   this.molecule = new molecule( new Vec2(50,50),new Vec2(1,0),canvas );

   this.run = function()
    {
        this.molecule.update(10);
    }
}

控制台中出现以下错误：

// Main file for the application
$(document).ready( function()
{
    var app = new application;
    setInterval( app.run, 50 );

});

function application()
{
   var canvas = Raphael(10,0,400,400);
   this.molecule = new molecule( new Vec2(50,50),new Vec2(1,0),canvas );
   this.molecule.update(10);

   this.run = function()
    {

    }
}

Uncaught TypeError: Object function molecule( pos,vel,canvas )
    {
        this.radius = 5;
        this.color = "red";

        this.canvas = canvas;

        this.pos = pos;
        this.vel = vel;

        this.circle = canvas.circle( this.pos.x,this.pos.y,this.radius );

        this.circle.attr("fill", this.color );


    } has no method 'update' 

这是包含分子对象的源文件

    // This 'class' handles a molecule, including movement and drawing.

    function molecule( pos,vel,canvas )
    {
        this.radius = 5;
        this.color = "red";

        this.canvas = canvas;

        this.pos = pos;
        this.vel = vel;

        this.circle = canvas.circle( this.pos.x,this.pos.y,this.radius );

        this.circle.attr("fill", this.color );


    }

 // Updates the molecule
    molecule.prototype.update = function( deltaTime )
    {
        this.pos += this.vel * deltaTime;
        this.setPosition(this.pos);
    }

    // Accepts a Vec2
    molecule.prototype.setPosition = function( pos )
    {
        this.circle.translate( pos.x-this.pos.x, pos.y-this.pos.y );
    }    

---

我为我发布的大量代码感到抱歉，但我很困惑为什么第一段代码有效而第二段代码无效。谁能帮我解释一下吗？非常感谢

您已将

运行

方法与

应用程序

分离。传递一个使它们保持在一起的函数

setTimeout(function() { app.run(); }, 50);

现在，

.run（）

中的

this

的值将成为

app

对象

---

此外，无需为每个

应用程序（）

对象创建一个新的

run

方法。您可以将

run

放在

application.prototype

上

function application() {
   var canvas = Raphael(10,0,400,400);
   this.molecule = new molecule( new Vec2(50,50),new Vec2(1,0),canvas );
   this.molecule.update(10);
}

application.prototype.run =  function() {
    this.molecule.update(10);
}

---

虽然如果在构造函数中保持

run

，那么就可以让它关闭在引用对象的变量上，这样就可以安全地分离它

function application() {
   var canvas = Raphael(10,0,400,400);
   this.molecule = new molecule( new Vec2(50,50),new Vec2(1,0),canvas );
   this.molecule.update(10);

   var self = this;

   this.run = function() {
       self.molecule.update(10);
   }
}

---

---

这是一个常见的错误，需要很好地理解JavaScript才能看到这里发生了什么。问题在于这一行：

setInterval( app.run, 50 );

这会导致在没有适当的

This

上下文的情况下，在间隔结束时调用

app.run

。要确保使用

app

作为

this

上下文调用

run

，您需要以下内容：

setInterval( function() {
    app.run();
}, 50 );

或者使用最新的JavaScript（仅在非常现代的浏览器中）：

JavaScript中函数的

上下文由函数的调用方式决定。基本上，它由调用它的对象来确定。例如，在
app.run（）。然而，在一个稍微不同的场景中

var fn = app.run;
fn();

该函数不在任何对象上调用，因此不会设置此
，从而导致意外结果。这正是你的情况。解决方案是确保传递一个可以在任何对象上调用的函数，并使该函数调用在正确的对象上运行。
非常感谢！我不熟悉JavaScript的工作方式，只是希望它能像其他语言一样工作。@KarlJacques:你越早摆脱这种期望，就越好。如果所有语言都工作相同，那么它们就不会是不同的语言。