javascript - Javascript对象方法不是函数

问题描述

我一直在这里搜索，并没有找到完全匹配的东西，如果我错了，当然纠正我。这看起来很简单，但我看不出原因。

    function Dice() {
    if (!(this instanceof Dice)) {
        return new Dice();
    };
    this.sides = 6
};

Dice.prototype.setUpDieForHTML = function(roll) {

    const die = [
        'C:\\projects\\apoc\\img\\perspective-dice-six-faces-one.svg',
        'C:\\projects\\apoc\\img\\perspective-dice-six-faces-two.svg',
        'C:\\projects\\apoc\\img\\perspective-dice-six-faces-three.svg',
        'C:\\projects\\apoc\\img\\perspective-dice-six-faces-four.svg',
        'C:\\projects\\apoc\\img\\perspective-dice-six-faces-five.svg',
        'C:\\projects\\apoc\\img\\perspective-dice-six-faces-six.svg'
    ];
    const img = document.createElement('img');
    const dice = $('.dice');

    img.classList.add('dice-size');
    img.setAttribute('src', die[roll]);
    dice.append(img);
}

Dice.prototype.dieRoll = function() {
    let result = 1 + Math.floor(Math.random() * 6);

    switch (result) {
        case 1:
            this.setUpDieForHTML(result);
            break
        case 2:
            this.setUpDieForHTML(result);
            break
        case 3:
            this.setUpDieForHTML(result);
            break
        case 4:
            this.setUpDieForHTML(result);
            break
        case 5:
            this.setUpDieForHTML(result);
            break
        default:
            this.setUpDieForHTML(result);
            break
    }
}

module.exports = {
    Dice
};

当我实例化对象并调用 dieRoll() 时，我得到 setUpDieForHTML 不是函数。我已经移动了代码，更改为一个类，直接在 Node REPL 中运行，它似乎可以识别这些功能。同样在 chrome 的开发工具中，实例对象具有直到被调用的功能。

index.js

'use strict'
const die = require('./js/gamePieces/dice')
const newDie = new die.Dice()

$(() => {

    debugger
    $('.die-start-icon').on('click', newDie.dieRoll)
})

索引.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>Fallout Meeples</title>
    <!-- <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Do not add `link` tags-->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

    <!-- Do not add `script` tags-->
    <script src="public/vendor.js" type="text/javascript" charset="utf-8" defer></script>
    <script src="public/application.js" type="text/javascript" charset="utf-8" defer></script>
</head>

<body>
    <main id="apoc" class="game-area">
        <section class="player-start-area border yellow">
            <h2>Player One</h2>
            <section id="playerOne-dice">
                <div class="dice">
                    <img class="die-start-icon dice-size" src="./assets/img/perspective-dice-six-faces-random.svg">
                    <!--C:\\projects\\apoc\\assets\\img\\perspective-dice-six-faces-random.svg-->
                </div>
            </section>

        </section>
        <section class="player-start-area border blue">
            <h2>Player Two</h2>
            <section id="playerTwo-dice">
                <div class="dice"></div>
            </section>

        </section>
        <div class="dice"></div>


    </main>

    <!-- <script src="./assets/scripts/js/gamePieces/dice.js" type="text/javascript"></script> -->
</body>

</html>

我知道我的代码中还有其他一些问题，但这是我无法弄清楚的一件事。

标签： javascriptprototype

javascript - Javascript对象方法不是函数

问题描述

解决方案

推荐阅读