ES6类 - 从点击事件调用方法[重复]答案

【问题标题】：ES6 Classes - Calling methods from a click event [duplicate]ES6类 - 从点击事件调用方法[重复]
【发布时间】：2018-08-31 13:05:24
【问题描述】：

我是 ECMA 课程的新手。

在下面的代码中，我构建了一个运行良好的按钮类。现在我试图从点击事件监听器内部调用 prev_image() 方法。我知道“this”指的是按钮实例，但不确定如何从 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!');
    }

}

【问题讨论】：

使用箭头函数()=>将父作用域绑定到子作用域

标签： javascript ecmascript-6 es6-class

【解决方案1】：

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

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

【讨论】：

每个函数都进行词法作用域。我猜你的意思不是变量“范围”？
完全不是变量范围。我宁愿再添加几行来解释:) @Bergi
所以请edit你的答案，不要使用“范围”这个词。

【解决方案2】：

尝试使用.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();

&lt;button id='prevbtn'&gt;Click&lt;/button&gt;

【讨论】：

【解决方案3】：

使用这种方式的函数，您需要绑定this。但是，将函数更改为箭头函数：

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

它应该可以工作。不再需要绑定this，也干净了很多。

【讨论】：