javascript - 'slot' 是新版 ECMAScript 中的保留字吗?

标签 javascript google-chrome ecmascript-6

<分区>

这是谷歌浏览器版本 53.0.2785.101(64 位)的问题。我尝试运行一个简单的 html 文件,当我使用“槽”这个词时,它抛出错误“slot.testFun 不是一个函数”。

<html>
<head>
    <title>TEST</title>
</head>
<body>
    <a href="#" onclick="slot.testFun();">Click Here</a>

    <script type="text/javascript">
        var slot = {
            testFun: function(){
                console.log('clicked');
            }
        }
    </script>
</body>
</html>

在我们的代码中与这个变量没有冲突。这只是浏览器,不允许在这个最新版本中使用变量名。

如果您使用除“slot”一词以外的任何其他名称,它就可以正常工作。

最佳答案

这不是 ECMAScript 问题,而是 DOM 问题。

slot attribute具有相应的 slot 属性,并且 onclick attributes do stupid things with with所以您实际上是在调用 this.slot.testFun(),因为它会在到达正确范围之前找到 slot(默认为空字符串)。

slot 是 DOM 的新增功能,对 slot 的支持是 Chrome 53 中的新功能。它没有出现在 Chrome 52 中,甚至可能没有进入其他浏览器的最新版本。

解决方案:避免固有的事件属性。改为使用 DOM 绑定(bind)事件处理程序。这可以保护您免受他的冲突,并使您免受 future 添加到 DOM 的影响。

<a href="#">Click Here</a>

<script type="text/javascript">
    var slot = {
        testFun: function(){
            console.log('clicked');
        }
    }
    document.querySelector("a").addEventListener("click", slot.testFun);
</script>

关于javascript - 'slot' 是新版 ECMAScript 中的保留字吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39451807/

相关文章:

javascript - CHROME中的自调用函数未捕获到TypeError

css - Chrome 中选择器后的冒号

javascript - react : Perform different operation depending on select option dropdown

javascript - EcmaScript 和 JavaScript 指的是同一种语言吗?

html - Firefox 与 Chrome 中奇怪的输入宽度

javascript - 导出默认值中 'name' 属性的目的/用途是什么{}

javascript - 如何在某些设备宽度以下禁用 JQuery?

javascript - 用于 Rocket Chat iframe 身份验证的 NodeJS 应用程序抛出 SyntaxError : Unexpected token (

javascript - 如何使用 Canvas 使颜色褪色

javascript - Cypress click 没有滚动到 View 中