javascript - export 匯出後方法報錯undefined

Question

因為專案一開始沒有整合jquery，所以很多的方法都是用原生來寫的。今天到網路找了幾個操作類別名稱的方法，如下：

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)
    }  
}

但是在用的時候卻一直會報錯，如下：

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

我打斷點調試了下，還是沒能找到問題出現的原因。不知道各位大神有沒有遇過同樣問題的？

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指的是不是全域物件