Javascript变量未定义，在构造函数外部引用

Question

我已经被困在这个好一个小时了，我知道这是很简单的事情，但不能把我的头围绕🤦🏽

所以我在构造函数中设置的两个变量在调用它们时在构造函数之外都是未定义的。

这是一个js文件，最终用于shopify网站的搜索组件。提前感谢!

请看下面的代码:

class PredictiveSearch extends HTMLElement {

constructor(){
super();

//Set elements
this.searchBtn = this.querySelector('#search-btn');
this.searchContainer = this.querySelector('#main-search_wrapper');

// Set event listeners
this.searchBtn.addEventListener("click", this.openSearch);
}

// Open search overlay
openSearch(){
console.log(this.searchContainer);
this.searchContainer.style.display = "block";
}

}
customElements.define('predictive-search', PredictiveSearch); 

Answer 1

调用openSearch()时，您的HTML可能尚未加载。在调用函数之前，检查元素是否已经加载。

loading = setInterval(() => {
if (document.getElementById("main-search_wrapper")) {
openSearch();
clearInterval(loading);
}
}, 100);

如果这不起作用，尝试在构造函数中将openSearch()绑定到this，以确保this是正确的。

function constructor() {
...
this.searchContainer = this.querySelector('#main-search_wrapper');
const openSearch = (() => {
console.log(this.searchContainer);
this.searchContainer.style.display = "block";              
}).bind(this);
}

Answer 2

我认为这是因为this在constructor()函数内部时没有引用类/类的实例。我认为它指的是函数本身。