时间戳

首页 > 解决方案 > Javascript变量未定义

javascript - Javascript变量未定义

问题描述

为什么undefined我移动鼠标时总是提示？它应该返回 true，对吗？我希望有人可以帮助我:) 在你问之前我在另一个 JavaScript 文件中调用了这个类！

class Block {

 constructor() {

    this.movable = true;
    this.move = false;

    this.div = document.createElement("div");
    this.div.classList.add("block");

    this.div.addEventListener("mousemove", function() {

        console.log(this.movable); 

    });
    this.div.addEventListener("mousedown", function() {

        this.move = true;
        console.log("test");

    });
    this.div.addEventListener("mouseup", function() {

        this.move = false;
        console.log("test1");

    });

 }
 add() {

     document.body.appendChild(this.div);

 }
 remove() {

     document.body.removeChild(this.div);

 }

}

标签： javascriptclassvariableseventsundefined

解决方案

你可以使用ES6的箭头函数()=>{}来解决你的问题。箭头函数使用this当前执行上下文。在这种情况下，它是class具有初始化movable属性的实例。

普通匿名函数将使用this侦听器所附加的对象的 ，在您的情况下是div. 由于div没有movable你得到的财产undefined。

class Test{

 constructor() {
      this.movable = true;
      this.move = false;

      this.div = document.createElement("div");
    
      this.div.classList.add("block");

      this.div.addEventListener("mousemove", ()=> {
          console.log(this.movable); 
      });
      this.div.addEventListener("mousedown", ()=> {
          this.move = true;
          console.log("test");
      });
      this.div.addEventListener("mouseup", ()=> {
          this.move = false;
          console.log("test1");
      });
    }

 add(){
     this.div.textContent ="Hover over me.";
     document.body.appendChild(this.div);
 }

 remove(){
     document.body.removeChild(this.div);
 }

}
var test = new Test();
test.add();
<body>
</body>

引用 MDN：

箭头函数表达式的语法比函数表达式短，并且没有自己的 this、arguments、super 或 new.target。这些函数表达式最适合非方法函数，它们不能用作构造函数。

推荐阅读