javascript - kaedah eksport melaporkan ralat yang tidak ditentukan selepas mengeksport

Question

Oleh kerana jquery tidak disepadukan pada permulaan projek, banyak kaedah ditulis secara asli. Hari ini saya pergi ke dalam talian untuk mencari beberapa kaedah untuk memanipulasi nama kelas, seperti berikut:

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

Tetapi apabila saya menggunakannya, saya selalu mendapat ralat, seperti berikut:

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

Saya mencelah dan menyahpepijat, tetapi masih tidak dapat mencari punca masalah. Saya tertanya-tanya adakah di antara anda pernah mengalami masalah yang sama?

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

Memang betul untuk memanggil addClass dan removeClass dalam toggleClass Mengapa anda masih ingat menambah ini di hadapan hasClass?

Answer 2

Ia bergantung pada objek yang dirujuk dalam this.hasClass() anda. Anda boleh menyemak sama ada ini merujuk kepada objek global