javascript - 在不同的函数中为一个函数设置变量

Question

嘿，我是一个 javascript 新手，请耐心等待我的错误解释。我尝试用谷歌搜索这个问题，但据我了解，他们的解决方案不适用于我的情况。我正在尝试压缩我的代码，为此我需要在函数 start(); 中设置变量 x到 1 2 或 3(取决于我要单击的按钮)

我无法像大多数人一样获取函数 start() 中的信息，因为我只希望它从 3 个可能的函数之一中获取值，解决方法是在函数 start 中设置变量() 通过从函数 starthigh/mid/low() 设置它。

是否有一个全局变量/返回/其他我不理解或不知道的东西可以解决这个问题？ :)(代码非常简单，所以你们更容易帮助我，因为我知道所有其他代码都是无关的)

function starthigh() {
  var x = 3;
}

function startmid() {
  var x = 2;
}

function startlow() {
  var x = 1;
}

function start() {
  alert(x) /*  Undefined (make this DEFINED with code only in startlow/mid/high functions) */
}

<button onclick="startlow(); start();">1x Bet</button>
<button onclick="startmid(); start();">2x Bet</button>
<button onclick="starthigh(); start();">3x Bet</button>

Answer 1

示例中的 x 变量对于声明它们的函数来说是本地的。一旦函数返回，变量就不再存在。

要在不以其他方式更改代码的情况下进行更改，您必须将 x 设为全局:

var x; // Global

function starthigh() {
    x = 3;
}

function startmid() {
    x = 2;
}

function startlow() {
    x = 1;
}

function start() {
    alert(x) /*  Undefined (make this DEFINED with code only in startlow/mid/high functions) */
}

但是，最好避免使用全局变量，也许可以使用现代事件处理:

<button id="btn1x">1x Bet</button>  
<button id="btn2x">2x Bet</button>    
<button id="btn3x">3x Bet</button>     
<script> 
(function() { // Scoping function, so its contents aren't globals
    var x;

    function starthigh() {
        x = 3;
    }
    function startmid() {
        x = 2;
    }
    function startlow() {
        x = 1;
    }

    function start() { 
        alert(x) /*  Undefined (make this DEFINED with code only in startlow/mid/high functions) */
    } 

    // Hook up your handlers
    document.getElementById("btn1x").addEventListener("click", function() {
        starthigh();
        start();
    });
    document.getElementById("btn2x").addEventListener("click", function() {
        startmid();
        start();
    });
    document.getelementById("btn3x").addEventListener("click", function() {
        startlow();
        start();
    });
})();
</script>

不过，我们可以更进一步。 starthigh、startmid 和 startlow 都执行相同的操作，只是使用不同的值。所以我们可以用一个函数来完成这件事，也许还有一个函数调用它，然后调用 start:

<button id="btn1x">1x Bet</button>  
<button id="btn2x">2x Bet</button>    
<button id="btn3x">3x Bet</button>     
<script> 
(function() { // Scoping function, so its contents aren't globals
    var x;

    function startWith(value) {
        x = value;
        start();
    }

    function start() { 
        alert(x) /*  Undefined (make this DEFINED with code only in startlow/mid/high functions) */
    } 

    // Hook up your handlers
    document.getElementById("btn1x").addEventListener("click", startWith.bind(null 3));
    document.getElementById("btn2x").addEventListener("click", startWith.bind(null 2));
    document.getelementById("btn3x").addEventListener("click", startWith.bind(null 2));
})();
</script>

或者我们可以存储要在按钮上使用的值:

<button class="start" data-value="3">1x Bet</button>  
<button class="start" data-value="2">2x Bet</button>    
<button class="start" data-value="1">3x Bet</button>     
<script> 
(function() { // Scoping function, so its contents aren't globals
    var x;

    function startWithClick() {
        startWith(+this.getAttribute("data-value"));
    }

    function startWith(value) {
        x = value;
        start();
    }

    function start() { 
        alert(x) /*  Undefined (make this DEFINED with code only in startlow/mid/high functions) */
    } 

    // Hook up your handlers
    document.querySelectorAll(".start").forEach(function(btn) {
        btn.addEventListener("click", startWithClick);
    });
})();
</script>

更多探索:

• addEventListener
• Function#bind
• querySelectorAll
• My answer了解如何在 NodeList 上添加 forEach(对于尚未原生支持的浏览器)