声明函数的Javascript TypeError

HTML

在调用此.test（）之前，我的代码运行良好。我得到的错误是

(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();
})();

---

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

因为addEventListener正在调用该方法，所以它的上下文被更改为addEventListener函数的上下文（您可以在

showValue

上控制台记录

this

以进行测试）。这可以使用

bind

方法修复（每个双关语）：

TypeError: this.test is not a function

---

这样可以确保上下文得到维护。

bind

所做的实质是强制在方法绑定的范围内调用该方法。在我们的例子中，我们通过传入

this

将其绑定到

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

TypeError: this.test is not a function

这样可以确保上下文得到维护。
bind
所做的实质是强制在方法绑定的范围内调用该方法。在我们的例子中，我们通过传入
此
的可能副本，将其绑定到
ClickTest
ClickTest.prototype.addListener = function() {
   this.elem.addEventListener('change', this.showValue.bind(this) );
};