Javascript 原型继承问题

我不熟悉原型继承的概念，我有以下几点：

var dynamicPropertyOverview = new Tab($('#dynamicPropertyOverview'), $('.edit-search'));
dynamicPropertyController.init($('#dynamicPropertyOverview'), $('.edit-search'));
dynamicPropertyOverview.setUpPill(); 
$(window).resize(dynamicPropertyOverview.setUpPill.bind(dynamicPropertyOverview));

var dynamicPropertyReview = new Tab($('#dynamicPropertyReviews'), $('.edit-search'));
dynamicPropertyController.init($('#dynamicPropertyReviews'), $('.edit-search'));
dynamicPropertyReview.setUpPill(); 
$(window).resize(dynamicPropertyReview.setUpPill.bind(dynamicPropertyReview));

var dynamicPropertyMap = new Tab($('#dynamicPropertyMap'), $('.edit-search'));
dynamicPropertyController.init($('#dynamicPropertyMap'), $('.edit-search'));
dynamicPropertyMap.setUpPill(); 
$(window).resize(dynamicPropertyMap.setUpPill.bind(dynamicPropertyMap));

其中，我的原型功能如下：

function Tab(page, pill) {
    this.page = page;
    this.pill = pill;
}

Tab.prototype.setUpPill = function () {
    if(dynamicPropertyController.isDynamicPropertyOverview(this.page) && checkMobileAndTabletVisibility.isTabletView()){
        dynamicPropertyController.addSearchModalMobileTrigger();
        if(!pillView.isSearchBarNotHidden()){
            pillView.hideSearchBarDisplayPill(this.page, this.pill);
        }
    }
    else{
        dynamicPropertyController.addSearchBarDesktopTrigger();
    }
};

我遇到的问题是，每次调用新实例时：

1) var dynamicPropertyOverview = new Tab($('#dynamicPropertyOverview'), $('.edit-search'));
2) var dynamicPropertyReview = new Tab($('#dynamicPropertyReviews'), $('.edit-search'));
3) var dynamicPropertyMap = new Tab($('#dynamicPropertyMap'), $('.edit-search'));

is将始终被下一个覆盖

我认为解决这个问题的一种方法是将每个实例包装在一个if语句中，如下所示：

 if($('#dynamicPropertyReviews').length){
    var dynamicPropertyReview = new Tab($('#dynamicPropertyReviews'), $('.edit-search'));
    dynamicPropertyController.init($('#dynamicPropertyReviews'), $('.edit-search'));
    dynamicPropertyReview.setUpPill(); 
    $(window).resize(dynamicPropertyReview.setUpPill.bind(dynamicPropertyReview));
}

虽然这是可行的，但我想知道是否有更好的方法来解决这个问题

添加了动态PROERTY控制器：

var dynamicPropertyController = (function() {

    var searchBarModalTrigger = 'js-open-mobile-search';

    function isDynamicPropertyOverview(page){
        return page.length;
    }

    function addSearchModalMobileTrigger(){
        $('.edit-search').removeClass('display-searchBar').addClass(searchBarModalTrigger);
    }

    function addSearchBarDesktopTrigger(){
        $('.edit-search').removeClass(searchBarModalTrigger).addClass('display-searchBar');
    }

    function init(page, pill){
        if(page.length){
            pillView.hideSearchBarDisplayPill(page, pill);
        }

    }

    return {
        isDynamicPropertyOverview: isDynamicPropertyOverview,
        addSearchModalMobileTrigger: addSearchModalMobileTrigger,
        addSearchBarDesktopTrigger: addSearchBarDesktopTrigger,
        init: init
    }

})();

---

new

关键字总是创建新对象。您的问题似乎是您只有一个全局

dynamicPropertyController

。请告诉我们它的定义。你认为什么被覆盖了，在哪里？您的

选项卡

实例肯定是不同的对象。1）var dynamicPropertyOverview=新选项卡（$（“#dynamicPropertyOverview”），$（“.edit search”）；2） var dynamicPropertyReview=新选项卡（$（'dynamicPropertyReviews'），$（'edit search'）；3） var dynamicPropertyMap=新选项卡（$（“#dynamicPropertyMap”），$（“.edit search”）；3覆盖2哪些覆盖1您的问题是否与使用

编辑搜索

类具有多个元素有关？如果希望每个选项卡“拥有”自己的编辑搜索元素，可以尝试类似于

dynamicPropertyController.init（$（“#dynamicPropertyReviews”）、$（“#dynamicPropertyReviews.edit search”）的方法

或让选项卡记住其容器，并让选项卡仅操作容器中的元素：

#dynamicPropertyReviews其他_选择器