Javascript 使用ES6类：如何从事件处理程序中调用方法？

在下面的代码中

<button type="button" id="btnLogMsg">Press me</button>

<script>
class Logger {

    constructor() {     
        this.log("msg 1");          // logs 'msg 1': OK

        this.btnLogMsg = document.getElementById("btnLogMsg");
        this.btnLogMsg.addEventListener("click", function (evt) {
            console.log("msg 2");       // logs 'msg 2': OK
            log("msg 3");               // ERROR
            this.log("msg 3");          // ERROR
        });
    }  // ctor

    log(msg) {
        console.log(msg);
    }           
} // class Logger

var logger = new Logger();

按我
类记录器{
构造函数（）{
this.log（“msg 1”）；//记录“msg 1”：确定
this.btnLogMsg=document.getElementById（“btnLogMsg”）；
this.btnLogMsg.addEventListener（“单击”），函数（evt）{
console.log（“msg 2”）；//日志“msg 2”：确定
日志（“msg 3”）；//错误
this.log（“msg 3”）；//错误
});
}//ctor
日志（msg）{
控制台日志（msg）；
}           
}//类记录器
变量记录器=新记录器（）；

加载html文件时，输出为

味精1

按下按钮时，输出为

味精2

但不是

味精2

味精3

也不是 日志（“msg 3”）
也没有 此日志（“msg 3”）
工作

检查此日志（“3”）； 我知道“this”指的是单击的按钮，因此是btnLogMsg。 因此，调用这个.log（）是不可能的

那怎么办呢

多谢各位

---

克里斯你有很多选择。您的问题是，您的职能范围与职能范围外的范围不同，这就是为什么职能范围内的

此

与职能范围外的

不同

正如您提到的es6，最简单的方法是使用类似的：

另一种方法是保存指向外部
this
的指针，并使用该指针：

var self = this;
this.btnLogMsg.addEventListener("click", function(evt) {
    console.log("msg 2");       // logs 'msg 2': OK
    self.log("msg 3");          // should now work
});

第三种方法是将外部作用域绑定到内部函数（这与使用arrow函数的效果相同）：

你应该读一读关于scopes的书，然后想知道：为什么对我的问题投反对票？有人能帮我理解我做错了什么吗？@ChrisPeeters我没有投反对票，但我想你的问题可能格式更好，你可以告诉我们你尝试了什么，你在谷歌搜索了什么，为什么你在这里提问之前做的研究没有产生任何结果OK。下次我有问题时，我会采纳你的建议。谢谢
var self = this;
this.btnLogMsg.addEventListener("click", function(evt) {
    console.log("msg 2");       // logs 'msg 2': OK
    self.log("msg 3");          // should now work
});

this.btnLogMsg.addEventListener("click", function(evt) {
    console.log("msg 2");       // logs 'msg 2': OK
    this.log("msg 3");          // should now work
}.bind(this));