JavaScript：最低限覚えるべき！thisの使い方4種類

こんにちはタクゾウです。
今回は、毎回忘れてしまう「this」の使い方4パターンに付いて復習したいと思います。

thisを使う方法は4種類ある
まとめ

thisを使う方法は4種類ある

thisの使い方は下記4つです。

メソッド呼び出しパターン
関数呼び出しパターン
コンストラクタ呼び出しパターン
apply,call呼び出しパターン

メソッド呼び出しパターン

一番直感的な記述。thisは、オブジェクト自身を表す。

JavaScript

var myObject = {
  value: 10,
  show: function(){
    console.log(this.value);//結果10 myObject.valueと同じ意味
    console.log(this);//結果 {value: 10, show: ƒ} myObjectと同じ意味
  }
}
myObject.show();

関数呼び出しパターン

メソッド呼び出しパターンとの違いは、「.(ドット)」が付いているかいないかです。

JavaScript

myObject.show();//メソッド呼び出し
show();//関数呼び出し

関数呼び出しのthisはグローバルオブジェクトを指しています。
つまり、windowオブジェクトを指すことになります。

JavaScript

function show(){
  console.log(this);//windowオブジェクトを示す。
  this.value = 1;//window.value = 1と同じ意味
}
show();//関数呼び出しの場合のthisはグローバルオブジェクトをさす。

ややこしい場合の例
メソッドの中で、関数を呼び出した場合の、thisは、windowオブジェクトを参照する。

JavaScript

function show(){
var myObject = {
  value: 1,
  show: function(){
    console.log(this.value);//1
    console.log(this);//myObject

    function myFunc(){
      //thisは、windowオブジェクトを指す。
      console.log(this.value);//underfined
      console.log(this);//windowオブジェクトを見る
    }
    myFunc();
  }
};
myObject.show();

MEMO

メソッドの中で関数呼び出しをした場合、メソッド呼び出しではく、関数呼び出しになる！

コンストラクタ呼び出しパターン

コンストラクタ呼び出しのthisは、インスタンス自身を指す。

JavaScript


function MyObject(value){
  this.myValue = value;//myObject.myValue ・ myObject2.myValueと同じ意味
  this.myFunc = function(){//myObject.myFunc ・ myObject2.myFuncと同じ意味
    this.myValue++;
  };
}
var myObject = new MyObject(0);//インスタンス作成
console.log(myObject.myValue);//0
myObject.myFunc();
console.log(myObject.myValue);//1

var myObject2 = new MyObject(3);//インスタンス作成
console.log(myObject2.myValue);//3
myObject2.myFunc();
console.log(myObject2.myValue);//4

newをつけない場合は、インスタンスではなくただの関数呼び出しになるため、
グローバルオブジェクトを参照するのにきをつけてください。

JavaScript

var myObject = MyObject(0);//newがないので関数呼び出しになる、
console.log(window);
console.log(window.myValue);//windowオブジェクトに指定したmyValueを読みに行く
console.log(window.myFunc);//windowオブジェクトに指定したmyFuncを読みに行く

apply,call呼び出しバターン

apply,callはオブジェクトが作られた時に自動で作られるメソッド。
これを使うことによってthisを束縛することができる。
apply,callの機能はどちらも同じ。

JavaScript

var myObject = {
  value: 1,
  show: function(){
    console.log(this.value);
  }
};
var yourObject = {
  value:3
};

myObject.show();//1 myObjectのthisを扱う。
myObject.show.apply(yourObject);//3 yourObjectオブジェクトのthisとして扱う。
myObject.show.call(yourObject);//3yourObjectオブジェクトのthisとして扱う。