使用bind

Question

我真的不明白为什么在foreach（console.log打印的地方）这变成了Window对象。提前谢谢。

代码检测到悬停事件，然后读取范围滑块值。

HTML，

<input type="range" min="0" max="255" step="1" value="10" id="rangeR">

JS，

var ColorDispatcher = function() {
this.rgbColorArray=new Array(0,0,0);
};

ColorDispatcher.prototype = {
hoverHandler:function () {
     var SliderArray=new Array(document.getElementById("rangeR"));
     SliderArray.forEach(function sliderHandler(element, index, array){         
     console.log(this);
             element.addEventListener("change", function() {
                 if(index==0){//R
                     this.rgbColorArray[0]=element.value;                       
                 }
             });

     });


},

};
var dispatcher = new ColorDispatcher();
document.body.addEventListener('mouseover',dispatcher.hoverHandler.bind(dispatcher));

Answer 1

bind为其调用的函数设置this的值。当您致电dispatcher.hoverHandler时，this为dispatcher

这一行：

console.log(this);

...不属于dispatcher.hoverHandler

它是您传递给SliderArray.forEach的sliderHandler函数的一部分。

如果你想传递一个不同的this值，那么你应该使用forEach的第二个参数（在函数之后）。

Answer 2

为什么要命名回调函数？

我认为不是传递一个匿名函数而是创建一个全局函数，然后'this'就是窗口。

尝试删除名称'sliderHandler'。