如何在自身内部使用变量

Question

我想在自身内部使用变量，我看到其他人这样做了，但为什么它对我不起作用？

这是我的 ES6 文件

// Setup module
// ------------------------------

var FullCalendarAdmin = function () {

    //
    // Setup module components
    //
    var _componentRender = function () {

    // Basic calendar
    var _componentFullCalendarAdmin = function (events) {

        // Define element
        var calendarAgendaViewElement = document.querySelector('.fullcalendar-agenda-admin');

        // Initialize
        if (calendarAgendaViewElement) {
            var calendarAgendaViewInit = new FullCalendar.Calendar(calendarAgendaViewElement, {
                plugins: ['dayGrid', 'timeGrid', 'interaction'],
                select: function (start, end) {
                    var title = prompt("Add event:");
                    var data;
                    if (title != '') {
                        data = {
                            title: title,
                            start: start,
                            end: end
                        };
                        calendarAgendaViewInit.addEvent(data);
                    }
            }).render();

        }
    };

    //
    // Return objects assigned to module
    //

    return {
        init: function () {
            _componentRender();
        }
    }
}();


// Initialize module
// ------------------------------

document.addEventListener('DOMContentLoaded', function () {
    FullCalendarAdmin.init();
});

如何使用 calendarAgendaViewInit 调用 addEvent 函数而不将函数作为未定义错误获取？

提前致谢！

Answer 1

问题是您立即调用 .render。
所以你的 calendarAgendaViewInit 不是 FullCalendar.Calendar 的实例，而是 render 方法的结果。
您可以做的是首先定义 calendarAgendaViewInit 变量

var calendarAgendaViewInit = new FullCalendar.Calendar(calendarAgendaViewElement, {
                plugins: ['dayGrid', 'timeGrid', 'interaction'],
                select: function (start, end) {
                    var title = prompt("Add event:");
                    var data;
                    if (title != '') {
                        data = {
                            title: title,
                            start: start,
                            end: end
                        };
                        calendarAgendaViewInit.addEvent(data);
                    }
            });

然后调用calendarAgendaViewInit.render().

Answer 2

这是对上述评论的扩展解释。看起来 calendarAgendaViewElement 只是您找到并分配给变量的 DOM 元素。这里的问题是你只能在 class 实例化上调用方法，这些实例化现在是内部有方法的对象。如果您看到其他人这样调用 addEvent，那么他们很可能会在 class 的实例化上调用它，这意味着 addEvent 之前已被声明为 class 的一部分他们只是在调用该方法。

看下面的例子，

如果我声明一个class如下：


class Sample {
   sayHello(){
      console.log('hello')
    }
 }

然后实例化一个新的对象 'Sample' class:

var sampleClass = new Sample()

然后我可以通过引用对象内部的方法来调用'sayHello'

sampleClass.sayHello() // hello

希望对您有所帮助

如何在自身内部使用变量

How to use a variable inside itself

javascript

ecmascript-6

fullcalendar-4