问题描述
这是谷歌浏览器Chrome版本53.0.2785.101(64位)的问题.我尝试运行一个简单的html文件，当我使用"slot"一词时，它会引发错误"slot.testFun不是函数".
It's an issue with google chrome version 53.0.2785.101 (64-bit). I tried running a simple html file and it throws the error 'slot.testFun is not a function' when I used the word 'slot'.
<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>
在我们的代码中与此变量没有冲突.只是浏览器，不允许使用最新版本的变量名.
There are no conflicts with this variable in our code. It's just the browser, not allowing the variable name in this latest version.
如果您使用插槽"一词以外的其他名称，则可以正常工作.
If you use any other name except the word 'slot', it works fine.
推荐答案
这不是ECMAScript问题，而是DOM问题.
This isn't an ECMAScript issue, it is a DOM issue.
slot属性具有相应的slot属性，并且 onclick属性用with 做愚蠢的事情，所以您有效地调用了this.slot.testFun()，因为它会在到达正确的作用域之前找到slot(默认为空字符串).
The slot attribute has a corresponding slot property, and onclick attributes do stupid things with with so you are effectively calling this.slot.testFun() because it finds slot (which defaults to being an empty string) before it gets to the right scope.
slot是DOM的新增功能，并且在Chrome 53中新增了对slot的支持.它在Chrome 52中没有出现，甚至在其他浏览器的最新版本中也可能没有.
slot is a new addition to the DOM and support for slot is new in Chrome 53. It does not appear in Chrome 52 and might not have made it even into the latest version of other browsers.
解决方案:避免固有事件属性.而是将事件处理程序与DOM绑定.这样可以保护您免受他的冲突的影响，并保护您免受将来添加DOM的侵害.
The solution: Avoid intrinsic event attributes. Bind event handlers with DOM instead. That protects you from his clash and future-proofs you from future additions to the 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>
这篇关于在新版本的ECMAScript中，“插槽"是保留字吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！