JavaScriptでnewキーワードのコンストラクター内に内部関数を追加する際の字句スコープ（this）の問題とその解決方法

JavaScriptのコンストラクター関数内で内部関数を定義すると、その内部関数の中で this が期待したオブジェクト（インスタンス）を指さず、字句スコープに関する問題が発生することがあります。

問題の原因

コンストラクター関数内で定義された通常の内部関数は、呼び出し方によっては this がグローバルオブジェクト（strictモードでは undefined）を指してしまい、生成したインスタンス自体にアクセスできません。これにより、インスタンスのプロパティを内部関数から参照しようとしても意図どおりに動作しません。

解決策：thisの値を変数に保持する

この問題を解決するには、this キーワードの仕組みを利用します。具体的には、オブジェクト（this）の値を別の変数に保持しておき、内部関数の中からその変数を参照します。クロージャーのおかげで、内部関数からでも外側の変数にアクセスできるため、インスタンスのプロパティを正しく取得できます。

コード例

function Employee() {
   this.technologyName = "JavaScript";
   var currentTechnologyName = this;
   function workingTechnology() {
      console.log("I am working with " + currentTechnologyName.technologyName + " Technology");
   }
   workingTechnology();
}
var currentTechnology = new Employee();

この例では、var currentTechnologyName = this; の時点で、現在生成中のインスタンスへの参照が変数に保存されます。内部関数 workingTechnology() はクロージャーによってこの変数を参照できるため、currentTechnologyName.technologyName を通じてインスタンスのプロパティ値「JavaScript」を正しく取得しています。

プログラムの実行方法

上記のプログラムを実行するには、次のコマンドを使用します。

node fileName.js

ここでは、ファイル名を demo216.js としています。

実行結果

PS C:\Users\Amit\JavaScript-code> node demo216.js
I am working with JavaScript Technology

このように、this の値を事前に別の変数へ代入しておくテクニックを使えば、内部関数からでもインスタンスのプロパティに安全にアクセスでき、字句スコープ由来の問題を回避できます。