JavaScript 对象文字“this”[重复]答案

【问题标题】：JavaScript Object Literal "this" [duplicate]JavaScript 对象文字“this”[重复]
【发布时间】：2016-12-24 06:57:33
【问题描述】：

我编写了一个 JavaScript 对象字面量来处理 HTML 页面上的多个模式。当我单击按钮显示模态时，出现以下错误。

Uncaught TypeError: this.showModal is not a function
    at HTMLButtonElement.modalBtns.(anonymous function).onclick (file:///C:/dj-sites/ux_bee/js/base.js:63:22)

我认为问题在于“this”关键字指向按钮，而不是对象字面量。不知道我应该如何解决这个问题。

var myModalObj = {
    findAncestor: function(el, cls) {
        while ((el = el.parentElement) && !el.classList.contains(cls));
        return el;
    },
    showModal: function(btn){
        var modal_id = btn.getAttribute('data-modal')
        var modal = document.getElementById(modal_id);
        modal.style.display = "block";
    },
    closeModal: function (btn){
        var modal = this.findAncestor(btn, 'modal')
        modal.style.display = "none";
    },
    init: function(){
        var modalBtns = document.getElementsByClassName('my-modal-btn');
        for(var i = 0; i < modalBtns.length; i++) {
            var btn_modal = modalBtns[i];
            modalBtns[i].onclick = function() {
                this.showModal(btn_modal);
            }
        }

        var closeBtns = document.getElementsByClassName('modal-close');
        for(var i = 0; i < closeBtns.length; i++) {
            var btn_close = closeBtns[i];
            closeBtns[i].onclick = function() {
                this.closeModal(btn_close);
            }
        }
    }
}
myModalObj.init()

【问题讨论】：

将您的事件处理程序回调函数绑定到适当的上下文 - 默认情况下，处理程序注册的按钮元素，而不是您的 myModalObj 对象。像这样：modalBtns[i].onclick = function() {this.showModal(btn_modal)}.bind(this);

标签： javascript javascript-objects dom-events

【解决方案1】：

简单的答案 - 只需将 this 的所有实例替换为 myModalObj，就像这样。

var myModalObj = {
    findAncestor: function(el, cls) {
        while ((el = el.parentElement) && !el.classList.contains(cls));
        return el;
    },
    showModal: function(btn){
        var modal_id = btn.getAttribute('data-modal')
        var modal = document.getElementById(modal_id);
        modal.style.display = "block";
    },
    closeModal: function (btn){
        var modal = myModalObj.findAncestor(btn, 'modal')
        modal.style.display = "none";
    },
    init: function(){
        var modalBtns = document.getElementsByClassName('my-modal-btn');
        for(var i = 0; i < modalBtns.length; i++) {
            var btn_modal = modalBtns[i];
            modalBtns[i].onclick = function() {
                myModalObj.showModal(btn_modal);
            }
        }

        var closeBtns = document.getElementsByClassName('modal-close');
        for(var i = 0; i < closeBtns.length; i++) {
            var btn_close = closeBtns[i];
            closeBtns[i].onclick = function() {
                myModalObj.closeModal(btn_close);
            }
        }
    }
}
myModalObj.init()

你必须这样做的原因是因为你试图调用的函数只存储在myModalObj中，所以这是你调用它的唯一方法。

【讨论】：