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

フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)thisの違いについての覚書

Javascriptのthisは実行コンテキストによって定義が変わります。例外があるかもしれませんが、基本的な定義は以下のとおりなので、メモを残しておきます。

関数内でのthis
  • グローバル関数内部でthisはwindowオブジェクトです。
  • ネストされた関数でもthisはwindowオブジェクトです。
function callThisTest()
{
    var scope1 = this; // Object window
    var scope2 = function()
    {
        return this;  // Object window
    }()
}
オブジェクト内のthis
  • 定義した場所によってthisが変わります。グローバルオブジェクトのthisはwindowオブジェクトです。
  • ネストされたオブジェクトは親オブジェクトがthisになります。
  • オブジェクト内のメソッドは、メソッドを定義しているオブジェクトがthisになります。
var obj = {
    prop1:this, // object window
    prop2:function()
    {
        return this; // object Object
    },
    prop3:{
        innerProp:this // object Object
    }
}
HTMLタグでのthis
  • htmlタグのonclick処理などでthisを使用すると、そのhtmlエレメントが返ります。
<input type="button"  onclick="alert(this)"/>
// object HTMLInputElement
addEventListener内でのthis
  • addEventListener内ではthisを使わないほうが無難
  • DOMではaddEventListener内でのthisの既定が無いため、ブラウザ毎に実装方法が違うらしい
  • thisの代わりにcurrentTargetプロパティが使用できる。