javascript - 在 JavaScript 类中处理 DOM 事件

Question

(随意改写标题；我发现这很难用语言表达。)

我创建了一个 JavaScript“类”(因为没有更好的词；我知道 JS 不是基于类的)，它代表一个 textarea 和一个 div.
每次文本区域的值发生更改时，我都希望 div 的内容相应更新，因此我想为文本区域分配一个 onkeyup 事件处理程序 - 然而，结果比我想象的问题更多。

这是我的 HTML 的相关部分:

<div id="container"></div>
<script src="MyTextarea.js"></script>
<script>
    var ta = new MyTextarea('container');
</script>

这是我迄今为止编写的 JS:

function MyTextarea(id) {

    this.textarea = document.createElement('textarea');
    this.box = document.createElement('div');

    var container = document.getElementById(id);
    container.appendChild(this.textarea);
    container.appendChild(this.box);

    this.textarea.onkeyup = this._synchronize;

}


MyTextarea.prototype._synchronize = function () {

    this.box.innerHTML = this.textarea.value;

};

这不但不起作用，反而坚持抛出“this.textarea”未定义”错误。事实证明，令我惊讶的是，在 _synchronize 函数中，this 并不引用 MyTextarea 对象，而是引用 textarea 元素本身。我很困惑为什么会这样。

我在做什么和/或没有到达这里？是因为我在“类”中这样做吗？我怎样才能实现这个目标？

Answer 1

当您将事件处理程序指定为直接函数引用时，您将丢失上下文。换句话说，this 不是指向 MyTextarea 实例对象，而是指向 HTMLTextAreaElement 对象。

有多种解决方案，例如您可以显式绑定(bind)上下文:

this.textarea.onkeyup = this._synchronize.bind(this);

或者你可以用老式的方式来做:

var self = this;
this.textarea.onkeyup = function() {
    self._synchronize();
};