読者です 読者をやめる 読者になる 読者になる

Rails Webook

自社のECを開発している会社で働いています。Rails情報やサービスを成長させる方法を書いていきます

Javascriptのthisの参照先をまとめてみた

Javascript まとめ

f:id:nipe880324:20150311110349j:plain
Photo by Flickr: MorBCN's Photostream

JavaScriptのthisは属しているオブジェクトによって参照先が変わります。
コンストラクタ内、オブジェクト内、イベントハンドラ内などのthisの参照先をまとめました。

目次

  1. コンストラクタ内のthis: 生成するオブジェクトへの参照
  2. オブジェクトのメソッド: 呼び出しオブジェクトへの参照
  3. イベントハンドラ内のthis: イベントの呼び出し元の要素への参照
  4. グローバルなスコープや関数内でのthis: グローバルオブジェクト(windowかglobal)を参照

1. コンストラクタ内のthis: 生成するオブジェクトへの参照

var Person = function(name) {
  // thisは生成するオブジェクト(Personインスタンス)への参照
  this.name = name;
}

2. オブジェクトのメソッド: 呼び出しオブジェクトへの参照

var obj = {
  value: 'objのvalueプロパティ',

  getValue: function() {
    // thisは、objオブジェクトへの参照
    return this.value;
  }
};

console.log(obj.getValue()); // => 'objのvalueプロパティ'

3. イベントハンドラ内のthis: イベントの呼び出し元の要素への参照

<body>
<input type="button" id="my-button" value="クリックするとボタンが無効になります" />

<script>
  window.onload = function() {
    var button = document.getElementById('my-button');
    button.addEventListener('click', function(event) {
      // thisは、input要素への参照
      this.value    = 'クリックされました';
      this.disabled = true;
    });
  };
</script>
</body>

4. グローバルなスコープや関数内でのthis: グローバルオブジェクト(windowかglobal)を参照

ブラウザの場合はwindow, Node.jsの場合globalというグローバルオブジェクトを参照します。

var val = 'global';

function func() {
  return this.val;
}

console.log( val );        // => 'global'
console.log( window.val ); // => 'global'
console.log( this.val );   // => 'global'
console.log( func() );     // => 'global'

参考文献