JavaScript Uncaught TypeError: n is not a function错误

Uncaught TypeError: n is not a function

这是一个标准的JavaScript错误，当尝试在定义之前调用一个函数时发生。如果尝试执行未初始化或未正确初始化的函数，则会出现此错误。这意味着表达式没有返回一个函数对象。因此，您需要了解您正在尝试实现的不是一个功能。

消息：

TypeError：对象不支持属性或方法{n}（Edge）

TypeError：“n”不是函数

错误类型：

TypeError

TypeError: “n” is not a function出现的原因：

示例1： 当方法名称中有拼写错误时会出现这种情况：

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Type Error</title>
</head>
 
<body>
    <script>
        let n = document.getElementByID('GFG');
        document.write(n);
    </script>
</body>
</html>

输出： 在运行上面的示例时，它 抛出了一个 JavaScript 错误。

TypeError: document.getElementByID is not a function

正确的函数名是 getElementById ：

示例2： 当调用一个对象时，如果该对象不包含一个函数，就会出现这种情况。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Type Error</title>
</head>
 
<body>
    <script>
        let num = {
            foo: function () {
                console.log("foo called");
            }
        };
        num.fo();
    </script>
</body>
</html>

输出：

TypeError: num.fo is not a function

解释： 上面的示例中， num 对象包含一个 foo() 函数。然而，上面的代码将尝试调用 foo() 函数，但它并不包括 num 。所以，在运行上面的示例时，它会抛出一个JavaScript错误。

正确的函数调用是 foo() ：

示例3： 某些方法需要提供一个仅适用于特定对象的函数。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Type Error</title>
</head>
 
<body>
    <script>
        let arr = { a: 1, b: 2, c: 3 };
        arr.map(function (num)){
            return num;
        });
    </script>
</body>
</html>

输出：

TypeError: arr.map is not a function

解释: 在上面的示例中，使用了Array.prototype.map() ，这个方法只适用于数组对象。因此，当运行上面的示例时，会抛出JavaScript错误。

正确的方法是正确声明数组，例如arr=[35,42,90]

示例4: 有时候当你创建一个类时，可能会有同名的属性和函数。当调用函数时，编译器会认为函数已经不存在了。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Type Error</title>
</head>
 
<body>
    <script>
        var Boy = function () {
            this.age = 15;
            this.color = "white";
            this.name = "John"
            return this;
        }
        Boy.prototype.name = function (name) {
            this.name = name;
            return this;
        }
        var myNewBoy = new Boy();
        myNewBoy.name("Harry");
    </script>
</body>
</html>

输出：

TypeError: myNewBoy.name is not a function

说明： 在上面的示例中，名称是预定义的属性。所以，这段代码会抛出错误。

正确的定义属性的方式是：

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Type Error</title>
</head>
 
<body>
    <script>
        var Boy = function () {
            this.age = 15;
            this.color = "white";
            this.boyName = "John"
            return this;
        }
        Boy.prototype.name = function (name) {
            this.boyName = name;
            return this;
        }
        var myNewBoy = new Boy();
        myNewBoy.name("Harry");
    </script>
</body>
</html>

注意： 确保正确导入模块。假设我们有一个名为 ‘helpers.js’ 的文件。因此，我们需要导入 app.js：

import helpers from './helpers'

示例5： 在这种情况下，括号被用作乘法，但它们类似于调用函数。所以出现了错误。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Type Error</title>
</head>
 
<body>
    <script>
        const n = 4(4 + 5);
        document.write(n);
    </script>
</body>
</html>

输出： 此代码会抛出 错误。