JavaScript アロー関数、that変数、bing()を使ってthisを参照する方法

js
JavaScriptの関数でthisを参照しようとするとundefinedになってしまってる。ということはJavaScriptを使っている人なら一度は経験しているはずです。

今回はJavaScriptでローカルのthisを参照する方法を紹介していきます。

[スポンサーリンク]

もくじ

関数からthisを参照
bind()
that変数
アロー関数

関数からthisを参照

それではいきなりですが問題です。

4行目、7行目ではどのようなログが出力されるでしょうか?

var car1 = {
  name: "プリウス",
  showlog1: function() {
    console.log("メソッド内でthisを参照した結果 : " + this.name);
 
    function showlog2() {
      console.log("関数内でthisを参照した結果 : " + this.name);
    }
    showlog2();
  }
};
car1.showlog1();

正解は、、、

4行目7行目
メソッド内でthisを参照した結果 : プリウス関数内でthisを参照した結果 :

このように4行目のメソッド内からは「プリウス」が見えるのに対して、7行目の関数内からは見ることができません。

これは、関数でthisを参照するとグローバルのthisを参照してしまうことが原因です。

ちなみに、関数とメソッドの違いについてはコチラ書きましたのでぜひ読んでみて下さい。

今回は関数で「プリウス」部分の変数を見るための対策3つを紹介していきます!

bind()

それではさっそくローカル内のthisを参照するための対策その1を紹介していきます!

最初はthisを参照するというよりは、thisに値をつめるbind()を使った方法です。

var car2 = {
  name: "プリウス",
  showlog1: function() {
    console.log("メソッド内でthisを参照した結果 : " + this.name);
 
    function showlog2() {
      console.log("関数内でthisを参照した結果 : " + this.name);
    }
    var car = {name : "ランサー"};
    var showlog3 = showlog2.bind(car);
    showlog3();
  }
};
car2.showlog1();

実行結果ですがこのようになります。

4行目7行目
メソッド内でthisを参照した結果 : プリウス関数内でthisを参照した結果 : ランサー

bind()を使って、関数が参照するthisの値を上書きするようなイメージになります。

メソッド内と同じthisを参照するというよりは、新しくセットしたthisを参照するようなイメージです。

that変数

続いてはthisを別の変数にセットする方法です。

that変数とはいっていますが、変数名はthat以外でもOKです。

しかし、thatを使うのは結構一般的なようです。

thisを一旦thatに入れて、関数内でthatを参照することでthisを参照します。

var car3 = {
  name: "プリウス",
  showlog1: function() {
    var that = this;
    console.log("メソッド内でthisを参照した結果 : " + this.name);
    function showlog2() {
      console.log("関数内でthisを参照した結果 : " + that.name);
    }
    showlog2();
  }
};
car3.showlog1();

実行結果ですがこのようになります。

4行目7行目
メソッド内でthisを参照した結果 : プリウス関数内でthisを参照した結果 : プリウス

bind()とは違って、メソッド内が参照しているthisと同じオブジェクトを参照しているので、値をセットしなくてもthisの値が参照できます。

アロー関数

さて、最後はアロー関数です。

こちらはES6から新たに加わった関数の書き方です。

先程のthat変数のように、自分で変数から変数につめ直すような書き方をしなくても、メソッドと同じthisの値を参照することができます。

var car4 = {
  name: "プリウス",
  showlog1: function() {
    console.log("メソッド内でthisを参照した結果 : " + this.name);
 
    let showlog2 = () => {
      console.log("関数内でthisを参照した結果 : " + this.name);
    }
    showlog2();
  }
};
car4.showlog1();

上記の関数の呼び出し方はこのようになります。

実行結果ですがこのようになります。

4行目7行目
メソッド内でthisを参照した結果 : プリウス関数内でthisを参照した結果 : プリウス

アロー関数は今までの関数とは書き方が多少違うので最初は戸惑うかもしれません。

しかし、ネット上のサンプルソースでも最近はアロー関数を使って書いた関数も多くなってきました。

アロー関数の書き方については、以前書いたコチラでも紹介しています。

また、アロー関数については公式ドキュメントなども参考にしてみて下さい。

さいごに

関数内でthisを参照するには色々な書き方がありますが、個人的にはアロー関数に一番メリットを感じています。

自分で何も設定しなくても、ローカル内のthisが参照できるというのは便利なものですからね。

それでは今回紹介しました方法でしっかりとthisを参照するようなコードを書いて下さい!

それでは!