关于js中bind()方法的使用问题

Question

html代码：

js代码如下：

class Tab{
    constructor(id){
        // that = this
        this.main = document.querySelector(id)
        this.lis = this.main.querySelectorAll('li')
        this.sections = this.main.querySelectorAll('section')
        this.add = this.main.querySelector('.tabadd')
        
        this.ul = this.main.querySelector('.fisrstnav ul:first-child')
        this.fsection = this.main.querySelector('.tabscon')
        this.init()
    }
    init(){
        this.updateNode()
        this.add.addEventListener('click', this.addTab.bind(this.add,this))
        for(let i = 0; i < this.lis.length; i++){
            this.lis[i].index = i
            this.lis[i].addEventListener('click', this.toggleTab.bind(this.lis[i],this))
            this.remove[i].addEventListener('click', this.removeTab.bind(this.remove[i],this))
            this.spans[i].addEventListener('dblclick', this.editTab)
            this.sections[i].addEventListener('dblclick', this.editTab)
        }
    }
    updateNode(){
        this.lis = this.main.querySelectorAll('li')
        this.sections = this.main.querySelectorAll('section')
        this.remove = this.main.querySelectorAll('.icon-guanbi')
        this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child')
    }
    //切换
    toggleTab(that){
        that.clearclass()
        this.className = 'liactive'
        that.sections[this.index].className = 'conactive'
    }
    clearclass(){
        for(let i = 0; i < this.lis.length; i++){
            this.lis[i].className = ''
            this.sections[i].className = ''
        }
    }
    //添加
    addTab(that){
        that.clearclass()
        let li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>'
        let section = '<section class="conactive">测试1</section>'
        that.ul.insertAdjacentHTML('beforeend',li)
        that.fsection.insertAdjacentHTML('beforeend',section)
        that.init()
    }
    //删除
    removeTab(that,e){
        e.stopPropagation()
        let index = this.parentNode.index
        that.lis[index].remove()
        that.sections[index].remove()
        that.init()
        //当我们删除非选定状态的tab时，原来的选定状态不变
        if(document.querySelector('.liactive')){
            return
        }
        //删除选定状态的tab后，前一个处于选定状态
        index--
        //方法一
        // if(index >= 0){
        //     that.lis[index].click()
        // }
        //方法二
        that.lis[index] && that.lis[index].click()
    }
    //修改
    editTab(){
        let str = this.innerHTML
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()  //双击禁止选定状态
        this.innerHTML = '<input type="text">'
        let input = this.children[0]
        input.value = str
        input.select()
        input.addEventListener('blur',function() {
            this.parentNode.innerHTML = this.value
        })
        input.addEventListener('keyup',function(e) {
            if(e.key === 'Enter'){
                this.blur()
            }
        })
    }
}
let tab = new Tab('#tab')

当我前面使用bind()方法改变this指向时，我发现removeTab(that,e)中的that和e调换位置时，会报以下错误：

若要调换位置，应如何解决这个错误

Answer 1

参数是跟位置来的，不是和名字，也就是that,e调换了位置，两者就变成了对方