瞭解object.prototype模式

我有一個可操作的JavaScript解決方案的子菜單，子菜單容器不是孩子或兄弟的鏈接容器。我只是試圖用原型模式進行試驗。所以我試圖將已經工作的代碼翻譯成原型模式以獲得更易讀的代碼，而且我目前失敗了。我在控制檯中沒有得到任何錯誤，但代碼不起作用。瞭解object.prototype模式

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'); 
} 
});

我可能會監督原型模式的一些基礎知識。有人能指導我以正確的方式讓這件事情起作用嗎？

來源

2017-10-07 DoUtDes

您還沒有創建任何'tg_dropdown'類的實例。 'tg_dropdown'函數（類構造函數）永遠不會被調用。 – Titus

您需要調用'new tg_dropdown（element）'來獲得工作實例。 – ideaboxer

[JavaScript .prototype如何工作？]（https://stackoverflow.com/questions/572897/how-does-javascript-prototype-work） – ideaboxer

你正在寫的是告訴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對象。

希望這會有所幫助:)

來源

2017-10-07 23:21:37

瞭解object.prototype模式

回答

相關問題