所以我在"这"中遇到了一些混乱。在事件处理程序中并正确保留它们。我已经做了很多谷歌搜索,并已经想出了"为什么"在调用元素时这会发生变化......但实际上并不是解决这个问题的方法。
我在这里设置了一个示例概念: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代码)。
答案 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功能引起的。