Javascript 声明函数的类型错误

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

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

Answer 1

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

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

这确保了上下文得到维护。 bind 所做的本质上是强制该方法在它所绑定的范围内被调用。在我们的例子中，我们通过传入 this.

将其绑定到 ClickTest

Javascript 声明函数的类型错误

Javascript TypeError for declared function

javascript

javascript-events