如何访问超出声明范围的变量？

Question

let playerone = document.querySelector(".dealItP1");
let playertwo = document.querySelector(".dealItP2");
let playerthree = document.querySelector(".dealItP3");
let playerfour = document.querySelector(".dealItP4");
let playerUserPot = [0];
let playerUserPotOriginal = [...playerUserPot];
let playerOnePot = [500];
let playerOnePotOriginal = [...playerOnePot];
let playerTwoPot = [500];
let playerTwoPotOriginal = [...playerTwoPot];
let playerThreePot = [500];
let playerThreePotOriginal = [...playerThreePot];
let playerFourPot = [500];
let playerFourPotOriginal = [...playerFourPot];

let deck = ["2 Club", "2 Spade", "2 Diamond", "2 Heart", "3 Club", "3 Spade", "3 Diamond", "3 Heart", "4 Club", "4 Spade", "4 Diamond", "4 Heart", "5 Club", "5 Spade", "5 Diamond", "5 Heart", "6 Club", "6 Spade", "6 Diamond", "6 Heart", "7 Club", "7 Spade", "7 Diamond", "7 Heart", "8 Club", "8 Spade", "8 Diamond", "8 Heart", "9 Club", "9 Spade", "9 Diamond", "9 Heart", "10 Club", "10 Spade", "10 Diamond", "10 Heart", "Jack Club", "Jack Spade", "Jack Diamond", "Jack Heart", "Queen Club", "Queen Spade", "Queen Diamond", "Queen Heart", "King Club", "King Spade", "King Diamond", "King Heart", "Ace Club", "Ace Spade", "Ace Diamond", "Ace Heart"];

let originaldeck = [...deck];

const shuffle = arr => arr.reduceRight((res, _, __, arr) => [...res, arr.splice(~~(Math.random() * arr.length), 1)[0]], []);

var PlayPoker = {

  setGameStart: function() {

    this.startingPot();

    this.activePlayers();

    this.dealPlayers();

    this.bigBlind();

    this.loopPoker();

  },

  startingPot: function() {
    document.querySelector("#userPot").innerHTML = 'Pot:' + playerUserPot;
    document.querySelector("#p1Pot").innerHTML = 'Pot:' + playerOnePot;
    document.querySelector("#p2Pot").innerHTML = 'Pot:' + playerTwoPot;
    document.querySelector("#p3Pot").innerHTML = 'Pot:' + playerThreePot;
    document.querySelector("#p4Pot").innerHTML = 'Pot:' + playerFourPot;
  },

  activePlayers: function() {
    var activePlayers1 = ["User", "Player1", "Player2", "Player3", "Player4"];

    if (playerUserPot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'User');
    };


    if (playerOnePot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'Player1');
    };

    if (playerTwoPot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'Player2');
    };

    if (playerThreePot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'Player3');
    };

    if (playerFourPot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'Player4');
    };





  },


  dealPlayers: function() {
    var freshDeck01 = shuffle(originaldeck);
    var userDeal = freshDeck01.filter(function(value, index, arr) {
      return index < 2;
    });
    Array.prototype.subtract = function(array) {
      array = array.slice();
      return this.filter(function(freshDeck01) {
        var p = array.indexOf(freshDeck01);
        if (p === -1) {
          return true;
        }
        array.splice(p, 1);
      });
    }
    var loadedDeck01 = freshDeck01.subtract(userDeal);
    var freshDeck02 = shuffle(loadedDeck01);
    var p1Deal = freshDeck02.filter(function(value, index, arr) {
      return index < 2;
    });

    var loadedDeck02 = freshDeck02.subtract(p1Deal);
    var freshDeck03 = shuffle(loadedDeck02);
    var p2Deal = freshDeck03.filter(function(value, index, arr) {
      return index < 2;
    });

    var loadedDeck03 = freshDeck03.subtract(p2Deal);
    var freshDeck04 = shuffle(loadedDeck03);
    var p3Deal = freshDeck04.filter(function(value, index, arr) {
      return index < 2;
    });

    var loadedDeck04 = freshDeck04.subtract(p3Deal);
    var freshDeck05 = shuffle(loadedDeck04);
    var p4Deal = freshDeck05.filter(function(value, index, arr) {
      return index < 2;
    });

    let xu = document.querySelector(".dealItUser"); /*Deal Cards*/
    xu.innerHTML = '<p>User</p>' + userDeal;
    let x1 = document.querySelector(".dealItP1");
    x1.innerHTML = '<p>The Mouth</p>' + p1Deal;
    let x2 = document.querySelector(".dealItP2");
    x2.innerHTML = '<p>Snake Eyes</p>' + p2Deal;
    let x3 = document.querySelector(".dealItP3");
    x3.innerHTML = '<p>10 gallon</p>' + p3Deal;
    let x4 = document.querySelector(".dealItP4");
    x4.innerHTML = '<p>Glance A lot</p>' + p4Deal;




  },


  bigBlind: function() {},

  loopPoker: function() {

    for (let i = 0; i < 5; i++)



    {

      if (i = 1) {
        document.querySelector(".button").value = 1;
      };
      if (i = 2) {
        document.querySelector(".button").value = 2;
      };
      if (i = 3) {
        document.querySelector(".button").value = 3;
      };
      if (i = 4) {
        document.querySelector(".button").value = 4;
      };
      if (i = 5) {
        document.querySelector(".button").vlaue = 0;
      };



    }
  }
}

.main {
  box-sizing: border-box;
  border: 3px solid green;
  height: 1200px;
  width: 1200px;
  position: absolute;
  background-color: black;
}

.title {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 200px;
  position: absolute;
  top: 1%;
  left: 1%;
  background-color: green;
  opacity: .8;
  font-family: coniferous, sans-serif;
  font-style: normal;
  font-weight: 300;
  color: black;
}

.User {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 400px;
  position: absolute;
  top: 28%;
  left: 67%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.dealItUser {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 150px;
  position: absolute;
  top: 10%;
  left: 85%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.UserFormBet {
  position: absolute;
  top: 40%;
  left: 10%;
}

.UserFormRadio {
  position: absolute;
  top: 25%;
  left: 35%;
}

.UserFormAmount {
  position: absolute;
  top: 25%;
  left: 50%;
}

.P1 {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 400px;
  position: absolute;
  top: 28%;
  left: 32%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.dealItP1 {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 150px;
  position: absolute;
  top: 10%;
  left: 70%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.P1FormBet {
  position: absolute;
  top: 40%;
  left: 10%;
}

.P1FormRadio {
  position: absolute;
  top: 25%;
  left: 35%;
}

.P1FormAmount {
  position: absolute;
  top: 25%;
  left: 50%;
}

.P2 {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 400px;
  position: absolute;
  top: 45%;
  left: 1%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.dealItP2 {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 150px;
  position: absolute;
  top: 10%;
  left: 55%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.P2FormBet {
  position: absolute;
  top: 40%;
  left: 10%;
}

.P2FormRadio {
  position: absolute;
  top: 25%;
  left: 35%;
}

.P2FormAmount {
  position: absolute;
  top: 25%;
  left: 50%;
}

.P3 {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 400px;
  position: absolute;
  top: 62%;
  left: 32%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.dealItP3 {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 150px;
  position: absolute;
  top: 10%;
  left: 40%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.P3FormBet {
  position: absolute;
  top: 40%;
  left: 10%;
}

.P3FormRadio {
  position: absolute;
  top: 25%;
  left: 35%;
}

.P3FormAmount {
  position: absolute;
  top: 25%;
  left: 50%;
}

.P4 {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 400px;
  position: absolute;
  top: 45%;
  left: 67%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.dealItP4 {
  box-sizing: border-box;
  border: 3px green solid;
  height: 200px;
  width: 150px;
  position: absolute;
  top: 10%;
  left: 25%;
  background-color: green;
  opacity: .5;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: 25px;
  color: red;
  font-weight: 500px;
}

.P4FormBet {
  position: absolute;
  top: 40%;
  left: 10%;
}

.P4FormRadio {
  position: absolute;
  top: 25%;
  left: 35%;
}

.P4FormAmount {
  position: absolute;
  top: 25%;
  left: 50%;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <link href="../CSS/pokerTryOne.css" rel="stylesheet" type="text/css">
</head>

<body>

  <div class="main">
    <div class="dealItUser">7
    </div>
    <div class="title"><button class="button" value="0" style="height:150px; width: 150px; background-color: red; color: yellow;" onclick="PlayPoker.setGameStart()">Click Button to Deal</button>
      <div class="counter" style="color: red; font-size: 2em">7</div>
    </div>
    <div class="User">
      "Hold'en Fold'ems" User Player
      <p id="userPot">Pot:</p>


      <form method="post" action="form-handler.php">
        <div>
          <div class="UserFormBet">
            <p>Bet:</p>
          </div>
          <div class="UserFormRadio">
            <input type="radio" name="bet" value="5"> 5<br>
            <input type="radio" name="bet" value="10"> 10<br>
            <input type="radio" name="bet" value="25"> 25<br>
            <input type="radio" name="bet" value="50"> 25<br>
            <input type="radio" name="bet" value="25"> 50<br>
          </div>
          <div class="UserFormAmount">
            <label for="name">Amount: <span class="required">*</span> </label>
            <input type="text" id="name" name="name" value="" placeholder="Your Bet" required="required" autofocus />
            <p>
              <input type="submit" value="Submit" id="submit" />
            </p>
          </div>
      </form>
      </div>



    </div>
    <div class="dealItP1">7</div>
    <div class="P1">
      "The Mouth" Phil Hellmuth
      <p id="p1Pot">Pot:</p>


      <form method="post" action="form-handler.php">
        <div>
          <div class="P1FormBet">
            <p>Bet:</p>
          </div>
          <div class="P1FormRadio">
            <input type="radio" name="bet" value="5"> 5<br>
            <input type="radio" name="bet" value="10"> 10<br>
            <input type="radio" name="bet" value="25"> 25<br>
            <input type="radio" name="bet" value="50"> 25<br>
            <input type="radio" name="bet" value="25"> 50<br>
          </div>
          <div class="P1FormAmount">
            <label for="name">Amount: <span class="required">*</span> </label>
            <input type="text" id="name" name="name" value="" placeholder="Your Bet" required="required" autofocus />
            <p>
              <input type="submit" value="Submit" id="submit" />
            </p>
          </div>
      </form>
      </div>


    </div>
    <div class="dealItP2">7
    </div>
    <div class="P2">"Snake Eyes" Daniel Negreanu
      <p id="p2Pot">Pot:</p>


      <form method="post" action="form-handler.php">
        <div>
          <div class="P2FormBet">
            <p>Bet:</p>
          </div>
          <div class="P2FormRadio">
            <input type="radio" name="bet" value="5"> 5<br>
            <input type="radio" name="bet" value="10"> 10<br>
            <input type="radio" name="bet" value="25"> 25<br>
            <input type="radio" name="bet" value="50"> 25<br>
            <input type="radio" name="bet" value="25"> 50<br>
          </div>
          <div class="P2FormAmount">
            <label for="name">Amount: <span class="required">*</span> </label>
            <input type="text" id="name" name="name" value="" placeholder="Your Bet" required="required" autofocus />

            <p>
              <input type="submit" value="Submit" id="submit" /></p>
          </div>
      </form>
      </div>

    </div>
    <div class="dealItP3">7
    </div>
    <div class="P3">"10 Gallon" Doyel Brunsen
      <p id="p3Pot">Pot:</p>

      <form method="post" action="form-handler.php">
        <div>
          <div class="P3FormBet">
            <p>Bet:</p>
          </div>
          <div class="P3FormRadio"><input type="radio" name="bet" value="5"> 5<br>
            <input type="radio" name="bet" value="10"> 10<br>
            <input type="radio" name="bet" value="25"> 25<br>
            <input type="radio" name="bet" value="50"> 25<br>
            <input type="radio" name="bet" value="25"> 50<br>
          </div>
          <div class="P3FormAmount">
            <label for="name">Amount: <span class="required">*</span> </label>
            <input type="text" id="name" name="name" value="" placeholder="Your Bet" required="required" autofocus />


            <p><input type="submit" value="Submit" id="submit" /></p>
          </div>
      </form>
      </div>
    </div>
    <div class="dealItP4">7
    </div>
    <div class="P4">"Sir Glance A Lot" Phil Ivy
      <p id="p4Pot">Pot:</p>

      <form method="post" action="form-handler.php">
        <div>
          <div class="P4FormBet">
            <p>Bet:</p>
          </div>
          <div class="P4FormRadio"><input type="radio" name="bet" value="5"> 5<br>
            <input type="radio" name="bet" value="10"> 10<br>
            <input type="radio" name="bet" value="25"> 25<br>
            <input type="radio" name="bet" value="50"> 25<br>
            <input type="radio" name="bet" value="25"> 50<br>
          </div>
          <div class="P4FormAmount">
            <label for="name">Amount: <span class="required">*</span> </label>
            <input type="text" id="name" name="name" value="" placeholder="Your Bet" required="required" autofocus />

            <p>
              <input type="submit" value="Submit" id="submit" />
            </p>
          </div>
      </form>
      </div>

    </div>
  </div>
  <div class="dealBet"></div>
  <div class="flopIt"></div>
  <div class="flopBet"></div>
  <div class="turnIt"></div>
  <div class="turnBet"></div>
  <div class="riverIt"></div>
  <div class="riverBet"></div>
  </div>
  <script type="text/javascript" src="../JavaScript/pokerTryOne.js"></script>
</body>

</html>

我在主函数“ setGameStart”中列出了嵌套函数，该函数被设置为变量“ PlayPoker”。我想从loopPoker函数访问在activePlayers函数中声明的变量activePlayers1。

我尝试用var声明变量activePlayers1，我认为这是可行的。也许与将其作为参数解析到函数中有关？

Answer 1

从activePlayer返回activePlayers1，然后将其传递给loopPoker，或者您可以使用localStorage

setGameStart: function() {
    
    this.startingPot();

    let activePlayers = this.activePlayers();

    this.dealPlayers();

    this.bigBlind();

    this.loopPoker(activePlayers);

  },

activePlayers: function() {
    
    let activePlayers1 = ["User", "Player1", "Player2", "Player3", "Player4"];

    if (playerUserPot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'User');
    };


    if (playerOnePot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'Player1');
    };

    if (playerTwoPot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'Player2');
    };

    if (playerThreePot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'Player3');
    };

    if (playerFourPot == 0) {
      activePlayers1 = activePlayers1.filter(e => e !== 'Player4');
    };

    return activePlayers1;
  },


loopPoker: function(activePlayer) {
        console.log(activePlayer);
}

Answer 2

正如我在上面的评论中所述。您可以将某些内容存储在this上，并且可以立即编写代码。排序的简化版本：

var PlayPoker = {
  start() {
    this.init();
    this.activatePlayers();
    this.somethingElse();
  },
  init() {
    console.log("init");
    console.log(this.activePlayers); // Notice this.activePlayers is undefined
  },
  activatePlayers() {
    console.log("activatePlayers");
    this.activePlayers = ["A", "B"];
  },
  somethingElse() {
    console.log("somethingElse");
    console.log(this.activePlayers);
  }
}

<button onclick="PlayPoker.start()">Activate</button>

这里重要的是this的用法。之所以在这里起作用，是因为在以上代码中所有this出现的情况下PlayPoker都是this对象。

话虽这么说，this有时会让人难以理解，我建议您遵循公认的答案中概述的方法，因为这样更容易推理。我发布此答案只是对我上面的评论的补充。