仅Safari浏览器出现ReferenceError: Can't find variable: aside问题求助

我编写的JavaScript代码在除Safari外的所有浏览器中均可正常运行，但在Safari里会报错ReferenceError: Can't find variable: aside，代码如下：

<body>
    // Content here (including the aside element)...

    <script>
        const asideInner = document.querySelector('aside .aside-inner')
        if (asideInner !== null) {
            const aside = document.querySelector('aside')
            function checkSidebarHeight() {
                const windowHeight = window.innerHeight;
                const sidebarHeight = asideInner.offsetHeight;

                if (sidebarHeight > windowHeight) {
                    asideInner.style.position = 'relative';
                    aside.style.marginTop = '185px'
                } else {
                    asideInner.style.position = 'sticky';
                    aside.style.marginTop = '202px'
                }
            }
            checkSidebarHeight()
            window.addEventListener('resize', checkSidebarHeight)
        }
    </script>
</body>

原因分析 #

这是Safari对函数作用域的处理和其他现代浏览器存在差异导致的：在if代码块内用const声明的aside变量，Safari遵循更旧的作用域规则，不会让内部声明的函数checkSidebarHeight访问到这个块级变量；而其他浏览器已经完全实现ES6的块级作用域规范，允许内部函数访问同级块内的变量。

解决方案 #

方案1：将aside变量声明移到if块外部 #

把aside的查询和声明放到if判断之前，确保内部函数能访问到该变量：

const asideInner = document.querySelector('aside .aside-inner')
const aside = document.querySelector('aside')
if (asideInner !== null) {
    function checkSidebarHeight() {
        const windowHeight = window.innerHeight;
        const sidebarHeight = asideInner.offsetHeight;

        if (sidebarHeight > windowHeight) {
            asideInner.style.position = 'relative';
            aside.style.marginTop = '185px'
        } else {
            asideInner.style.position = 'sticky';
            aside.style.marginTop = '202px'
        }
    }
    checkSidebarHeight()
    window.addEventListener('resize', checkSidebarHeight)
}

方案2：用函数表达式替换函数声明 #

将function checkSidebarHeight()改成函数表达式（或箭头函数），避免函数声明的作用域提升问题：

const asideInner = document.querySelector('aside .aside-inner')
if (asideInner !== null) {
    const aside = document.querySelector('aside')
    // 使用函数表达式
    const checkSidebarHeight = function() {
        const windowHeight = window.innerHeight;
        const sidebarHeight = asideInner.offsetHeight;

        if (sidebarHeight > windowHeight) {
            asideInner.style.position = 'relative';
            aside.style.marginTop = '185px'
        } else {
            asideInner.style.position = 'sticky';
            aside.style.marginTop = '202px'
        }
    }
    checkSidebarHeight()
    window.addEventListener('resize', checkSidebarHeight)
}

也可以用箭头函数简化：

const checkSidebarHeight = () => {
    // 原函数逻辑不变
}

内容的提问来源于stack exchange，提问作者Elvis Murseli