メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

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

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関数を定義するときに一定のルールに従ったほうが読みやすくなります

方法1:ネームスペース(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();
    });
    
  • この方法では、比較的に直観的、シンプル、理解しやすいです

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

  • jQueryが幅広く利用されています。jQueryのプラグイン作成ルールを理解する必要があります
  • jQueryのプラグイン作成ルールに従えば、ソースの共有度が高くなります
  • jQueryのプラグインの作成に基本的に三つの部分に分けれ記述します
    • 変数の定義部分:初期変数の定義/初期値の設定、プラグインを呼び出す時に定義された変数に値を上書き(基本知識:JavaScriptの関数(function)について )
    • プラグインの処理本体:処理の初期準備、プラグインの内部関数の定義、this演算子の対処(javaScriptでの入れ子関数内の「this」の参照先が呼出し主となります )
    • プラグインの実行、結果の返還
      jsプラグインの基本
  • このプラグインの基本構造のコード説明は以下のとなります
    (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);                                  // jQueryオブジェクトを'$'に渡す
  • プラグインを呼び出すには、jQueryに選択されたオブジェクトのメソッドとして呼び出されます
    $("#element").myplugin() ;
    
  • 一度この構造を覚えれば、jsコードの整理に役に立ちます

検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads