JavaScript の深奥に迫る！ this の参照と var self = this; のテクニック

JavaScript、jQuery、スコープにおける「var self = this;」の解説

JavaScriptで「var self = this;」を使用する場面はいくつかあります。主に、スコープの問題を解決するために使用されます。本解説では、以下の内容を説明します。

• スコープとは
• 「this」の挙動
• 「var self = this;」を使用する理由
• 具体的な使用例
• 注意点

スコープとは、変数や関数が有効な範囲を指します。JavaScriptでは、関数ごとにスコープが形成されます。

「this」は、現在実行中の関数のコンテキストを表します。つまり、関数内で「this」を使用すると、その関数自身を参照します。

「var self = this;」を使用する主な理由は、以下の2つです。

1. コールバック関数内で「this」が正しく参照できるようにするため

以下の例では、clickイベントのコールバック関数内でthisを使用しています。しかし、このままだと、thisはbutton要素ではなく、ウィンドウオブジェクトを参照します。

$(button).click(function() {
  // this はウィンドウオブジェクトを参照
  console.log(this);
});

この問題を解決するために、「var self = this;」を使用します。

var button = $(button);

button.click(function() {
  var self = this;
  // self はbutton要素を参照
  console.log(self);
});

以下の例では、outer関数内でinner関数を定義しています。inner関数内でthisを使用すると、outer関数ではなく、inner関数自身を参照します。

function outer() {
  function inner() {
    // this はinner関数自身を参照
    console.log(this);
  }

  inner();
}

outer();

function outer() {
  var self = this;

  function inner() {
    // self はouter関数を参照
    console.log(self);
  }

  inner();
}

outer();

• 「var self = this;」は、必要最低限の場面でのみ使用することをおすすめします。
• 変数名「self」は、他の変数名と衝突しないように注意が必要です。

<button id="button">ボタン</button>

var button = $("#button");

button.click(function() {
  var self = this;
  console.log(self.id); // "button"と出力される
});

function outer() {
  var self = this;

  function inner() {
    console.log(self === outer); // trueと出力される
  }

  inner();
}

outer();

• オブジェクト指向プログラミング
• イベントリスナー
• モジュールパターン

アロー関数を使用する

アロー関数を使用すると、thisの参照を明示的に記述する必要がなくなります。

button.click(() => {
  console.log(this.id); // "button"と出力される
});

bind()メソッドを使用する

bind()メソッドを使用すると、関数のコンテキストを固定することができます。

var outer = {
  name: "outer"
};

function inner() {
  console.log(this.name); // "outer"と出力される
}

var innerBound = inner.bind(outer);

innerBound();

ES6モジュールを使用する

ES6モジュールを使用すると、モジュールスコープ内で変数を定義することができます。

export function outer() {
  var name = "outer";

  function inner() {
    console.log(name); // "outer"と出力される
  }

  inner();
}