Javascript 如何调用对象'；来自另一个对象的方法？

我正在使用ES6类创建自定义UI组件，如下所示：

class Dropdown {

    constructor(dropdown) {
        this.dropdown = dropdown;
        this._init();
    }

    _init() {
        //init component
    }

    setValue(val) {
        //"public" method I want to use from another class
    }
}

let dropdown = document.querySelectorAll(".dropdown");
if (dropdown) {
    Array.prototype.forEach.call(dropdown, (element) => {
        let DropDownEl = new Dropdown(element);
    });
}

当页面加载时，我启动如下组件：

class Dropdown {

    constructor(dropdown) {
        this.dropdown = dropdown;
        this._init();
    }

    _init() {
        //init component
    }

    setValue(val) {
        //"public" method I want to use from another class
    }
}

let dropdown = document.querySelectorAll(".dropdown");
if (dropdown) {
    Array.prototype.forEach.call(dropdown, (element) => {
        let DropDownEl = new Dropdown(element);
    });
}

但是现在我需要从另一个类访问其中一个类的方法。在这种情况下，我需要访问一个方法来设置下拉列表的值 基于URL参数，因此我希望执行以下操作：

class SearchPage {
//SearchPage is a class and a DOM element with different components (like the dropdown) that I use as filters. This class will listen to the dispached events
//from these filters to make the Ajax requests.

    constructor() {
        this._page = document.querySelector(".search-page")
        let dropdown = this._page.querySelector(".dropdown);
        //Previously I import the class into the file            
        this.dropdown = new Dropdown(dropdown);
    }

    setValues(val) {

        this.dropdown.setValue(val);
        //Set other components' values...
    }

}

但是当我创建这个实例时，另一个下拉列表被添加到页面中，这是我不想要的

---

我认为另一种方法是以这种方式在其他组件中创建组件，而不是像在第一段代码中那样。这是有效的方法吗？我应该创建另一个继承自原始下拉列表类的下拉列表类吗？

一个简单的解决方案是将

下拉列表实例存储在元素上，以避免重新创建它：

class Dropdown {
    constructor(element) {
        if (element.dropdown instanceof Dropdown)
            return element.dropdown;
        this.element = element;
        element.dropdown = this;

        //init component
    }
    …
}

“当页面加载时，我会像这样启动组件”-为什么？他们自己做什么？谁使用了
let-DropDownEl
s并调用了他们的公共方法？@Bergi实际上没有人。这是显示自定义元素而不是默认元素的方式。我应该改吗？@Bergi在他们的一号上会发送事件。这里的“元素”是什么？是下拉列表吗？@IsmaelOrdás是的，我将其重命名为更合适的
元素
。
搜索页面
有一个
下拉列表
，
下拉列表
有一个..
元素
，而不是另一个
下拉列表
。我仍然看不到它，因为我传递给构造函数的是一个DOM元素。您能提供另一个使用示例吗？另外，在其父对象内创建实例是有效的解决方案吗？（本例中为SearchPage类）在页面加载时，它没有创建。@IsmaelOrdás，而是传递了一个DOM元素，这就是参数名为
元素的原因。是的，在其他实例中创建实例是完全有效的。我无法从您给出的小片段判断您的完整应用程序体系结构是否有效。这只是一个简单且非密集型的解决方案，可以确保只要传递相同的元素，就可以从构造函数调用中获得相同的
下拉列表
实例。很抱歉，有这么多问题，但是如果传递的是DOM元素而不是对象，如何访问element.Dropdown？