javascript - 如何在内部从事件监听器调用类函数？

Question

我正在努力建立我的JavaScript知识库，并且无法调用 function在我的class内当 event被 class 解雇对象的textbox 。我认为这与范围问题有关，但我不完全确定。在 C# 中执行此操作变得非常非常容易。

class FilterableDropdown {
	constructor(containerID) {
		this.ContainerID = containerID;
		this.Container = document.getElementById(containerID);
		this.Container.innerHTML += '<input type="text" id="txt-' + containerID + '-dropdown" />'
		
		// Add sub-controls.
		this.Textbox = document.getElementById("txt-" + containerID + "-dropdown");
		
		
		// Add events to sub-controls.
		this.Textbox.addEventListener("keyup", this.Filter);
	}
	Filter() {
		alert(this.ContainerID);
	}
}

var dropdown = new FilterableDropdown("fd-test");

.filterable-dropdown > input[type=text] {
	padding: 5px;
	border: none;
	border-bottom: 2px solid #333;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background-color: #3332;
  color: #eee;
}
.filterable-dropdown > input[type=text]:focus { background-color: #3338; }
*:focus { outline: none; }

<div id="fd-test" class="filterable-dropdown"></div>

要重现该问题，只需在 textbox 中键入任意字符即可。提高keyup事件。这将导致警报显示 undefined .

<小时/>

• 为什么是this.ContainerID返回为 undefined这里？
  • 我认为这是由于范围界定问题造成的。

如何调用 function在我的class内在sub-control上的事件？

Answer 1

您需要将this绑定(bind)到Filter方法。 this 应该指向类实例。

这可以通过使用Array.prototype.bind(thisContext)来实现，其中thisContext将是您的类FilterableDropdown实例:

class FilterableDropdown {
	constructor(containerID) {
		this.ContainerID = containerID;
		this.Container = document.getElementById(containerID);
		this.Container.innerHTML += '<input type="text" id="txt-' + containerID + '-dropdown" />'
		
		// Add sub-controls.
		this.Textbox = document.getElementById("txt-" + containerID + "-dropdown");
		
		
		// Bind this to the Filter method
		this.Textbox.addEventListener("keyup", this.Filter.bind(this));
	}
	Filter() {
		alert(this.ContainerID);
	}
}

var dropdown = new FilterableDropdown("fd-test");

.filterable-dropdown > input[type=text] {
	padding: 5px;
	border: none;
	border-bottom: 2px solid #333;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background-color: #3332;
  color: #eee;
}
.filterable-dropdown > input[type=text]:focus { background-color: #3338; }
*:focus { outline: none; }

<div id="fd-test" class="filterable-dropdown"></div>