未定义 Javascript 变量

debugcn 发表于 Dev

保罗·汉尼福思

为什么undefined我移动鼠标时总是提示？它应该返回真，对吧？我希望有人能帮助我 :) 在你问之前，我在另一个 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);

 }

}

全栈人

您可以使用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();