JavaScript \"Uncaught TypeError: object is not a function\" 关联性问题答案

【问题标题】：JavaScript "Uncaught TypeError: object is not a function" associativity questionJavaScript \"Uncaught TypeError: object is not a function\" 关联性问题
【发布时间】：2021-07-05 14:43:41
【问题描述】：

代码如下：

<body>
    <a href=\"javascript:;\" id=\"test\">hello</a>
</body>

<script type=\"text/javascript\">
    document.getElementById(\"test\").addEventListener(\"click\", function () {
      test()
    }, false)
    function test() {
      var postTypes = new Array(\'hello\', \'there\')
      (function() { alert(\'hello there\') })()
    }
</script>

这将抛出：

\"Uncaught TypeError: object is not a function\"

如果我将匿名函数调用/调用包装在另一组括号中，它将执行警报，但仍然给我一个错误。如果我在 \"var postTypes\" 定义后加一个分号，那就完全没问题了。

我被引导相信 JavaScript 不需要分号，所以我猜测函数应用程序有一些奇怪的关联规则，我没有完全理解。为什么我会收到此错误？

看起来几乎就像您正在尝试创建匿名函数和静态函数并期望它作为一个执行。如果删除 function() 会发生什么

标签： javascript

【解决方案1】：

JavaScript 确实需要分号。只是解释器会在可能的情况下在换行符处为您插入它们^*.

不幸的是，代码

var a = new B(args)(stuff)()

做不是导致语法错误，因此不会插入;。（一个可以运行的例子是

var answer = new Function("x", "return x")(function(){return 42;})();

为避免出现此类意外，请训练自己始终以 ; 结束语句。

^*这只是一个经验法则，并不总是正确的。插入规则要复杂得多。这个关于分号插入的blog page 有更多细节。

【讨论】：

或者：为了避免这样的意外，训练自己编写清晰可读的代码（应该始终适用）并了解一般的 ASI 规则……这与“了解”JS 中的闭包如何工作没有什么不同。

【解决方案2】：

您的代码遇到了automatic semicolon insertion (ASI) 进程没有发生的情况。

你永远不应该依赖 ASI。您应该使用分号正确分隔语句：

var postTypes = new Array('hello', 'there'); // <--- Place a semicolon here!!

(function() { alert('hello there') })();

您的代码实际上是在尝试调用数组对象。

【讨论】：

解决问题的一种方法，但我无法落后于 Crockford 俱乐部。
@pst：让我换个说法，我不在 Crock's-club根本:)
在那种情况下，我为那些严厉的话道歉:(
我确实很喜欢这个测验。 ASI 确实与 icky-code 非常混淆！

【解决方案3】：

我在React 中遇到了这个问题：我尝试destructure 并在默认导出时使用命名导出，例如：

// module.js
const myFunction = () => null
export default myFunction

// component.js
// THIS WAS WRONG:
// import { myFunction } from './module'
// SHOULD BE THIS:
import myFunction from './module'

【讨论】：

也正是我的问题
这也是我在 VueJs 应用程序中遇到的问题，这让我相信这更多的是关于如何将模块与 Webpack 一起使用。
这里的关键是，您将函数导出为“默认”。因此，您不必将其放在大括号中进行解构。如果你像这样导出它export default myFunction 这个import { myFunction } from './module' 会工作

【解决方案4】：

我遇到了类似的错误，我花了一段时间才意识到在我的情况下我命名了数组变量支付发票和功能也支付发票.它混淆了AngularJS。

一旦我将名称更改为流程支付（）它终于奏效了。

【讨论】：

同样在这里，我有一个名为 alert 的变量，并试图调用 javascript 警报函数，它会说“警报不是函数”。它试图调用alert 变量而不是实际函数

【解决方案5】：

尝试在 JavaScript 文件中的函数调用之前包含函数体。

【讨论】：

【解决方案6】：

我遇到了同样的错误，花了一天半的时间试图找到解决方案。 Naomi's answer 引导我找到我需要的解决方案。

我的输入 (type=button) 有一个属性 name，它与 onClick 事件调用的函数名称相同。一旦我更改了属性name，一切正常。

<input type="button" name="clearEmployer" onClick="clearEmployer();">

变成：

<input type="button" name="clearEmployerBtn" onClick="clearEmployer();">

【讨论】：

【解决方案7】：

使用Webpack 编译和捆绑 TypeScript 代码时出现此错误。它将export class AppRouterElement extends connect(store, LitElement){....} 编译为let Sr = class extends (Object(wr.connect) (fn, vr)) {....}，由于缺少逗号，这似乎是错误的。与 Rollup 捆绑时，没有错误。

【讨论】：