代码之家 › 专栏 › 技术社区 › barrylachapelle

ES6类-从单击事件调用方法[重复]

es6-class ecmascript-6 javascript

barrylachapelle · 技术社区 · 7 年前

我是ECMA课程的新手。

在下面的代码中,我构建了一个运行良好的button类。现在,我试图从click eventlistener内部调用prev\u image()方法。我知道“this”指的是button实例,但不确定如何从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!');
    }

}

3 回复 | 直到 7 年前

Saikat Hajra 7 年前

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

此处使用箭头功能。箭头函数没有自己的 this 它使用 这 来自包含箭头函数的代码

brk 7 年前

通过使用绑定上下文进行尝试 .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>

cbll 7 年前

对于这样的函数,您需要绑定 this 。但是,请将该函数更改为箭头函数:

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

它应该会起作用。您不再需要绑定 这 ,而且它也干净多了。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

8 月前

Alex · 在轻量级中同时解构和不解构变量

8 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

8 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

8 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

8 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

9 月前

user3472810 · Angular@Output/EventEmitter返回undefined

9 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

9 月前