如何访问声明范围之外的变量？

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>

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

我试过用 var 声明变量 activePlayers1，我认为这行得通。可能跟把它作为参数解析成函数有关？

Answer 1

return 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 恰好是上面代码中所有出现的 this 中的 PlayPoker 对象。

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

如何访问声明范围之外的变量？

How do I access a variable outside the scope it is declared?

javascript

scope

undefined