了解对象原型模式

Question

我有一个用于子菜单的工作 javascript 解决方案，其中子菜单容器不是链接容器的子级或同级。我只是想尝试原型模式。所以我正在尝试将已经工作的代码转换为原型模式以获得更具可读性的代码，但我目前失败了。我在控制台中没有收到任何错误，但代码不起作用。

jQuery(document).ready(function ($) {
   function tg_dropdown(element) {
      this.element = element;
      this.mainNavigation = $('#top-menu');
      this.dropdownLink = this.mainNavigation.find('.has_dropdown');
      this.bindEvents();
}
tg_dropdown.prototype.bindEvents = function() {
    var $tg_megamenu__link = $('.tg-megamenu__link'),
        self = this;
    $tg_megamenu__link.mouseenter(function(event) {
        self.showDropdown();
    }).mouseleave(function() {
        setTimeout( function () {
        if ($('#top-menu').find('.has-dropdown:hover').length == 0 && $('#main-header').find('.tg-submenu:hover').length == 0)
         self.hideDropdown();
    }, 50);
    })
};
tg_dropdown.prototype.showDropdown = function () {
    $('body').addClass('test');
};
tg_dropdown.prototype.hideDropdown = function () {
    $('body').removeClass('test');
}
});

我可能会监督原型模式的一些基本基础知识。有人可以指导我以正确的方式让这件事工作吗？

Answer 1

你正在写的是告诉JS引擎为tg_dropdown函数腾出一个内存空间，这样它就不会调用该函数。

function tg_dropdown(element) {
  this.element = element;
  this.mainNavigation = $('#top-menu');
  this.dropdownLink = this.mainNavigation.find('.has_dropdown');
  this.bindEvents();
}

可以使用new创建tg_dropdown对象。

希望这有帮助：）