予期せぬバインドを使用した後のこの値

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); 

...それはあなたがSliderArray.forEachに渡すsliderHandler機能の一部であるdispatcher.hoverHandler

の一部ではありません。

違うthis値を渡したい場合は、あなたが（機能後）forEachに二引数を使用してそれを行う必要があります。

Answer 2

あなたはコールバック関数の名前はなぜ？

私は匿名関数を渡す代わりに、グローバル関数を作成し、次に 'this'がウィンドウであると思います。

名前 'sliderHandler'を削除してみます。