Question

HTML

<input type="checkbox" class="test" id="chk" /><label for="chk">Click</label>

<p id="demo"></p>

的JavaScript

(function (){
 var chk = document.querySelector('.test');

 function ClickTest(elem){
    this.elem = elem;
 };

ClickTest.prototype.addListener = function() {
   this.elem.addEventListener('change', this.showValue);
};
ClickTest.prototype.showValue = function(){
   console.log('Clicked');
   var d = document.getElementById('demo');
   d.innerHTML = "This works";
   this.test();
};
ClickTest.prototype.test = function(){
   console.log('Test function');
};

clickTest = new ClickTest(chk);
clickTest.addListener();
})();

在调用this.test（）之前，我的代码工作正常。我得到的错误是

TypeError: this.test is not a function

是因为从addEventListener调用showValue还是我在这里做错了什么？

Answer 1

因为addEventListener正在调用该方法，所以它的上下文正在被更改为addEventListener函数的上下文（您可以在this上控制日志showValue以进行测试）。这可以使用bind方法修复（每个双关语）：

ClickTest.prototype.addListener = function() {
   this.elem.addEventListener('change', this.showValue.bind(this) );
};

这可确保维护上下文。 bind的作用本质上是强制在绑定范围内调用方法。在我们的例子中，我们通过传入ClickTest将其绑定到this。

声明函数的Javascript TypeError

1 个答案: