Question

我正在尝试从cardSelection()调用一个方法function game()，但是我收到一个错误报告，它使用“没有方法cardSelection（）”将整个函数返回给我想法是通过单击按钮来访问该方法，该HTML标记如下：

<img id="PlayerCard0" class="card" src="images/Cards/Mario.png" alt="Mario" title="Mario" onclick="game.cardSelection('PlayerCard0')">

我不会发布整个Javascript，因为我认为这只是一个声明错误的情况，无论如何，game()和cardSelection()被声明如下：

function game()
{
...
this.cardSelection = function(card)
{
    var cardElem = document.getElementById(card);
    var id = cardElem.getAttribute("id");
    var call = document.getElementById("call");

    var select = function(card)
    {


        var found = 0;
        for (var card = 0, totalCards = 5; card < totalCards; card++)
        {
            if (document.getElementById("PlayerCard" + card + "selected"))
            {found++}
        }
        if (found == 0)
        {
            call.setAttribute("onclick", "changeHand()");
            call.childNodes[0].nodeValue = "Change";
        }
        if (found < 3)
        {
            id += "selected"
            setAttributes(cardElem,
            {
                "id" : id,
                "style": "position: relative; top: 1em;",
                "onclick" : "cardSelection('" + id + "')"
            });
        }
        else { return; }
    }
    var unselect = function (card)
    {
        cardElem.removeAttribute("style");
        id = id.replace("selected","");
        setAttributes(cardElem,
        {
            "id" : id,
            "onclick" : "cardSelection('" + id + "')"
        });
        var cardNumber = 0;
        var found = false;
        while (cardNumber < 5 && !found)
        {
            if (document.getElementById("playerCard" + cardNumber + "selected"))
            {found = true;}
            cardNumber++;
        }
        if (!found)
        {
            call.setAttribute("onclick", "compareHands()");
            call.childNodes[0].nodeValue = "Hold";
        }
    }
    if (id.indexOf("selected") >= 0){unselect(card);}
    else {select(card);}
    }
    ...
}

如何调用game()：

window.onload = function openingScreen()
{
    var startGame = document.createElement("a");
    startGame.setAttribute("onclick", "game()");
    startGame.appendChild(document.createTextNode("Play"));
    window.table = document.getElementById("table");
    table.appendChild(startGame);
}

Answer 1

您遇到的问题是javascript中对象/ 类 /实例混淆的结果。

关于此问题的关键点是new game()和game()之间的区别;

var foo = new game()

告诉JS引擎创建一个新对象
指出对象的原型（不是prototype）在game的{{1}}
然后调用函数游戏，但为了该函数的主体prototype将引用创建的对象。
如果函数没有返回对象，请将我们创建的对象分配给this（否则将函数的返回值赋给foo

在游戏功能的正文中，您有foo。如果你只是调用this.cardSelection = function (...作为函数，那么只有game，而没有game()关键字，函数体内的new将成为窗口对象！因此，您将this添加到窗口对象。

同样重要的是：cardSelection正在寻找名为game.cardSelection()的函数作为函数 cardSelection的属性。

以下是使用该样式的示例：

game

你似乎期待的东西需要这样写：

var foo = function () {
    //do interesting stuff
}

foo.bar = function () {
    //do interesting stuff related to foo
}

foo.bar();

或者，如果var game = function () { this.cardSelection = function () { //perform card selection! } } var aGame = new game(); aGame.cardSelection();不需要访问游戏的任何私有属性，则可以更有效地编写

cardSelection

自定义对象'游戏'没有指定的方法

1 个答案: