2017-12-17 9 views
3

次のテストコードは正しく動作します。 mousemoveイベントはオブジェクトmousePositionの中にマウスの位置を格納するcheckPosition関数をトリガします。コールバック関数は、プロパティ自体を格納するオブジェクトですか?

"use strict"; 
 

 
const mousePosition = { 
 
    x: 0, 
 
    y: 0 
 
} 
 

 
function checkPosition(e) { 
 
    mousePosition.x = e.clientX; 
 
    mousePosition.y = e.clientY; 
 
} 
 
    
 
addEventListener("mousemove", checkPosition); 
 
addEventListener("click",() => console.log(mousePosition));

私は、可能な場合は、これを単純化したいと思いますが。コールバック関数の中にマウスの位置を格納する方法はありますか?私はこれをさまざまな方法で試してみたが、私は運がない。

以下のコードは機能しませんが、うまくいけば私が達成しようとしていることが示されます。私は私の構文が骨抜きでなければならないことを知っているが、私はこれをどのように構築するのか分からない。本当にありがとう!

"use strict"; 
 

 
const mousePosition = (e) => { 
 
    x: e.clientX, 
 
    y: e.clientY 
 
}; 
 
    
 
addEventListener("mousemove", mousePosition); 
 
addEventListener("click",() => console.log(mousePosition.x, mousePosition.y));

答えて

1

あなたがアクセスを提供するために、名前の関数を使用することができます関数自身のオブジェクトに:

"use strict"; 

const mousePosition = function f(e) { 
    f.x = e.clientX; 
    f.y = e.clientY; 
}; 

addEventListener("mousemove", mousePosition); 
addEventListener("click",() => console.log(mousePosition.x, mousePosition.y)); 

内部mousePosition関数内の関数のローカル名fの使用に関係なく、コードのいくつかの他の作品は、何か他のもので外部変数mouseFunctionを置き換えるかどうかの、性質が与えられた関数に格納されますことを保証する必要があります。

は、あなたがarguments.callee.<property>使用している可能性が前ES5コードで

[そのconstはそれを防ぐ必要があるにもかかわらず、それはまだ、そのオブジェクト内からオブジェクトの外部名を参照することをお勧めではありません]が、strictモードはそれを禁止します。

+0

非常に興味深い、私はあなたのポイントを参照してください。私は構文を減らすために矢印関数を試していました。この場合、内部のプロパティを対象とする名前付き関数が必要であることはまだ分かりませんでした。完璧! – DR01D

+0

説明と推論は一般的には良いですが、このシナリオでは誰かが 'mouseFunction'をどのように置き換えることができますか?それは定数です。 –

+1

私は彼らができるとは思わない(私は私の答えでそれに取り組んだが)。いずれにせよ、それはIMHOを避けるのが最善の方法です。 – Alnitak

4

あなたは、このように動的にxyプロパティを追加することによってそれを行うことができます。

"use strict"; 
 

 
const mousePosition = (e) => { 
 
    mousePosition.x = e.clientX; 
 
    mousePosition.y = e.clientY; 
 
}; 
 

 
addEventListener("mousemove", mousePosition); 
 
addEventListener("click",() => console.log(mousePosition.x, mousePosition.y));

+0

これは機能します!私は 'this'キーワードを使用しようとしましたが、うまくいきませんでした。私は 'mousePosition'を直接使用することは考えていませんでした。完璧! – DR01D

+2

このような矢印の機能を使用しないでください。オブジェクトが外部から知られている名前を使って参照するべきではないマキシムが破られます。 OTOHの場合は 'const mousePosition = function f(e){f.x = e.clientX; ...} '関数の与えられた名前は関数のスコープに暗黙的に含まれていますが、その名前の_outside_ではないので、これを避けます。 – Alnitak

+0

@Alnitak一般的に私はあなたに同意しますが、このシナリオでは私にとってはうまくいくようです。 –

関連する問題