使用"此"

时间:2017-04-29 08:54:19

标签: javascript jquery

所以我在"这"中遇到了一些混乱。在事件处理程序中并正确保留它们。我已经做了很多谷歌搜索,并已经想出了"为什么"在调用元素时这会发生变化......但实际上并不是解决这个问题的方法。

我在这里设置了一个示例概念:https://jsfiddle.net/msmith1114/xu4zbppz/8/

你有两个按钮和一个简单的课程。我关注的主要部分是在我的类原型中为这些按钮设置jquery事件处理程序(我已经发布了一个单独的问题,关于事件处理程序应该在哪里"通常"在这里引用javascript类时去:ES6 Classes/Object oriented and Event Handlers

其中一个答案会详细介绍"这个"这是有道理的。

只看班级:

class Player {
  constructor() {
    $(".demo").click(function() {
      console.log(this)
      console.log($(this).text())
    });
    this.color
    this.name = 'Player 1'
  }

  printName(player) {
    if (player == 1)
      console.log(this.name + "'s color is " + this.color)
  }
}

ER,如何在点击时为构造函数项设置事件处理程序。 IE如果我想将this.color(对于播放器类)存储等于button.text()值,该怎么办?如果我绑定$(this),那么我就无法参考按钮文字....但是如果我不绑定它,我就无法存储它,因为我可以'确实在事件处理程序this.color = $(this).text()中说的最好,如果有效的话。

或者这只是直接的不良做法?我刚刚开始这个课程并且真正深入了解面向对象的javascript ......我学到了很多关于this和对象创建的知识,但是当我将它实现到与DOM相关的JS代码时,我并不是真的知道放置我的事件处理程序的位置。 (比如在一个井字游戏中,我创建了一个" board"类,所以在我看来,事件处理程序将在" board"类本身....我是以错误的方式来做这件事的吗?

或者是否有合理的解决方法。我已经看到了一些将click事件处理程序分配给变量的示例....但我不确定我是否明白这一点(反正它们大部分都是非jquery代码)。

2 个答案:

答案 0 :(得分:3)

您不一定要在jQuery事件处理程序中使用this来获取触发事件的元素,您也可以使用event.target来获取它。

我建议您将它与箭头功能一起使用以获得所需的效果:

class Player {
    constructor() {
        this.name = 'Player 1'
        $(".demo").click(ev => {
            console.log(ev.target)
            console.log($(ev.target).text())
            console.log(this.name)
        });
    }
}

如果由于某种原因不想使用箭头功能,常用的解决方法是将this分配给变量,例如_this,以便在具有不同this范围的回调中提供参考:

class Player {
    constructor() {
        this.name = 'Player 1'
        const _this = this;
        $(".demo").click(function (ev) {
            console.log(ev.target)
            console.log($(ev.target).text())
            console.log(_this.name)
        });
    }
}

...或者您可以使用bind

class Player {
    constructor() {
        this.name = 'Player 1'
        $(".demo").click(function (ev) {
            console.log(ev.target)
            console.log($(ev.target).text())
            console.log(this.name)
        }.bind(this));
    }
}

答案 1 :(得分:0)

我想我发现了这个错误..试试吧!

constructor(){
    $(".demo").click(function() {
        console.log(this)
            console.log($(this).text())
    });
    this.color
    this.name = 'Player 1'
}

问题是由BIND功能引起的。