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

Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う（例：var name ⇒ var this.name?）。関数自体だけで言えば、変数の前に「this」をつける（例：var this.name）と「ローカル変数」と言う。変数の前に「this」をつけず（例： var name）に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。

メッソドcall()/apply()は関数のプロトタイプにある

• すべての関数がcall()/apply()メッソドがある（プロトタイプにあるからだ）
• その関数のメッソドcall()の第一引数が当該関数の「this」に強制的にあてる。第二以降の引数が当該関数の引数に当てる（ここは理解しにくい）
  
• 上記例はcall()メッソドで当該関数を呼出す。普通の場合にこのような呼び出し方を使用しないはず（何故かというと、第一引数が分かりにくいからだ）
• 関数の呼出し（上記例）では、第一引数が「null」でも関数が正常に動作する（少し不思議）

  function data_fun(d1, d2) {
    this.data_1 = d1 ;
    this.data_2 = d2 ;
    console.log("data_1:"+this.data_1+"   data_2:"+this.data_2);
  }
  data_fun.call(null, "111", "abc"); //「data_1:111   data_2:abc」が表示され 
  

• メッソドapply()はcall()と全く同じような機能で、違いは第二移行の引数を一つの配列に纏める　⇐　二つの引数しか存在しない

  function data_fun(d1, d2) {
    this.data_1 = d1 ;
    this.data_2 = d2 ;
    console.log("data_1:"+this.data_1+"   data_2:"+this.data_2);
  }
  data_fun.apply(null, ["111", "abc"]); //「data_1:111   data_2:abc」が表示され 

call()を利用して当該関数のメンバーを任意のオブジェクトに継承させる

• 以下の実例で関数のcall()メッソドを利用して、任意のオブジェクトにその関数のメッソドを継承させるようなことが可能

  //　継承される関数の定義
  function data_fun(d1, d2) {
    this.data_1 = d1 ;       // 例：二つのメンバーを定義
    this.data_2 = d2 ;
  }
  
  //　オブジェクトコンストラクタ関数の作成
  function obj_constructor(p1, p2){
    this.name = "name_1" ; 
  　//　継承したいメンバーを呼出し
    data_fun.call( this, p1, p2 ) ; 
  }
  
  //　新しいオブジェクトの作成
  obj_1 = new obj_constructor("data_111", "data_222") ;
  obj_1.name ;　　// "name_1" が表示される
  obj_1.data_1;　 // "data_111" が表示される
  obj_1.data_2;   // "data_222" が表示される
  
  //　もう一個新しいオブジェクトの作成
  obj_2 = new obj_constructor("data_333", "data_444") ;
  obj_2.name ;    // "name_1" が表示される
  obj_2.data_1;   // "data_333" が表示される
  obj_2.data_2;   // "data_444" が表示される
  

• 上記例では、obj_constructor自身(キーワード：this)を継承される関数にcall()メッソドに渡す
• その結果として、継承される関数に定義されたメンバーが新規作成したオブジェクトに継承されたように見える
  
• ここで、Javascriptのオブジェクト値は参照渡しの性質をよく見えるでしょう。参照渡しでなければ、このような使い方はできない。
• また、関数の定義されたローカルとグローバル変数の区別がよく見えるようになる（グローバル変数が定義された、そのメンバーが継承されなくなる）

  // 継承される関数の定義
  function data_fun(d1, d2) {
    data_1 = d1 ;       // グローバル変数の定義
    this.data_2 = d2 ;  // ローカル変数の定義
  }
  // オブジェクトコンストラクタ関数の作成
  function obj_constructor(p1, p2){
    this.name = "name_1" ; 
  // 継承したいメンバーを呼出し
    data_fun.call( this, p1, p2 ) ; 
  }
  // 新しいオブジェクトの作成
  obj_1 = new obj_constructor("data_111", "data_222") ;
  obj_1.data_1; // "undefined" が表示される ＜＝ 継承できない 
  

JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある

JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数（function）でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。

Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。

最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。

関数（function）はある処理のブロックである

• 関数がオブジェクトであり、関数定義して呼び出し時に自動的にオブジェクトになる
• 関数に引数を渡して（または引数なして）関数を呼び出し、ある処理して結果を返す（または結果返却なし）、関数の処理が完了する
  

関数名がなくても宣言できる

• 以下の方法で関数宣言を行う
  • 関数宣言（function文で関数を定義　⇐　関数を宣言して、後で利用する）

    function myFunc( a, b ){
      return a * b ;
    }
    console.log( myFunc( 4, 5) );  // 20が表示される
    

  • 関数式（function演算子で関数を定義　⇐　関数を変数としての使用）

    var x = function( a, b ){ return a * b ; };
    var z = x( 3, 4 ) ;
    console.log( z ) ;   // 12が表示される
    

  • Functionのコンストラクタで宣言

    var myFunc = new Function("a", "b", "return a * b");
    var x = myFunc( 3, 4 ) ;
    console.log( x ) ;  //　12が表示される
    

• 関数宣言の場合匿名でも関数の宣言ができる

  (function () {          // 関数名がない
      alert( "Hello!!" ) ;
  })();                   // 自分自身を呼び出し、"Hello!!"が表示される
   

• 関数式での関数宣言の場合、関数名がその関数内にしか使えない（再帰呼び出し）

   
  var func_var = function func_name(){
    console.log( "Hello" ) ;
  
    // 関数内でその関数を呼び出し
    return func_name;     // func_name()で記述すると、
                          //再帰呼び出しになり、メモリが
                          //なくなるまでに「Hello」を表示される
  }
  
  //　変数の関数を呼び出し
  func_var();
  
  //　関数名として呼び出し
  func_name();      //　当該関数名が定義されていないエラー発生
  

• Function()コンストラクタの宣言　⇔　関数宣言と関数式　との違い：　Function()コンストラクタで宣言した関数が関数名がないこと
• 関数宣言　⇔　関数式　との違い：　巻き上げ（Hoisting）、関数名での呼び出し可能かのこと
  

匿名関数を実行させるための関数の自己呼び出し

• 関数名、変数名（関数式での宣言）で呼び出す
• 匿名関数に自己呼び出し（定義が完了時点で自動的に呼び出される）　⇒　もちろん通常の関数宣言、関数式の関数にも適応
  
• Functionオブジェクトのメッソド（call()、apply()）で呼び出す

  function my_Func( p1, p2 ){ console.log( p1+p2 ) ; }
  my_Func.call( this, 2, 3 );  // ５が表示される
  

  function my_Func( p1, p2 ){ console.log( p1+p2 ) ; }
  var p_array = [5, 8] ;
  my_Func.apply( this, p_array );  // １３が表示される
  

  call(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと

関数にあるローカル変数への直接にアクセスはできない

• ローカル変数の宣言は必ず「var」で宣言が必要となる －＞ 関数外であれば「var」がなくてもグローバル変数にはなる

  var x = 10 ;   // グローバル変数
  function my_func( p ) {
    var x = p ;  // 関数内のローカル変数
    return console.log( "x:" + x );
  }
  
  my_func( 100 ) ;    //　　ローカル変数「x」が100になる
  
  console.log( x );   //  グローバル変数「x」が10のままになる
  
  

• 関数内で「this」または「var」なしで宣言した変数はグローバル変数となる

  var x = 10;             // グローバル変数
  function my_func( p ) {
    this.x = p ;          // グローバル変数への参照
    y = 20 ;              // グローバル変数の宣言
    return console.log ( "x:" + x );
  }
  
  my_func( 100 ) ;       // 関数内のグローバル変数「x」に100を代入する
  console.log( x ) ;     // グローバル変数「x」が100になる
  console.log( y ) ;     //　グローバル変数「y」が20として表示される
  
  

• 関数外から関数内の変数へのアクセスはできない

  function my_func( p ) {
    var x = p ;  // 関数内のローカル変数
    return x ;
  }
  
  var fun_var = my_func( 100 ) ;    //　　ローカル変数「x」に100を100代入する
  console.log( fun_var.x );         //  xのundefinedエラーにある

関数のローカル変数へのアクセスできるクロージャ（Closure）がある

• 関数の変数をカプセル化にして、関数内のインナー関数でアクセスすることができる
• 関数のクロージャにするため二つの要素が欠かせない
  • ローカル関数を操作、返却するインナー関数が必要
  • その関数を変数に渡して保持する必要がある

    function my_func( base_counter ){
      var counter = 0 ;                    // ローカル変数の宣言
      return function count(){             // 返却インナー関数の宣言
        counter ++ ;
        return counter + base_counter ;
      }
    }
    //　独立したクロージャ＿１の作成
    var my_counter_1 = my_func( 10 ) ;
    console.log( my_counter_1() ) ;        //　11が表示される
    console.log( my_counter_1() ) ;        // 12が表示される
    //　独立したクロージャ＿２の作成
    var my_counter_2 = my_func( 100 ) ;
    console.log( my_counter_2() ) ;        // 101が表示される
    console.log( my_counter_2() ) ;        //　102が表示される
    
    

• 同一関数のクロージャが独立なので、違う変数に渡して保持することができる

ローカルスコープ（Local Scope）の変数がグローバルスコープ（Global Scope）の変数への参照ができるスコープチェーン

• JavaScritが関数単位でのスコープとなる
• 関数内はローカルスコープ、関数外はグローバルスコープとなる
• グローバルとローカル変数の区別：　関数外⇒グローバル⇒ブラウザ所有、　関数内⇒ローカル⇒当該関数所有
• 関数のローカルスコープがその親のグローバルスコープの変数への参照が可能（スコープのチェーン）
  

関数がオブジェクトのコンストラクタになる

• JavaScriptが「class」の演算子はない
• JavaScriptのオブジェクトのインスタンスが関数で作成される
• 関数が「new」演算子でそのオブジェクトインスタンスのコンストラクタになる

   
  function MyObject( p1 ){
    this.a = 5;
    this.getValue = function() {
        return this.a + p1 ;
      }
  } ;
  var obj_1 = new MyObject(3) ;
  console.log( obj_1.getValue() ) ;
  

オブジェクトタイプの引数を関数に渡す場合に参照渡す（passed-by-referrence）となる

• 関数宣言時に引数定義がなくても、関数を呼び出す時に引数を渡すことができる
  • 関数が引数の型を定義しない
  • 関数が渡された引数の型、引数の数をチェックしない（処理ロジック内で行う）
  • 関数に渡された引数がオブジェクトarguments（配列）に格納、管理されている
    
  • オブジェクト型の引数が参照渡し（passed-by-referrence）、数値/文字/Boolean（プリミティブ型）引数が値渡し（passed-by-value）
    

JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。

関数の宣言がそのスコープ（Scope）内でどこでもできる仕組み：宣言の巻き上げ（Hoisting）

• Javascriptの変数宣言はグローバル/ローカル変数がある
• グローバルとローカルの区別：　関数外⇒グローバル⇒ブラウザ所有、　関数内⇒ローカル⇒当該関数所有
• ローカル変数の宣言は必ず「var」で宣言が必要となる　－＞　関数外であれば「var」がなくてもグローバル変数にはなる
• 関数内で「var」がない変数がグローバル変数に参照する。もしグローバル変数がない場合、ローカル変数になる
• 関数の変数を関数ブロックの前に宣言することができる（変数宣言の巻き上げ）
• ローカル/グローバル変数の宣言、参照、利用に注意が必要となる。でなければ大規模なプロジェクトで変数が見つからない、重複宣言、間違って参照してしまうことになる。
  

JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある

JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数（function）でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。

Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。

最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。

関数（function）はある処理のブロックである

• 関数がオブジェクトであり、関数定義して呼び出し時に自動的にオブジェクトになる
• 関数に引数を渡して（または引数なして）関数を呼び出し、ある処理して結果を返す（または結果返却なし）、関数の処理が完了する
  

関数名がなくても宣言できる

• 以下の方法で関数宣言を行う
  • 関数宣言（function文で関数を定義　⇐　関数を宣言して、後で利用する）

    function myFunc( a, b ){
      return a * b ;
    }
    console.log( myFunc( 4, 5) );  // 20が表示される
    

  • 関数式（function演算子で関数を定義　⇐　関数を変数としての使用）

    var x = function( a, b ){ return a * b ; };
    var z = x( 3, 4 ) ;
    console.log( z ) ;   // 12が表示される
    

  • Functionのコンストラクタで宣言

    var myFunc = new Function("a", "b", "return a * b");
    var x = myFunc( 3, 4 ) ;
    console.log( x ) ;  //　12が表示される
    

• 関数宣言の場合匿名でも関数の宣言ができる

  (function () {          // 関数名がない
      alert( "Hello!!" ) ;
  })();                   // 自分自身を呼び出し、"Hello!!"が表示される
   

• 関数式での関数宣言の場合、関数名がその関数内にしか使えない（再帰呼び出し）

   
  var func_var = function func_name(){
    console.log( "Hello" ) ;
  
    // 関数内でその関数を呼び出し
    return func_name;     // func_name()で記述すると、
                          //再帰呼び出しになり、メモリが
                          //なくなるまでに「Hello」を表示される
  }
  
  //　変数の関数を呼び出し
  func_var();
  
  //　関数名として呼び出し
  func_name();      //　当該関数名が定義されていないエラー発生
  

• Function()コンストラクタの宣言　⇔　関数宣言と関数式　との違い：　Function()コンストラクタで宣言した関数が関数名がないこと
• 関数宣言　⇔　関数式　との違い：　巻き上げ（Hoisting）、関数名での呼び出し可能かのこと
  

匿名関数を実行させるための関数の自己呼び出し

• 関数名、変数名（関数式での宣言）で呼び出す
• 匿名関数に自己呼び出し（定義が完了時点で自動的に呼び出される）　⇒　もちろん通常の関数宣言、関数式の関数にも適応
  
• Functionオブジェクトのメッソド（call()、apply()）で呼び出す

  function my_Func( p1, p2 ){ console.log( p1+p2 ) ; }
  my_Func.call( this, 2, 3 );  // ５が表示される
  

  function my_Func( p1, p2 ){ console.log( p1+p2 ) ; }
  var p_array = [5, 8] ;
  my_Func.apply( this, p_array );  // １３が表示される
  

  call(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと

関数にあるローカル変数への直接にアクセスはできない

• ローカル変数の宣言は必ず「var」で宣言が必要となる －＞ 関数外であれば「var」がなくてもグローバル変数にはなる

  var x = 10 ;   // グローバル変数
  function my_func( p ) {
    var x = p ;  // 関数内のローカル変数
    return console.log( "x:" + x );
  }
  
  my_func( 100 ) ;    //　　ローカル変数「x」が100になる
  
  console.log( x );   //  グローバル変数「x」が10のままになる
  
  

• 関数内で「this」または「var」なしで宣言した変数はグローバル変数となる

  var x = 10;             // グローバル変数
  function my_func( p ) {
    this.x = p ;          // グローバル変数への参照
    y = 20 ;              // グローバル変数の宣言
    return console.log ( "x:" + x );
  }
  
  my_func( 100 ) ;       // 関数内のグローバル変数「x」に100を代入する
  console.log( x ) ;     // グローバル変数「x」が100になる
  console.log( y ) ;     //　グローバル変数「y」が20として表示される
  
  

• 関数外から関数内の変数へのアクセスはできない

  function my_func( p ) {
    var x = p ;  // 関数内のローカル変数
    return x ;
  }
  
  var fun_var = my_func( 100 ) ;    //　　ローカル変数「x」に100を100代入する
  console.log( fun_var.x );         //  xのundefinedエラーにある

関数のローカル変数へのアクセスできるクロージャ（Closure）がある

• 関数の変数をカプセル化にして、関数内のインナー関数でアクセスすることができる
• 関数のクロージャにするため二つの要素が欠かせない
  • ローカル関数を操作、返却するインナー関数が必要
  • その関数を変数に渡して保持する必要がある

    function my_func( base_counter ){
      var counter = 0 ;                    // ローカル変数の宣言
      return function count(){             // 返却インナー関数の宣言
        counter ++ ;
        return counter + base_counter ;
      }
    }
    //　独立したクロージャ＿１の作成
    var my_counter_1 = my_func( 10 ) ;
    console.log( my_counter_1() ) ;        //　11が表示される
    console.log( my_counter_1() ) ;        // 12が表示される
    //　独立したクロージャ＿２の作成
    var my_counter_2 = my_func( 100 ) ;
    console.log( my_counter_2() ) ;        // 101が表示される
    console.log( my_counter_2() ) ;        //　102が表示される
    
    

• 同一関数のクロージャが独立なので、違う変数に渡して保持することができる

ローカルスコープ（Local Scope）の変数がグローバルスコープ（Global Scope）の変数への参照ができるスコープチェーン

• JavaScritが関数単位でのスコープとなる
• 関数内はローカルスコープ、関数外はグローバルスコープとなる
• グローバルとローカル変数の区別：　関数外⇒グローバル⇒ブラウザ所有、　関数内⇒ローカル⇒当該関数所有
• 関数のローカルスコープがその親のグローバルスコープの変数への参照が可能（スコープのチェーン）
  

関数がオブジェクトのコンストラクタになる

• JavaScriptが「class」の演算子はない
• JavaScriptのオブジェクトのインスタンスが関数で作成される
• 関数が「new」演算子でそのオブジェクトインスタンスのコンストラクタになる

   
  function MyObject( p1 ){
    this.a = 5;
    this.getValue = function() {
        return this.a + p1 ;
      }
  } ;
  var obj_1 = new MyObject(3) ;
  console.log( obj_1.getValue() ) ;
  

オブジェクトタイプの引数を関数に渡す場合に参照渡す（passed-by-referrence）となる

• 関数宣言時に引数定義がなくても、関数を呼び出す時に引数を渡すことができる
  • 関数が引数の型を定義しない
  • 関数が渡された引数の型、引数の数をチェックしない（処理ロジック内で行う）
  • 関数に渡された引数がオブジェクトarguments（配列）に格納、管理されている
    
  • オブジェクト型の引数が参照渡し（passed-by-referrence）、数値/文字/Boolean（プリミティブ型）引数が値渡し（passed-by-value）
    

JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。

関数の宣言がそのスコープ（Scope）内でどこでもできる仕組み：宣言の巻き上げ（Hoisting）

• Javascriptの変数宣言はグローバル/ローカル変数がある
• グローバルとローカルの区別：　関数外⇒グローバル⇒ブラウザ所有、　関数内⇒ローカル⇒当該関数所有
• ローカル変数の宣言は必ず「var」で宣言が必要となる　－＞　関数外であれば「var」がなくてもグローバル変数にはなる
• 関数内で「var」がない変数がグローバル変数に参照する。もしグローバル変数がない場合、ローカル変数になる
• 関数の変数を関数ブロックの前に宣言することができる（変数宣言の巻き上げ）
• ローカル/グローバル変数の宣言、参照、利用に注意が必要となる。でなければ大規模なプロジェクトで変数が見つからない、重複宣言、間違って参照してしまうことになる。