javascript - 未捕获的类型错误：current.distance 不是函数

Question

我正在开发一个小游戏，通常称为“寻路”；我遇到了一个我从未遇到过的小错误（我是年轻的开发者）；

我到处搜索，但我不明白为什么会出现这个错误。

我遇到了这个错误：

未捕获的类型错误：current.distance 不是 HTMLDocument 中游戏 (pathfinding.js:151) 中 search_min_distance (pathfinding.js:127) 的函数。（寻路.js:173）

document.addEventListener("DOMContentLoaded", function() {


const NBR_POINT = 10;
const MIN_SPACING = 100;
const HEIGHT = window.innerHeight;
const WIDTH = window.innerWidth;

class point {
    constructor(x, y, name, id) {
        this.x = x;
        this.y = y;
        this.part = document.createElement("div");
        this.part.className = name;
        this.part.id = id;
    }

    distance(cmp) {

        return Math.sqrt(Math.pow(cmp.x - this.x, 2) + Math.pow(cmp.y - this.y, 2));

    }
}

function random(mode) {

    if (!mode)
        return Math.random() * ((WIDTH - 100) - 100) + 100;
    else
        return Math.random() * ((HEIGHT - 100) - 100) + 100;
}

function printPoint(stk, crt) {

    var block = 0;

    do {

        block = 0;
        var x = random(0);
        var y = random(1);

        if (stk.length != 0) {
            for (let i = 0; i < stk.length; i++) {
                if (x < (stk[i].x + MIN_SPACING) && x > (stk[i].x - MIN_SPACING) && y < (stk[i].y + MIN_SPACING) && y > (stk[i].y - MIN_SPACING)) {
                    block = 1;
                    break;
                }
            }
        }
    } while (block == 1);

    var ids = stk.length + 1;

    if (crt == "current")
        var p = new point(x, y, "point courant", ids);
    else
        var p = new point(x, y, "point", ids);

    p.part.style.bottom = p.y + "px";
    p.part.style.left = p.x + "px";
    document.body.appendChild(p.part);

    return p;

}

function polyPoint() {

    var stk = new Array();

    for (let i = 0; i < NBR_POINT - 1; i++) {
        stk.push(printPoint(stk, null));
    }
    printPoint(stk, "current");

    return stk;

}

function imp_session() {

    var dark_status = sessionStorage.getItem('dark_mode');

    if (dark_status == 1)
        document.body.classList.add("darkmode");
    if (dark_status == 0)
        document.body.classList.remove("darkmode");

}

function srv_DarkMode() {

    document.addEventListener("keypress", function(event) {

        let keypress = event.key;

        var dark_status = sessionStorage.getItem('dark_mode');

        if (keypress == "d") {

            if (dark_status == null) {
                dark_status = 0;
                sessionStorage.setItem('dark_mode', dark_status);
            }

            if (dark_status == 1) {
                this.body.classList.remove("darkmode");
                dark_status = 0;
                //To be able to delete sessions and not add them afterwards and error duplicate key.
                sessionStorage.removeItem('dark_mode');
                sessionStorage.setItem('dark_mode', dark_status);

            } else {
                this.body.classList.add("darkmode");
                dark_status = 1;
                //To be able to delete sessions and not add them afterwards and error duplicate key.
                sessionStorage.removeItem('dark_mode');
                sessionStorage.setItem('dark_mode', dark_status);
            }
        }
    });
}

function search_min_distance(stk, current) {

    let min = current.distance(stk[0]);
    let tmp;
    let real = min;

    for (let i = 1; i < stk.length; i++) {
        if (stk[i].id = current.id)
            continue;
        tmp = current.distance(stk[i]);
        if (tmp < min)
            real = i;
    }

    return real;

}


function game(stk) {

    var cp = document.getElementsByClassName('courant');

    cp[0].addEventListener("click", function(event) {
        alert("txt");
    });
    var distId = search_min_distance(stk, cp[0]);

    var p = document.getElementsByClassName('point');

    for (let i = 0; i < p.length; i++) {
        if (p[i].id != cp[0].id || p[i].id != distId) {
            p[i].addEventListener("click", function(event) {
                alert("txt");
            });
        }
    }


}

function init() {
    imp_session();
    srv_DarkMode();
    return polyPoint();
}
game(init());
});

-> current 和 stk [0] 确实属于“类型”点。

所有剩余的代码对我来说似乎并不重要，但如果有必要我会提供它。

我提前谢谢你 ！放纵一点...

标签： javascriptfunctionclassmethodstypeerror

Answer 1

您使用 getElement 函数获得的要点只是返回 js 对象，它不包含该类中的任何函数。

您需要在 search_min_distance 函数中从这个获得的点创建一个新的类实例，如下所示

const { x, y, name, id } = current;
const currentPoint = new Point(x, y, name, id);
let min = currentPoint.distance(stk[0]);

我建议你编写一个 util 函数来计算两点之间的距离，将两点作为参数传递。这将是一种更清洁的方法。