Question

我正在尝试将我的原型函数绑定到事件侦听器，但不知怎的，这不起作用。我怀疑这是因为函数调用的范围不正确引起的。我有一些问题，我通过下面的简化示例说明了这一点。

假设我有以下JavaScript原型：

<html>
	<head>
		<script type="text/javascript">
			function BindActionsToHTMLObject(htmlElement) {
				this.htmlElement = htmlElement;
				 
				this.setUp = function() {
					this.htmlElement.onclick = this.doAction;
				};
				 
				this.doAction = function() {
					console.log(this.htmlElement);
					this.htmlElement.innerHTML += " adding content";				
					setTimeout(this.addContent, 3000);
				};
			}
		</script>
	</head>
	<body>
		<textarea id="usedElement"></textarea>
		<script type="text/javascript">
			var el = new BindActionsToHTMLObject(document.getElementById("usedElement"));
			el.setUp();
		</script>
	</body>
</html>

当我尝试将onclick事件监听器绑定到this.doAction()函数时，我得到this.doAction()不是函数的错误。我想在课堂上进行事件绑定，因为它对我来说似乎更清晰。

然而，直接运行protoype函数显然工作正常（没有事件监听器）。所以我可以在原型之外绑定onclick事件......

<html>
	<head>
		<script type="text/javascript">
			function BindActionsToHTMLObject(htmlElement) {
				this.htmlElement = htmlElement;
				 
				this.setUp = function() {
					this.htmlElement.onclick = this.doAction();
				};
				 
				this.doAction= function() {
					console.log(this.htmlElement);
					this.htmlElement.innerHTML += " adding content";				
					setTimeout(this.doAction, 3000);
				};
			}
		</script>
	</head>
	<body>
		<textarea id="usedElement"></textarea>
		<script type="text/javascript">
			var el = new BindActionsToHTMLObject(document.getElementById("usedElement"));
			el.doAction();
		</script>
	</body>
</html>

这会将内容添加到元素中，但是如果我在超时事件中调用该函数，则函数会被调用但是对this.htmlElement的引用为null，所以我猜这个对象在传递时会再次丢失范围作为一个事件。传递函数的正确方法是什么？将其包裹在(function() { this.doAction(); })();和变种中并没有帮助。

JavaScript原型：引用原型/对象函数

0 个答案: