Question

我正在尝试创建一个积分计数器，当单击按钮时，一个人的积分会增加。然后一旦它达到一定数量的分数，它就会说游戏结束之类的东西。这很容易做到。我可以做这样的事情：

HTML：

<button id="add-p1-point">Give player 1 a point</button>
<button id="add-p2-point">Give player 2 a point</button>
<span id="p1-score">P1 Score:</span>
<span id="p2-score">P2 Score:</span>

JS：

    const p1PointAdded = document.getElementById('add-p1-point');
    const p2PointAdded = document.getElementById('add-p2-point');

    let p1Score = 0;
    let p2Score = 0;

    p1PointAdded.addEventListener('click', p1PointWon);
    p2PointAdded.addEventListener('click', p2PointWon);

    function p1PointWon() {
        p1Score++;
        document.getElementById('p1-score').innerText = `P1 Score: ${p1Score}`;
        if (p1Score == 3) {
            setTimeout(() => {
                alert('Player 1 won');
            }, 1);
        }
    }

    function p2PointWon() {
        p2Score++;
        document.getElementById('p2-score').innerText = `P2 Score: ${p2Score}`;
        if (p2Score == 3) {
            setTimeout(() => {
                alert('Player 2 won');
            }, 1);
        }
    }

然而，我只是想知道是否有一种方法可以让一个带有 player 参数的单一函数。然后，如果以 p1 为参数调用该函数，则所有变量和其他事物都将具有 p1，反之亦然。

示例（当然这行不通）：

    const p1PointAdded = document.getElementById('add-p1-point');
    const p2PointAdded = document.getElementById('add-p2-point');
    const p1Score = document.getElementById('p1-score');
    const p2Score = document.getElementById('p2-score')

    let p1Score = 0;
    let p2Score = 0;

    p1PointAdded.addEventListener('click', pointWon(p1));
    p2PointAdded.addEventListener('click', pointWon(p2));

    function pointWon(player) {
        player + 'Score'++;
        player + 'Score'.innerText = `${player} Score: ${player + 'Score'}`;
        if (player + 'Score' == 3) {
            setTimeout(() => {
                alert(`Player ${player} won`);
            }, 1);
        }
    }

我想知道是否有办法将参数和变量的第二个字连接起来。

感谢您的帮助！

Answer 1

您可以将一个对象绑定到该函数，该函数将 this 作为玩家。

function pointWon() {
    this.score++;
    this.element.innerText = `${this.player} Score: ${this.score}`;
    if (this.score === 3) {
        setTimeout(() => alert(`Player ${this.player} won`), 1);
    }
}

const
    p1PointAdded = document.getElementById('add-p1-point'),
    p2PointAdded = document.getElementById('add-p2-point'),
    p1 = {
        player: 'P1',
        element: document.getElementById('p1-score'),
        score: 0,
    },
    p2 = {
        player: 'P2',
        element: document.getElementById('p2-score'),
        score: 0,
    };

p1PointAdded.addEventListener('click', pointWon.bind(p1));
p2PointAdded.addEventListener('click', pointWon.bind(p2));

<button id="add-p1-point">Give player 1 a point</button>
<button id="add-p2-point">Give player 2 a point</button>
<span id="p1-score">P1 Score: 0</span>
<span id="p2-score">P2 Score: 0</span>

另一种方法可以在播放器上使用闭包并利用您的第一个预期方法。

function pointWon(player) {
    return function () {
        player.score++;
        player.element.innerText = `${player.player} Score: ${player.score}`;
        if (player.score === 3) {
            setTimeout(() => alert(`Player ${player.player} won`), 1);
        }
    };
}

const
    p1PointAdded = document.getElementById('add-p1-point'),
    p2PointAdded = document.getElementById('add-p2-point'),
    p1 = {
        player: 'P1',
        element: document.getElementById('p1-score'),
        score: 0,
    },
    p2 = {
        player: 'P2',
        element: document.getElementById('p2-score'),
        score: 0,
    };

p1PointAdded.addEventListener('click', pointWon(p1));
p2PointAdded.addEventListener('click', pointWon(p2));

<button id="add-p1-point">Give player 1 a point</button>
<button id="add-p2-point">Give player 2 a point</button>
<span id="p1-score">P1 Score: 0</span>
<span id="p2-score">P2 Score: 0</span>

根据传入的参数更改变量名称

1 个答案: