Question

similar question here, but not fully answered

我正在尝试将我的Web应用程序放在一个类中以便更好地进行封装，因此它可能更适合用作其他站点上的插件。但是对于需要回调（鼠标悬停等）的事件，它们会丢失调用类对象的上下文。到目前为止，我发现的唯一解决方案是使用JQuery的$.proxy方法。我创建了一个简单的例子：

https://jsfiddle.net/swb909/dcad5m3b/

我希望有一个稍微优雅的原生解决方案/战略，但我找不到一个。这是什么最好的做法？

编辑：也许更好的例子是AJAX请求的JQuery回调，Node.JS发出回调或setTimeout调用 - 都都在调用类对象的上下文/范围之外。

Answer 1

回调不会继承调用函数的上下文。示例：http://jsfiddle.net/swb909/h29aqmyg但我更关心与维护上下文的整体实践一样，这个问题适用于来自类和setTimeout或类的东西的所有回调 Node.JS发出回调等

这取决于处理程序的预期上下文。 overBox，outBox方法似乎都使用选择器$('#box')来调用.css()而不是$(this);可以将this设置为hoverbox，以便在事件处理程序中访问hoverbox属性，而不会影响预期结果。

尝试使用Function.prototype.bind()

var hoverbox = function(id, overColor, outColor) {
    this.changeColors(overColor, outColor);
    $(id).mouseover(this.overBox.bind(this))
    $(id).mouseout(this.outBox.bind(this))
}

hoverbox.prototype.overBox = function (e) {
    console.log(e, this)
  $('#box').css('background', this.overBoxColor)
}

hoverbox.prototype.outBox = function () {
  $('#box').css('background', this.outBoxColor)
}

hoverbox.prototype.changeColors = function (overColor, outColor) {
    this.overBoxColor = overColor;
    this.outBoxColor = outColor;
    $('#box').css('background', outColor)
}

var hb = new hoverbox('#box', 'blue', 'red');

$('#changeColors1').click(function(){hb.changeColors('yellow', 'green')})
$('#changeColors2').click(function(){hb.changeColors('purple', 'orange')})
$('#changeColors3').click(function(){hb.changeColors('blue', 'red')})

jsfiddle https://jsfiddle.net/h29aqmyg/3/

什么是在类上下文/范围内保持类回调的最佳JavaScript实践？

1 个答案: