调用函数时如何解决函数范围问题答案

【问题标题】：How to fix function scope issues when calling a function调用函数时如何解决函数范围问题
【发布时间】：2019-08-16 16:05:38
【问题描述】：

我正在研究 Wes Bos 的一个项目，您的任务是为一系列列表项添加 shift click 功能。

我完成了这个并想更进一步，然后添加取消选择我所做的这些列表项的功能（请参阅注释的 javascript 代码）。

然后我想采用该解决方案并应用 DRY 原则，这就是事情变得困难的地方。


<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Hold Shift to Check Multiple Checkboxes</title>
    </head>
    <body>
        <style>
            html {
              font-family: sans-serif;
              background: #ffc600;
            }
            .inbox {
              max-width: 400px;
              margin: 50px auto;
              background: white;
              border-radius: 5px;
              box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
            }
            .item {
              display: flex;
              align-items: center;
              border-bottom: 1px solid #F1F1F1;
            }
            .item:last-child {
              border-bottom: 0;
            }
            input:checked + p {
              background: #F9F9F9;
              text-decoration: line-through;
            }
            input[type="checkbox"] {
              margin: 20px;
            }
            input:hover {
              cursor: pointer;
            }
            p {
              margin: 0;
              padding: 20px;
              transition: background 0.2s;
              flex: 1;
              font-family:'helvetica neue';
              font-size: 20px;
              font-weight: 200;
              border-left: 1px solid #D1E2FF;
            }
        </style>
        <!--
        The following is a common layout you would see in an email client.

        When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.

        -->
        <div class="inbox">
            <div class="item">
                <input type="checkbox">
                <p>This is an inbox layout.</p>
            </div>
            <div class="item">
                <input type="checkbox">
                <p>Check one item</p>
            </div>
            <div class="item">
                <input type="checkbox">
                <p>Hold down your Shift key</p>
            </div>
            <div class="item">
                <input type="checkbox">
                <p>Check a lower item</p>
            </div>
            <div class="item">
                <input type="checkbox">
                <p>Everything in between should also be set to checked</p>
            </div>
            <div class="item">
                <input type="checkbox">
                <p>Try to do it without any libraries</p>
            </div>
            <div class="item">
                <input type="checkbox">
                <p>Just regular JavaScript</p>
            </div>
            <div class="item">
                <input type="checkbox">
                <p>Good Luck!</p>
            </div>
            <div class="item">
                <input type="checkbox">
                <p>Don't forget to tweet your result!</p>
            </div>
        </div>
        <script>
            const input = document.querySelectorAll('.item input[type="checkbox"]');
            let lastchecked; 

            function checkFunction (event) {
                let inbetween = false;
                if (event.shiftKey && this.checked) {
                    tickBox(true);
                } else if (event.shiftKey && !this.checked) {
                    tickBox(false);
                }
                lastChecked = this;
            }

            function tickBox(boolean) {
                input.forEach(box => { 
                    if (box === this || box === lastChecked) {
                        inbetween = !inbetween;
                    }
                    if (inbetween) {
                        box.checked = boolean;
                    }
                });
            }

            input.forEach(box => box.addEventListener('click', checkFunction));


        //    const input = document.querySelectorAll('.item input[type="checkbox"]');
        //    let lastchecked; 
        //    
        //    function checkFunction (event) {
        //        let inbetween = false;
        //        if (event.shiftKey && this.checked) {
        //            input.forEach(box => {  
        //                if (box === this || box === lastChecked) {
        //                    inbetween = !inbetween;
        //                }
        //                if (inbetween) {
        //                    box.checked = true;
        //                }
        //            });
        //        } else if (event.shiftKey && !this.checked) {
        //            input.forEach(box => {  
        //                if (box === this || box === lastChecked) {
        //                    inbetween = !inbetween;
        //                }
        //                if (inbetween) {
        //                    box.checked = false;
        //                }
        //            });
        //        }
        //        lastChecked = this;
        //    }
        //    
        //    input.forEach(box => box.addEventListener('click', checkFunction));
        </script>
    </body>
</html>

那时我预计我所要做的就是调用重复代码的函数，但这次使用的是布尔参数，但是它说中间变量是未定义的。在这一点上我很困惑。如果我在新函数中定义它，它只会勾选所有内容并且不会将变量更改回 false 等。

我希望这是有道理的。我很想知道我将来哪里出错了。

谢谢大家。

【问题讨论】：

函数作用域是私有的。范围之外的任何内容都无法访问范围内的变量。如果您想从该函数外部访问它，您的 inbetween 变量必须存储在函数范围之外的某个位置。如果您能描述该 inbetween 变量的用途，我或许可以提供不同的想法。
仅供参考，您也可以将inbetween 作为参数传递给tickBox() 并返回任何新值。由于tickBox() 似乎只能从checkFunction() 内部调用，所以这可以工作。
或者，您可以在checkFunction() 中定义tickBox()，以便它可以看到checkFunction() 范围。函数可以在其他函数中声明，然后它们共享对父范围的访问。
感谢 jfriend00 基本上中间变量用于确定一个框是否位于先前和当前选中的框之间。如果该框等于当前选中的框/最后一个选中的框，则评估为真，然后在到达另一侧时变回假。我会尝试你提供的建议。非常感谢您的帮助。

标签： javascript function ecmascript-6 scope

【解决方案1】：

我建议在checkFunction() 中声明tickBox()。这是可行的，因为它从未在其他地方调用过。然后，它可以访问checkFunction() 的范围，包括inbetween 变量：

const input = document.querySelectorAll('.item input[type="checkbox"]');
let lastchecked; 

function checkFunction (event) {
    let inbetween = false;

    function tickBox(boolean) {
        input.forEach(box => { 
            if (box === this || box === lastChecked) {
                inbetween = !inbetween;
            }
            if (inbetween) {
                box.checked = boolean;
            }
        });
    }

    if (event.shiftKey && this.checked) {
        tickBox(true);
    } else if (event.shiftKey && !this.checked) {
        tickBox(false);
    }
    lastChecked = this;
}

input.forEach(box => box.addEventListener('click', checkFunction));

仅供参考，您可以从此简化您的 if/else：

    if (event.shiftKey && this.checked) {
        tickBox(true);
    } else if (event.shiftKey && !this.checked) {
        tickBox(false);
    }

到这里：

    if (event.shiftKey) {
        tickBox(this.checked);
    }

这意味着您实际上不再需要 tickBox() 的单独函数。

【讨论】：