类函数内部的Javascript全局变量

Question

我真的不习惯es5，所以我遇到了麻烦，因为我被迫使用es5。 问题是当我这样做时， updateScoreboard({"name":"foo","bgColor":{"r":47.0,"b":79.0,"a":255.0,"g":79.0}})

为了在记分板上创建一个新面板，我的isPlayerInScoreboard函数返回false，因为playerName2某种程度上是一个全局变量且未绑定到函数PlayerPanel，您可以通过调用updateScoreboard({"name":"foo","bgColor":{"r":47.0,"b":79.0,"a":255.0,"g":79.0}})来了解我的意思。 updateScoreboard({"name":"foo","bgColor":{"r":47.0,"b":79.0,"a":255.0,"g":79.0}}) ，然后注销“ playerName2”，我认为这不是全局变量，但不知何故

编辑：也是当我这样做

updateScoreboard（{“ name”：“ foo”，“ bgColor”：{“ r”：47.0，“ b”：79.0，“ a”：255.0，“ g”：79.0}}））updateScoreboard（{“ name”：“栏”， “BGCOLOR”：{ “R”：47.0， “b”：79.0， “一”：255.0， “G”：79.0}}）

在我的面板数组中，所有对象的getPlayerName方法都返回最后输入的名称，因此，在这种情况下，如果我做了panel [0] .getPlayerName（），它将返回“ bar”，而应该返回“ foo”

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
        body {
            background-color: rgba(25, 25, 25, 0.50);
            font-family: "Arial";

        }

        .tab {

            margin: 1px auto;
            width: 95%;
            height: 30px;
            background-color: white;
        }

        #title-header {
            /*display:inline-block;*/
            /*color: white;*/
            font-size: 25px;
            color: white;
            /*border-top: 1px solid white;*/
            /*border-bottom: 1px solid white;*/
            margin:0 auto;
            /*vertical-align: middle;*/
            text-align:center;
            /*white-space: nowrap;*/

        }

        .player-img {
            display: inline-block;
            /*width: 50px;*/

        }

        .player-name {
            display: inline-block;
            position: relative;
            bottom: 10px;
            color: white;
        }
    </style>
</head>
<body>

    <div id="title-header">
        <h1>SleekRP</h1>
    </div>

    <div class="main-scoreboard">
        <div class="tab">
            <div class="player-img">
                <img src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/fe/fef49e7fa7e1997310d705b2a6158ff8dc1cdfeb.jpg">
            </div>
            <p class="player-name">test</p>
        </div>

        <!-- <div class="tab"></div>
        <div class="tab"></div>
        <div class="tab"></div>
        <div class="tab"></div> -->
    </div>

    <script>
        var panels = [];

        function setTitle(title){
            document.getElementById("title-header").innerText = title
        }

        function isPlayerInScoreboard(name){
            for (var i=0; i<panels.length; i++){
                if (panels[i].getPlayerName() == name) {
                    return true
                }
            }
            return false
        }

        function updateScoreboard(plyInfo){
            if (!isPlayerInScoreboard(plyInfo.name)) {
                PlayerPanel(plyInfo)
            }
        }

        function PlayerPanel(plyInfo){
            // Create element
            var mainPanel = document.createElement('div')
            mainPanel.className = "tab"
            mainPanel.style.backgroundColor = "rgba(" + plyInfo.bgColor.r + ", " + plyInfo.bgColor.g + ", " + plyInfo.bgColor.b + ", 0.50)"
            document.getElementsByClassName("main-scoreboard")[0].appendChild(mainPanel)

            this.playerName2 = document.createElement('p')
            this.playerName2.innerText = plyInfo.name
            this.playerName2.className = "player-name"
            mainPanel.appendChild(this.playerName2)

            this.setPlayerName = function(name) {
                this.playerName2.innerText = name
            }

            this.updatebGColor = function(bgColor){
                mainPanel.style.backgroundColor = "rgba(" + bgColor.r + ", " + bgColor.g + ", " + bgColor.b + ", 0.50)"
            }

            this.getPlayerName = function() {
                return this.playerName2.innerText
            }
            panels.push(this)
        }
    </script>
</body>
</html>

Answer 1

在其中使用“ this”时，应使用“ new”调用PlayerPanel。

 function updateScoreboard(plyInfo){
        if (!isPlayerInScoreboard(plyInfo.name)) {
            new PlayerPanel(plyInfo)
        }
    }

类函数内部的Javascript全局变量

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-02-25 13:02:04

类函数内部的Javascript全局变量

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-02-25 13:02:04

解决方案1
0 已采纳 2019-02-25 13:02:04