【JavaScript】「this」を使う理由！

ハロハロ〜　しゅんです。
知識定着のアウトプット用のブログですが、今回の内容は題名の通り、、
JavaScriptで何で「this」を使うの？
です。

●「this」とは？

「データを取得する専用の変数」といった感じのものです。
変数のようなもの、という表現をした理由は、、

var this = 10;

上記のようにこちらで具体的な値を格納出来ないからです。
「this」に格納されるデータは、JavaScriptが実行内容に応じて自動で変化します。
じゃあ実際に何が格納されるのかというと、メソッドに指定してあるイベントが発生した要素が格納されています。

●結論

「this」を使用する理由は大きく次の３点です。

・処理パフォーマンスの向上

・コードの使い回し

・処理に切り分けが可能（ここが大事！）

一つ一つ深掘って解説していきます。

●処理パフォーマンスの向上

次のコードを見てください。

$(function(){

$('header, #inner, footer').on('mouseover', function(){

$(this).css('color', '#888');

});

});

このコードは、

$()関数で指定したセレクタに"mouseover"イベントが発生（マウスのカーソルが乗っかる）したら、記述してあるcssを発動！

というコードです。

この$()関数が実行されると、ブラウザは指定されたセレクタを手がかりにしてHTMLから要素を集めてくる処理を行います。

「this」を使わなくても探してくるHTML要素が分かればいいので、

$(function(){

$('header, #inner, footer').on('mouseover', function(){

$('header, #inner, footer').css('color', '#888');

});

});

このように記述してもcssの処理は実行されます。

しかし、n+1問題と同じようにこの記述だとこのHTMLから要素を集めてくる処理が繰り返し行われるので、CPUへ負荷が掛かり、処理に時間がかかってしまいます。

「this」を使用すると、on()メソッドで取得してきた要素を使いまわすことができるので、再度、HTMLから要素を取得してくる処理を行わなくてもよくなります。

●コードの使い回し

次のコードを見てください。

$(function(){

function ChangeColor(){

$(this).css('color', '#888');

};

$('#inner').on('mouseover', ChangeColor);

$('header').on('mouseover', ChangeColor);

});

見てもらえれば分かると思いますが、
上記のコードの処理の内容は同じですが、on()メソッドの処理対象は異なります。
「this」を使用すると処理対象を自動で切り替えてくれます。

●処理の切り分けが可能

今回、例で出しているコードは$()関数に複数のセレクタを指定していますが、
この時の処理の切り分けが出来ます。

$(function(){

$('header, #inner, footer').on('mouseover', function(){

$('header, #inner, footer').css('color', '#888');

});

});

$(function(){

$('header, #inner, footer').on('mouseover', function(){

$(this).css('color', '#888');

});

});

●処理パフォーマンス向上で出したコーデですが、確かにどちらもcssを効くのですが、
挙動に大きな違いがあります。

上部のコードのように「this」を使用せず、3つの要素を指定している場合でと、その3つ要素のどれかにマウスオーバーすると、指定されている3つの要素全てにcss()メソッドが適用されてしまいます。

下部のコードのように「this」を使用すると、
イベントが起きた対象の要素にだけ処理を実行できるようになります。

●まとめ

簡単ではありますが、以上です。
（まとめになってないw）