将带参数的方法添加到javascript对象答案

【问题标题】：Add method with parameters to javascript object将带参数的方法添加到javascript对象
【发布时间】：2011-09-21 04:04:26
【问题描述】：

我目前正在将我的一个 java 小程序游戏移植到 javascript+html5。我以前从未做过面向对象的 javascript，这个基于原型的 OO 东西让我很困惑。

我尝试从 java 做一个简单的移植，但在做两件事时遇到了麻烦：

1) 如何在构造函数中运行函数？
2) 如何添加有参数的方法？

这里有一些示例代码：

function User()
{
    setupStats();// I wanted to put some of the variable initializations into
    // a separate function for code modularity reasons.

    this.name='bob';

    //However that doesn't seem to work
    alert(this.gold); // gets Undefined

    alert(this.name); // gets bob. Phew at least this works

    //I also want to add a method with a parameter in it:
    this.draw=function(ctx){drawUser(ctx);};
}

function setupStats()
{
    this.gold=2;
    this.exp=3;
    this.blah='blah';
    this.that='something else';
    this.superultraomg='insert some computation';
}

function drawUser(ctx)
{
    ctx.drawImage(blah,blah,blah);
    alert(ctx); // Also gets undefined. Uh oh...

    alert(this.name); //Undefined? WHAT IS THIS I DONT EVEN...
}

请大家帮忙！

【问题讨论】：

标签： javascript oop canvas prototype-programming

【解决方案1】：

Example

我们正在使用原型，与所有Users 共享setupStats 中的默认值。我们使用call 传递上下文，即User 对象和parameter；

function User()
{
    setupStats();// I wanted to put some of the variable initializations into
    // a separate function for code modularity reasons.

    this.name='bob';

    //However that doesn't seem to work
    alert(this.gold); // gets Undefined

    alert(this.name); // gets bob. Phew at least this works

    //I also want to add a method with a parameter in it:
    this.draw= function(ctx){ drawUser.call(this, ctx); };
}

function setupStats()
{
    this.gold=2;
    this.exp=3;
    this.blah='blah';
    this.that='something else';
    this.superultraomg='insert some computation';
}

User.prototype = new setupStats();

new User().draw('pinky');

function drawUser(ctx)
{
    //ctx.drawImage(blah,blah,blah);
    alert(ctx); // Also gets undefined. Uh oh...

    alert(this.name); //Undefined? WHAT IS THIS I DONT EVEN...
}

【讨论】：

【解决方案2】：

离你不远了。问题主要在于您使用了“this”关键字。

你想要的更像是：

    var user = {};

    var user.setupStats = function ()
    {
        this.gold=2;
        this.exp=3;
        this.blah='blah';
        this.that='something else';
        this.superultraomg='insert some computation';
    };

    var user.init = function ()
    {
         this.name='bob';

         //Setup the stats
         this.setupStats();

         //However that doesn't seem to work
         alert(this.gold); // gets Undefined

         alert(this.name); // gets bob. Phew at least this works

         //I also want to add a method with a parameter in it:
         this.draw=function(ctx){drawUser(ctx);};
     };

您将继续这种方法并通过执行以下操作对其执行调用

user.init();

这会自动将您的函数引用链接在一起。

【讨论】：

你测试过这个吗？对我来说似乎有很多语法错误。
不。我只是想给他一点关于函数原型的想法以及如何影响“this”关键字的范围。随意推荐修改以使上面的代码更易于复制/粘贴。
我最喜欢这种添加方法的方式（仅仅是因为它使我的移植工作更容易，因为它最让人想起 java 的基于类的 OO）。但是，您的 user.init = function() 应该是 user.prototype.init = function()。答案已接受:) 有编辑权限的人可以修复语法错误吗？

【解决方案3】：

我建议阅读 Douglas Crockford 的 JavaScript: The World's Most Misunderstood Programming Language。他清楚地解释了类、私有成员、公共成员、继承等在 JavaScript 中是如何完成的。

【讨论】：

【解决方案4】：

您可能需要考虑将这些方法封装在类范围内，如果仍然存在方法歧义，您可以使用点表示法来解决命名空间歧义。 this.name 有效，因为它是在同一个函数中定义的，但是其他函数不知道它们打算存在于同一范围内，因此它们返回 undefined。

ctx 未在 drawUser() 中定义，因为参数声明不正确。 Javascrpit 参数应声明为（注意它们不使用 var 关键字）：

function methodName( aParam : aParamType, bParam : bParamType) {}

类使用class关键字声明[可选，省略方括号]

[private public static] class ClassName [extends ParentClass] { /*methods here*/ }

希望这会有所帮助。

【讨论】：