如何解决：“无法读取未定义TypeError的属性'init'”？

Question

我在JavaScript文件中使用的是Jquery-3.2.1，Jquery-Ui 1.12.1。

window.TruyenOnlineScript = (function () {
    var _this = {};

    _this.init = function () {
        _this.initSearchMobile();
        _this.initSidebar();
    };   

    _this.initSearchMobile = function () {
        //Open Input Search Mobile
        $('.js-open-search-box-mobile').on('click', function (event) {
            event.preventDefault();
            $('body').addClass('open-search-box');
            setTimeout(function () {
                $('#js-search-input-mobile').focus()
            }, 500);
        });
    };

    _this.initSidebar = function () {
        //Open Navbar Moblie
        $('.js-open-sidebar').on('click', function (event) {
            event.preventDefault();
            event.stopPropagation();
            $('body').addClass('open-sidebar');
        });
    };

})();

$('document').ready(function () {
    window.TruyenOnlineScript.init();
});

但是我得到了错误“未定义的初始值”：

有人可以教我如何解决它吗？谢谢！

Answer 1

您正在将window.TruyenOnlineScript设置为立即调用函数表达式的返回值：

window.TruyenOnlineScript = (function () {
   . . .
})();

但是该表达式不返回任何值，因此window.TruyenOnlineScript最终变成undefined（这就是为什么您不能在init()上调用undefined的原因）。

您需要让IIFE返回一个对象供TruyenOnlineScript引用。

window.TruyenOnlineScript = (function () {
    var _this = {};

    _this.init = function () {
        _this.initSearchMobile();
        _this.initSidebar();
    };   

    _this.initSearchMobile = function () {
        //Open Input Search Mobile
        $('.js-open-search-box-mobile').on('click', function (event) {
            event.preventDefault();
            $('body').addClass('open-search-box');
            setTimeout(function () {
                $('#js-search-input-mobile').focus()
            }, 500);
        });
    };

    _this.initSidebar = function () {
        //Open Navbar Moblie
        $('.js-open-sidebar').on('click', function (event) {
            event.preventDefault();
            event.stopPropagation();
            $('body').addClass('open-sidebar');
        });
    };
    
    return _this; // <-- Now this will be returned

})();

$('document').ready(function () {
    window.TruyenOnlineScript.init();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

一些用户已经为您提供了解决方案，但是我想向您展示创建同一对象的另一种方法。我不能说它“更好”，但是它更清晰，更容易理解：

window.TruyenOnlineScript = {
    init: function () {
        this.initSearchMobile();
        this.initSidebar();
    },

    initSearchMobile: function () {
        //Open Input Search Mobile
        $('.js-open-search-box-mobile').on('click', function (event) {
            event.preventDefault();
            $('body').addClass('open-search-box');
            setTimeout(function () {
                $('#js-search-input-mobile').focus()
            }, 500);
        });
    },

    initSidebar: function () {
        //Open Navbar Moblie
        $('.js-open-sidebar').on('click', function (event) {
            event.preventDefault();
            event.stopPropagation();
            $('body').addClass('open-sidebar');
        });
    }   
};