javaScriptでの入れ子関数内の「this」の参照先が呼出し主となります

Javascriptの「this」の参照先が基本的に呼出し主に指す

  • オブジェクト、関数、入れ子関数（nested function）などの状況で見ると、いろいろな違う現象が現れ、「this」への理解が少し難しくて、いろいろな例を読んで理解したほうが良いと思う。
  • ここで入れ子関数（nested function）内の「this」の参照先を見て、呼び出し方より「this」の参照先が変わることを纏めた。

入れ子関数の呼出し主がない場合に、その関数内の「this」がグローバルオブジェクト（window）に参照する

  • 「関数の呼出し主がない」ことが、オブジェクトのプロパティのように呼び出されることではなく、単に関数が実行されことを指している
  • 以下の例で入れ子関数内の「this」の参照先がなFirstObjectに参照せず、グローバルオブジェクトに指してしまうことを考えよう
  • 実際のコードは以下のよう 
    this.name = "Global Name" ;        // グローバル変数
function FirstObject(){
    this.name = "Local Name";      // ローカル変数
    this.get_name = function(){    // 入れ子関数
       return  local_name() ;      // 入れ子関数の実行
       function local_name(){      // 入れ子関数
         console.log( this instanceof FirstObject ); // "FALSE"と表示され
         return this.name
       } ;
    }
} ;
obj = new FirstObject();
obj.get_name();         //  "Global Name"が表示され
  • 重要なところは入れ子関数( local_name() )がどこかのオブジェクトに呼び出されたことはなく、関数内で実行されただけで、「this」の参照先がグローバルオブジェクトになった

入れ子関数の呼出し主がある場合に、その関数内の「this」の参照先がその呼出し主である

  • 上記の例で入れ子関数が実行されなく、ローカル変数にして、そのオブジェクトに呼び出されるように変更した結果を考えよう
  • 上記のコードは以下のようで 
    this.name = "Global Name" ;
function FirstObject(){
    this.name = "Local Name";
    this.get_name = function(){
       this.local_name = function(){ // 入れ子関数をローカル変数へ
　　       console.log( this instanceof FirstObject ); // "TRUE"と表示され
         return this.name
       } ;
       return  this.local_name() ;  // thisオブジェクトから入れ子関数の呼出し
    }
} ;
obj = new FirstObject();
obj.get_name()；     // "Local Name"が表示され
  • 入れ子関数が「this」オブジェク(FirstObject)トに呼び出され、その関数内の「this」がオブジェクトFirstObjectに参照する


 

javascriptのプラグイン(ほかのjsファイルに定義した関数の呼び出し)作成の基本と注意点

javascriptが複雑になると分割してプラグイン作成の必要がある

  • クライアント側で簡単なjs処理では一つのjsファイルに定義すればよいです
  • js処理が複雑になると、複数の関数、複数のjsファイルに分割して記述する必要になります
    • javascriptがほかの言語のようなインポート機能は揃っていないです
    • htmlで複数のjsファイルをロードする記述が必要です
    • jsファイルのロード順序、処理タイミングなどを考慮しなければならないです
  • 複数のファイルに分割してjavascript関数を定義するときに一定のルールに従ったほうが読みやすくなります

方法１：ネームスペース(window.namespace)よりプラグイン作成

  • javascriptのウィンドオブジェクト（Window Object）に特定な処理をバインドします
  • windowオブジェクトに以下のようにプラグインをバインドします 
    // プラグインの定義
(function($) {
    var namespace;                  // 任意な名前
    
    namespace = {                   // オブジェクトの定義
        something : function() {  // オブジェクトなインナー関数
            // 処理の記述
        },
        bodyInfo : function() {    // 別のインナー関数
            // 処理の記述
        }
    };
    
    window.ns = namespace;  // windowオブジェクトに"ns"名としてバインディング
    
})(jQuery);

// プラグインの呼び出し方
$(function() {
    ns.something();  // プラグインの関数を呼び出し
    ns.bodyInfo();
});
  • この方法では、比較的に直観的、シンプル、理解しやすいです

方法２：jQueryのプラグイン作成ルールに従います

  • jQueryが幅広く利用されています。jQueryのプラグイン作成ルールを理解する必要があります
  • jQueryのプラグイン作成ルールに従えば、ソースの共有度が高くなります
  • jQueryのプラグインの作成に基本的に三つの部分に分けれ記述します
  • このプラグインの基本構造のコード説明は以下のとなります 
    (function($){
    $.fn.myplugin = function(options) {      // mypluginを呼び出す時に引数：optionsとして渡す
        
        var settings = jQuery.extend({       // プラグインの初期設定
            param:'value',                   // 任意の変数定義
        }, options);                         // 'options'の設定を優先で、初期設定を上書き
         
        var $jquery=this;                    // プラグインオブジェクトを保存し、内部関数に使用させる
        
        var output={                         // プラグインの本体：実行の結果
		
            'function1':function(param){     // プラグイン内部関数： 実行の過程を記述
                $jquery.each(function(){     // プラグインオブジェクト内のすべての関数を実行
                    var _this=this;          // この関数のオブジェクトの保存
                });
                return output;               // 実行結果
            },
            
            'init':function(){               // 初期の実行
                $jquery.each(function(){     // プラグインオブジェクト内のすべての関数を実行
                    var _this=this;          
                    _this.$this=$(this);     // 各オブジェクトへの参照

                    var privatefun=function(){} // 初期での準備記述
                    privatefun();               // 初期準備関数の実行
                    
                    _this.$this.on('click',function(){  //例としての初期準備関数
                        //jQuery related stuffs
                    });
                });
                output.function1("value");     // 最後プラグイン本体実行させる＋パラメータを渡す
            }
        };
        output.init();                       // プラグインの実行開始
        return output;                       // プラグインの実行結果を返す
    };
})(jQuery);                                  // ｊQueryオブジェクトを'$'に渡す
  • プラグインを呼び出すには、jQueryに選択されたオブジェクトのメソッドとして呼び出されます 
    $("#element").myplugin() ;
  • 一度この構造を覚えれば、jsコードの整理に役に立ちます