Question

我是ECMA课程的新手。

在下面的代码中，我构建了一个工作正常的按钮类。现在我试图从click eventlistener中调用prev_image（）方法。我知道这个＆＃39;指的是按钮实例但不确定如何从Gallery类调用方法。谢谢你的帮助。

class Gallery{

    constructor(){
    }

    draw(){

        //build button
        prevbtn.draw();

        //button listener
        document.getElementById('prevbtn').addEventListener('click', function(){
            this.prev_image();   <--- this errors out
            console.log('pressed'); <--this works
        });

    }

    prev_image(){
        console.log('previous image!');
    }

}

Answer 1

document.getElementById('prevbtn').addEventListener('click', ()=>{
            this.prev_image();   
            console.log('pressed');
        });

在这里使用箭头功能。箭头功能没有自己的this它使用包含箭头功能的代码中的this

Answer 2

使用这种方式的函数，您需要绑定function () { return {{Click Element}}.parentNode.lastChild.previousSibling.innerText }。但是，将功能更改为箭头功能：

this

它应该有效。您不再需要绑定prev_image = () => { console.log('previous image!'); }，而且它也更加清晰。

Answer 3

使用.bind(this)绑定上下文来尝试

class Gallery {

  constructor() {}

  draw() {

    //build button
    //prevbtn.draw();

    //button listener
    document.getElementById('prevbtn').addEventListener('click', function() {
      this.prev_image();
      console.log('pressed');
    }.bind(this));

  }
  // prevbtn.draw(){
  //console.log('prev btn')
  //}

  prev_image() {
    console.log('previous image!');
  }

}

var x = new Gallery();
x.draw();

<button id='prevbtn'>Click</button>

ES6类 - 从单击事件中调用方法

3 个答案: