Question

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<canvas id="cv" style="border:2px solid black;">
<script>
    class Click {

        constructor() {
            let cv = document.getElementById("cv");
            this.cv = cv;
            let x = 3;
            this.x = x;
            this.cv.addEventListener('click', this.f);   //Line A
            this.f();                                    //Line B
        }
        f() {
            console.log(this.x);
        }
    }
    new Click();
</script>

B行向控制台显示值3。但是A行显示“未定义”，因为eventListener调用了相同的函数。

如果我删除了所有面向对象的东西，例如构造函数，类和“此”。但是它必须是面向对象的。也许我滥用了'this'关键字。

Answer 1

将功能更改为箭头功能

this.f = () => { console.log(this.x); };

箭头函数始终绑定到创建它们的类，普通函数绑定到调用它们的类。this关键字指向该函数绑定到的类。

Answer 2

这是因为范围。调用click事件时，它将具有来自click的当前范围。为此，您需要进行以下编辑或使用arrow function

this.cv.addEventListener('click', this.f.bind(this));

为什么事件监听器调用该值时未定义该值？的JavaScript

2 个答案: