如何在内部使用变量

时间:2019-06-11 18:28:34

标签: javascript ecmascript-6 fullcalendar-4

我想在变量内部使用它,我看到其他人也这样做了,但是为什么它对我不起作用?

这是我的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函数,而又不将函数视为未定义的错误?

谢谢!

2 个答案:

答案 0 :(得分: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()

答案 1 :(得分:1)

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

请参见下面的示例

如果我声明一个类如下:


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

然后实例化“示例”类的新对象:

var sampleClass = new Sample()

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

sampleClass.sayHello() // hello

希望有帮助