如何访问事件内的对象

Question

我有这个带有一些功能的对象。在某些时候，我想持有一个事件并在该事件中调用这个对象，但只有当你使用 this 调用这个对象时，有没有办法在没有 this 的情况下调用它？我还没有尝试任何东西，因为我找不到任何帮助。const cantaVideoModal = {    click: null,    target: null,    urlVideo: null,    config: function (c) {        this.click = c.click;        this.target = c.target;        this.urlVideo = c.urlVideo;        this.init();    },    init: function () {        this.click = (this.click) ? document.querySelector(this.click) : null;        this.target = (this.target) ? document.querySelector(this.target) : null;        let btnCloseVideo = document.querySelector('[data-close-modal]');        if(btnCloseVideo){            btnCloseVideo.addEventListener('click', function(){                //call modalAction object here using this            })        }    },    modalAction: function (act) {        let elementClick = this.click;        let elementtarget = this.target;        if (elementClick) {            elementClick.addEventListener('click', function (e) {                e.preventDefault();                if (elementtarget) {                    if(act === "toggle")                        elementtarget.classList.toggle('in');                    if(act === "show")                        elementtarget.classList.add('in');                    if(act === "hide")                        elementtarget.classList.remove('in');                }            })        }    }}

Answer 1

您不能使用的原因this是因为您位于addEventListener. 我不知道为什么，但是您可以创建一个引用当前对象的新对象，该对象可以在匿名函数中使用。有关为什么不能this在 inside 中使用的更多信息，addEventListener请参阅此答案

const cantaVideoModal = {

    click: null,

    target: null,

    urlVideo: null,

    config: function (c) {

        this.click = c.click;

        this.target = c.target;

        this.urlVideo = c.urlVideo;

        this.init();

    },

    init: function () {

        this.click = (this.click) ? document.querySelector(this.click) : null;

        this.target = (this.target) ? document.querySelector(this.target) : null;

        let btnCloseVideo = document.querySelector('[data-close-modal]');

        if(btnCloseVideo){

            // we create a new variable that refer to the current content.

            var self = this

            btnCloseVideo.addEventListener('click', function() {

                //call modalAction object here using self.

                self.modalAction(/* some parameters */);

            })

        }

    },

    modalAction: function (act) {

        let elementClick = this.click;

        let elementtarget = this.target;

        if (elementClick) {

            elementClick.addEventListener('click', function (e) {

                e.preventDefault();

                if (elementtarget) {

                    if(act === "toggle")

                        elementtarget.classList.toggle('in');

                    if(act === "show")

                        elementtarget.classList.add('in');

                    if(act === "hide")

                        elementtarget.classList.remove('in');

                }

            })

        }

    }

}

PS我尝试使用箭头函数但无法使代码正常工作。