クリックハンドラーでのバインドと参照オブジェクトの値の適切な使用

Question

バインドの適切な使用と、クリック時のハンドラーで開いていた過去のリンクへの参照を回避するのに問題があります。

この関数は、4つのリンクの配列を受け取ります。私はちょうどクリックの正しいリンクを開けたいと思う。

リンク2と3は、ウィンドウオブジェクトにバインドされているため動作します。リンク0と1は、渡された最初の配列で機能しますが、新しいリンク配列が関数に渡されたときにクリックされると、関数に最後に渡されたリンクではなく、前のリンクが開きます。

私は、ウィンドウオブジェクトに値を追加することは悪い習慣であることを知っています。そのため、バインド、適用、呼び出しをよりよく理解しながら実装するためのより良い方法を見つけようとしています。 （ここでも必要ならば）。

渡された最初の4つのリンクは正しいものの、他の時間リンクが渡されるのはなぜですか、それはリンクの最初のセットを参照して開き続けますか？

links = function(linksArr) { 
    var that = this; 
    this.linkArray = linksArr; 
    //Create an object from array in attempt to get correct link on event click 
    var linkReference = linksArr.reduce(function(all,item,index){ 
     all[index] = item; 
     console.log(all); 
     return all; 
    },{}); 
    //Does not work. Attempted use of bind 
    $('.link0').on("click", function() { 
     window.open(linkReference[0], '_blank'); 
    }.bind(linkReference)); 
    //Does not work. Trying to apply the proper links through the apply method 
    $('.link1').on("click", function() { 
     window.open(linksArr[1], '_blank'); 
    }.apply(null,linksArr)); 
    //Works 
    $('.link2').on("click", function() { 
     window.open(that.linkArray[2], '_blank'); 
    }); 
    //Works 
    $('.link3').on("click", function() { 
     window.open(that.linkArray[3], '_blank'); 
    }); 
};` 

Answer 1

bind()バインドする要素をメソッド内の 'this'にします。バインド時に使用した名前ではなく、参照として 'this'を使用する必要があります。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind