JavaScript中命名submit()函数的异常行为：submit是保留字吗？

首先直接给结论：submit并不是JavaScript的保留字——你完全合法地用它定义了全局函数，表单外的按钮能正常触发也证明了这一点。

那为什么表单内的Submit按钮没按预期执行你的自定义函数？核心原因是作用域上下文的优先级冲突：

• 当你在表单（<form>）内部的元素上写onclick="submit()"时，这段代码的执行上下文是当前表单元素。而<form>元素本身自带一个原生的submit()方法（用于提交表单的API），这个方法在当前上下文里的优先级比全局作用域的自定义函数更高。
• 所以你点击表单内的按钮时，实际调用的是表单的原生submit()方法（默认会提交表单刷新页面，你可能没注意到这个行为），而不是你自己定义的全局函数——这就是为什么看起来你的函数没执行。

而表单外的按钮，它们的执行上下文是全局作用域，这里的submit会直接找到你在全局定义的函数，所以能正常触发。

解决办法 #

你可以通过两种方式解决这个冲突：

1. 明确指定全局作用域：把表单内按钮的onclick改成window.submit()，强制调用全局的自定义函数。
2. 重命名自定义函数：比如改成mySubmit()，避免和表单的原生方法重名，这样表单内外的按钮都能正常使用。

举个修改后的代码例子：

<html>
<head>
<script>
function sayHello(){
  console.log('Hello!');
}
function mySubmit(){ // 重命名函数
  console.log('Submit!')
}
</script>
</head>
<body>
<form>
  <button onclick="sayHello()">Say hello</button>
  <button onclick="mySubmit()">Submit</button> <!-- 使用新函数名 -->
</form>
<button onclick="sayHello()">Say hello - outside</button>
<button onclick="mySubmit()">Submit - outside</button> <!-- 使用新函数名 -->
</body>
</html>

内容的提问来源于stack exchange，提问作者Ema.jar