はしめに

JavaScriptのthisとかいう初心者殺しポイント。 これを理解して中級者にステップアップしましょう。

まずはじめに関数内のthisとは？

JavaScriptの関数には隠しパラメータ的なものを必ず２つ持ちます。(暗黙的パラメータという)

それは何でしょう？ 一つは - arguments これは引数です。

function test(引数) {
  console.log(引数);
  var arg = arguments[0];
  console.log(arg);
}

どっちも同じようにconsole.logで受け取ることができます。

もうひとつが this です！

これは実は関数の中には必ず存在しており、 定義ではなくそれは関数が呼び出される過程でthisに何が入るかが決まります。 そのため、呼び出しコンテクストとか言われます。

ここからはその呼出だし方法の種類について見てきます。

関数を関数として呼び出す

funciont play(){
}

play();

まぁふつーのパターン。 実はこの場合でもplayはthisを持ちます。 それはなにか？ windowオブジェクトです。 これがwindowが一番上のオブジェクトと言われる所以です。

関数をメソッドとして呼び出す

function foo() {
  console.log(this);
}

var testObj = {
  test_method: foo,
};

この場合、thisはtestObjになります！！

関数をコンストラクタとして呼び出す

コンストラクタとは？ JavaScritpの場合はnew Foo()での呼び出しのことです。

newとは？？

JavaScriptのnewしたときにはthis関数の中に新たな呼び出しコンテクストが作られ、 その作られるものはnewの左の変数名になります

var これが呼び出しコンテストthisなるよ = new Foo();

関数をcall()、apply()として呼び出す

関数呼び出し時に自分が好きな呼び出しコンテクストをthisに設定したい！！ というときに便利なのがこのcall()です。

ちなみにcall()もapply()も同じ機能です。 引数のとり方が違うだけなので、自分が都合がいい方を使いましょう

感想とか

これでだいぶJavaScriptという言語への理解への取っ掛かりがつかめたような気がしますね！！