Javascript – Die Exportmethode meldet nach dem Export den Fehler „undefiniert“.

Question

Da jquery zu Beginn des Projekts nicht integriert war, wurden viele Methoden nativ geschrieben. Heute bin ich online gegangen, um einige Methoden zum Bearbeiten von Klassennamen zu finden:

export const hasClass = (el, cls) => {
    return el.className.match(new RegExp('(\s|^)' + cls + '(\s|$)'))
}

export const removeClass = function (el, cls) {
    if (hasClass(el, cls)) {  
        var reg = new RegExp('(\s|^)' + cls + '(\s|$)')
        el.className = el.className.replace(reg, ' ')
    }  
}

export const addClass = function (el, cls) {
    if (!this.hasClass(el, cls)) el.className += " " + cls
}

export const toggleClass = (el,cls) => {
    console.log(hasClass)
    if(hasClass(el,cls)){
        removeClass(el, cls)
    }else{
        addClass(el, cls)
    }  
}

Aber wenn ich es verwende, erhalte ich immer eine Fehlermeldung wie folgt:

Uncaught TypeError: Cannot read property 'hasClass' of undefined
    at addClass (Route.js?7c64bfe…:27892)
    at HTMLpElement.item.onclick (Route.js?7c64bfe…:139726)

Ich habe unterbrochen und debuggt, konnte aber immer noch nicht die Ursache des Problems finden. Ich frage mich, ob jemand von euch auf das gleiche Problem gestoßen ist?

Answer 1

export const addClass = function (el, cls) {
    if (!this.hasClass(el, cls)) el.className += " " + cls
}

就是this的问题。直接把this.去掉，固定调用模块内部的hasClass方法。

export const toggleClass = (el,cls) => {
    console.log(hasClass)
    if(hasClass(el,cls)){
        removeClass(el, cls)
    }else{
        addClass(el, cls)
    }  
}

toggleClass里调用addClass和removeClass倒是对的，怎么想起来调用hasClass时前面加this的？

Answer 2

要看你这个this.hasClass()中this指的对象是什么了。你可以看看这个this指的是不是全局对象