thisとはなんぞや

簡単に言うと、【自分自身】、ってやつです。
自分自身ですよ。

使用例

こいつを実行してみましょう。

window.onload = function(){
 var myObj = function()
 {
  this.name = '太郎';
  this.init = function ()
   {
    this.hello();
   }
  this.hello = function ()
  {
   alert('こんぬつあ'+this.name);
  }
 }

 var objIns = new myObj();
 objIns.init();
}

今回の【this】は、myObjオブジェクトのことを指します。
なので、nameのデータが取得できているわけなのです。
各メソッドもthisをつけて、自分自身(myObj)のメソッド、という意味合いとなります。
では以下はどうでしょう。

こいつを実行してみましょう。
ボタンタグもこの通りにしてくださいね。(ゲス顔)

<input type="button" name="バカ" value="　クリックする　" id="elem1" >
window.onload = function(){
 var myObj = function()
 {
  this.name = '太郎';
  this.init = function ()
   {
    var button = document.getElementById("elem1");
    // ボタンのイベントハンドラに、メソッドhelloをセット
    button.onclick = this.hello;
   }
  this.hello = function ()
  {
   alert('こんぬつあ'+this.name);
  }
 }

 var objIns = new myObj();
 objIns.init();
}

実行結果どうでしたか？太郎とでるはずなのに、意味不明に煽られたと思います。
thisがコロコロ変わるのはまさにこのことなのです。
では、thisの矛先が変わったタイミングを以下に

button.onclick = this.hello; // ここ！！！

ここで、イベントが発生します。
ここからオブジェクトではなく、【取得要素のイベント】に変わります。
なので、thisはオブジェクトから要素(ここで言えば、buttonタグ もっと言えばdocument.getElementById("elem1")これ)
で、helloメソッドで、this.nameとなっていますので、ボタンタグのname属性が呼び出されます。

これは困りました。

このthisは欠陥だ。使えないよう
なのです。このまま使えば必ずこうなってしまうのです。
ではどうすればいいのか？予めthisを保護してやればよいのです。

<input type="button" name="バカ" value="　クリックする　" id="elem1" >
window.onload = function(){
 var self = "";
 var myObj = function()
 {
  this.name = '太郎';
  this.init = function ()
   {
    var button = document.getElementById("elem2");
    // ボタンのイベントハンドラに、メソッドhelloをセット
    self = this; // myObjのthisを保管する。
    button.onclick = this.hello;
   }
  this.hello = function ()
  {
   alert('こんぬつあ'+self.name);
  }
 }

 var objIns = new myObj();
 objIns.init();
}

と言うわけでどうでしょう。期待通りの動きをしてくれたのではないでしょうか。
今回はオブジェクトなので、若干ピンとこないと思います。
よく使いそうな例でもおいておきますね。

<a href="javascript:void(0);" id="elem3">さぁクリックするのだ！</a>
window.onload = function(){
 document.getElementById('elem3').onclick = function()
 {
  this.style.color = '#FF0000';
  var self = this;
  setTimeout(function()
  {
   // ダメな例
   //this.style.color = '#000';
   self.style.color = '#000';
  },1000);
 }
}

thisは便利ですが、少し目を離すと動かないとかいったトラブルもあります。
動かない時は落ち着いて、alertを順番にしていってデバッグをしていきましょう。

待ちなさい

わざわざthisを使う必要なくね？
と思われても仕方がないですね。特に↑の例なんか。
self.style.color = '#000';
を
document.getElementById('elem3').style.color = '#000';
にすればthisなんかいらんかったんや！！！！

確かに動作はするでしょう。だがしかし
document.getElementById('elem3')とすることで、またDOMの中に探しに行っているのです
こんな無駄な話はありません。

ついでのお話

さて、少しついでのお話になりますが、ついでの癖に重要なお話であったりします。
今回は変数に入れることの大切さ、です。

document.getElementById('elem5').style.color = '#000';
document.getElementById('elem5').onclick = function()
{
 console.log('クリックされたンゴ');
}
document.getElementById('elem5').onmouseover = function()
{
 console.log('マウスオーバーしたンゴ');
}
document.getElementById('elem5').onmouseout = function()
{
 console.log('マウスどっかいったンゴ');
}

var arr = [1,2,3,4,5,6,7,8,9,10];
for(var i=0;i<arr.length;i++)
{
 console.log(arr[i]);
}

上記の例、かなり無駄が多いですね。
どこが無駄なのかわかりますか？
また、どうすればベストなのかを考えてみてください。