ES6クラスでのコンテキストの処理

Question

私は角度2の領域に移行しており、ドラッグアンドドロップコンポーネントを作成することに決めました。だから、：

私はそうのように定義された割り当てられたタイプのいくつかの変数があります。

export class UploadComponent { 
    image: Blob; 
    reader: FileReader; 
    ele: Element; 
    cols: NodeList; 
    dragSrcEl: Object; 

    ... 
} 

を私はそれらに対応するリスナーに取り付けたいくつかの機能を持っている - ここでは、問題の二つの機能は以下のとおりです。

handleDragStart(e) { 
    e.target.classList.remove('opaque'); 
    (() => { this.dragSrcEl = e; })(); 

    e.dataTransfer.effectAllowed = 'move'; 
    e.dataTransfer.setData('text/html', this['innerHTML']); 
    } 

および

handleDrop(e) { 
    if(e.stopPropagation) 
     e.stopPropagation(); 

    console.log('this -> '+this); 
    console.log('dragSrcEl -> '+(() => { this.dragSrcEl })()); 
    } 

したがって、ユーザーが要素のドラッグを開始するとthis.dragSrcElクラス変数をeに設定しましたが、2番目の関数にアクセスすると、すばらしい矢印関数を使用しても、undefinedと表示されます。どうして？

正しいコンテキストにアクセスして正しい変数にアクセスできるように、ここで矢印機能を使用するのは十分ではありませんか？私はこれがうまくいくと思うので、OOのjavascriptの基本的な誤解を持っている必要があります。

EDIT 1

おかげで、私もそうのような生命維持を使用せずに、それを呼び出す試してみました：

this.dragSrcEl = e; 

Answer 1

関数バインドのターゲットDOMイベントへのイベントハンドラはソースDOMノード自体であるためです。

ハンドラ内のオブジェクトを変更する場合は、ハンドラでオブジェクトを使用できるようにする必要があります。

引数をバインドするか、ターゲットをバインドするかのいずれかで終了します。

element.addEventListener('dragstart', onDragStart.bind(myComponent)); 

var button = document.querySelector('#my-button'); 
 
button.addEventListener('click', onClick); 
 

 
function onClick() { 
 
    console.log(this); 
 
}

<button id="my-button">Click Me</button>

Answer 2

あなたは生命維持

handleDragStart(e) { 
    e.target.classList.remove('opaque'); 
    this.dragSrcEl = e; 

    e.dataTransfer.effectAllowed = 'move'; 
    e.dataTransfer.setData('text/html', this['innerHTML']); 
    } 

handleDrop(e) { 
    if(e.stopPropagation) 
     e.stopPropagation(); 

    console.log('this -> '+this); 
    console.log('dragSrcEl -> '+this.dragSrcEl); 
    } 

を作成する必要がいけません