请教 ES6变量的结构赋值中，自定义弹框的例子2

// 初始化一个弹出框
// 创建DOM元素
// 把弹出框插入DOM元素，再把DOM元素插入到页面中
// 显示DOM元素
(function(window, document) {
  let Msg = function(options) {
    this._init(options);
  };

  Msg.prototype._init = function({ content = '', confirm = null,
  cancel = null, userHtml = false, contentStyle = { }, contentFontSize = '1.5em'}) {
    this.content = content;
    this.confirm = confirm;
    this.cancel = cancel;
    this.userHtml = userHtml;
    this.contentStyle = contentStyle;
    this.contentFontSize = contentFontSize;

    this._createElement();
    this._show([this._el, this._overlay]);
    this._bind([this._el, this._overlay]);
  };

  Msg.prototype._bind = function([el, overlay]){
    //  这个方法在_bind方法内部使用，所以写在内部。？？事件冒泡机制 11111111
    const hideMsg = function(){
        el.style.transform = 'translate(-50%, -50%) scale(0, 0)';
        overlay.style.opacity = 0;
        setTimeout(() => {
            document.body.removeChild(el);
            document.body.removeChild(overlay);
        }, 300);
        // 这个定时器跟下面confirm事件冲突了,因为事件执行完后el这个DOM元素已经没有了，confirm冒泡到el，取消事件就没办法进行了，只要在confirm事件里加阻止事件冒泡event.stopPropagation();就行了
    };
    const _this = this;
    // console.log(this) 这个this指向Msg对象
    const cancel = function(e){
    // console.log(this) 这个this指向this._el = wrap这个DOM元素，实际上指向算了吧或×这两个按钮，因为事件冒泡指向了wrap，所以要用const _this = this保留this;
        _this.cancel && _this.cancel.call(_this, e); //33333
        hideMsg();
    }
    const confirm = function(e){
        console.log(this)
        _this.confirm && _this.confirm.call(_this, e);
        hideMsg();
        alert('注册成功');
        event.stopPropagation();
    }
    overlay.addEventListener('click', cancel)
    // 事件冒泡机制,父元素监听下面所有子元素的点击事件
    el.addEventListener('click', cancel);
    // confirm确认事件比较特殊，加个冒泡。
    el.querySelector('.msg-footer-confirm-button').addEventListener('click', confirm);
  }

  Msg.prototype._createElement = function(){
    let wrap = document.createElement("div");
    wrap.className = 'msg__wrap';
    wrap.innerHTML = `<div class="msg-header">
            <span>确认删除</span>
            <span class="msg-header-close-button">×</span>
        </div>
        <div class="msg-body">
            <div class="msg-body-icon">
            <div class="msg-body-icon-wrong"></div>
            </div>
            <div class="msg-body-content"></div>
        </div>
        <div class="msg-footer">
            <button class="msg-footer-btn msg-footer-cancel-button">算了吧</button>
            <button class="msg-footer-btn msg-footer-confirm-button">好的</button>
        </div>`;
    // 在<div class="msg-body-content"></div>这里插入文本或者DOM元素
    let contentDom = wrap.querySelector('.msg-body .msg-body-content');
    const contentStyle = {
        fontSize: this.contentFontSize,
        ...this.contentStyle
    }

    for(let i in contentStyle){
        if(contentStyle.hasOwnProperty(i)){
            contentDom.style[i] = contentStyle[i];
        }
    }
    if(this.userHtml){
        contentDom.innerHTML = this.content;
    }else{
        contentDom.innerText = this.content;
    }


    let overlay = document.createElement('div');
    overlay.className = 'msg__overlay';
    this._el = wrap;
    this._overlay = overlay;
    // console.log(typeof this._el)
  }

  Msg.prototype._show = function([el, overlay]){
    document.body.appendChild(el);
    document.body.appendChild(overlay);
    // 异步操作，最后一步scale放大。
    setTimeout(() => {
        el.style.transform = 'translate(-50%, -50%) scale(1, 1)';
        overlay.style.opacity = 1;
    }, 0);
  }

  window.$Msg = Msg;
})(window, document);

看看我注释的地方对不对，还有检查一下代码。

// 1、hideMsg这个方法只能在_bind方法内部使用，所以写在内部？？为什么不挂到Msg对象上？

// 2、什么时候用let ，什么时候用const，我知道let是变量，const是常量，但是const定义引用类型时，自身也能改变，我的感觉所有的常量都能使用let定义，能举几个常用的例子对比一下吗？

3、const _this = this;   _this.cancel && _this.cancel.call(_this, e); 这一步的意义到底在哪里？我利用了事件冒泡机制监听wrap下的所有点击事件，confirm事件我阻止了事件冒泡，所以我是能知道this的最终指向的。去掉这一步，然后我在事件内外打印了this，外面的指向Msg对象，里面的指向3个按钮，好像也没有影响。