JavaScriptの関数（function）について
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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文で関数を定義 ⇐ 関数を宣言して、後で利用する）
- 関数宣言の場合匿名でも関数の宣言ができる
(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の変数名にハイフン(-)があると、以下のエラーが発生します
Uncaught SyntaxError: Unexpected token -
原因：ハイフン(-)が演算子のマイナスとして認識されます
- javascriptの変数名が宣言せずに使用できます（詳細は「JavaScriptの関数（function）について」にご参考）
- 変数名宣言：var がある場合にローカル変数
- 変数名宣言しない： var がない場合はグローバル変数
- jvascriptがJAVA/C言語のような変数名が必ず宣言しなければならない言語と違って、変数名の使用に注意する必要はあります
javascriptの変数名に演算子記号が含まれるとエラーとなります
- 当然ながら、プラス(+)などの演算子記号が含まれるとエラーになります
- 変数名にハイフン(-)を使用せず、アンダーバー(_)を使用すればよいです
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のプラグインの作成に基本的に三つの部分に分けれ記述します
- 変数の定義部分：初期変数の定義/初期値の設定、プラグインを呼び出す時に定義された変数に値を上書き（基本知識：JavaScriptの関数（function）について ）
- プラグインの処理本体：処理の初期準備、プラグインの内部関数の定義、this演算子の対処（javaScriptでの入れ子関数内の「this」の参照先が呼出し主となります ）
- プラグインの実行、結果の返還
- このプラグインの基本構造のコード説明は以下のとなります
(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コードの整理に役に立ちます
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が複雑になると分割してプラグイン作成の必要がある
- クライアント側で簡単な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のプラグインの作成に基本的に三つの部分に分けれ記述します
- 変数の定義部分：初期変数の定義/初期値の設定、プラグインを呼び出す時に定義された変数に値を上書き（基本知識：JavaScriptの関数（function）について ）
- プラグインの処理本体：処理の初期準備、プラグインの内部関数の定義、this演算子の対処（javaScriptでの入れ子関数内の「this」の参照先が呼出し主となります ）
- プラグインの実行、結果の返還
- このプラグインの基本構造のコード説明は以下のとなります
(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コードの整理に役に立ちます
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が複雑になると分割してプラグイン作成の必要がある
- クライアント側で簡単な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のプラグインの作成に基本的に三つの部分に分けれ記述します
- 変数の定義部分：初期変数の定義/初期値の設定、プラグインを呼び出す時に定義された変数に値を上書き（基本知識：JavaScriptの関数（function）について ）
- プラグインの処理本体：処理の初期準備、プラグインの内部関数の定義、this演算子の対処（javaScriptでの入れ子関数内の「this」の参照先が呼出し主となります ）
- プラグインの実行、結果の返還
- このプラグインの基本構造のコード説明は以下のとなります
(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コードの整理に役に立ちます
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が複雑になると分割してプラグイン作成の必要がある
- クライアント側で簡単な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のプラグインの作成に基本的に三つの部分に分けれ記述します
- 変数の定義部分：初期変数の定義/初期値の設定、プラグインを呼び出す時に定義された変数に値を上書き（基本知識：JavaScriptの関数（function）について ）
- プラグインの処理本体：処理の初期準備、プラグインの内部関数の定義、this演算子の対処（javaScriptでの入れ子関数内の「this」の参照先が呼出し主となります ）
- プラグインの実行、結果の返還
- このプラグインの基本構造のコード説明は以下のとなります
(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コードの整理に役に立ちます
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が複雑になると分割してプラグイン作成の必要がある
- クライアント側で簡単な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のプラグインの作成に基本的に三つの部分に分けれ記述します
- 変数の定義部分：初期変数の定義/初期値の設定、プラグインを呼び出す時に定義された変数に値を上書き（基本知識：JavaScriptの関数（function）について ）
- プラグインの処理本体：処理の初期準備、プラグインの内部関数の定義、this演算子の対処（javaScriptでの入れ子関数内の「this」の参照先が呼出し主となります ）
- プラグインの実行、結果の返還
- このプラグインの基本構造のコード説明は以下のとなります
(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コードの整理に役に立ちます
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が複雑になると分割してプラグイン作成の必要がある
- クライアント側で簡単な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のプラグインの作成に基本的に三つの部分に分けれ記述します
- 変数の定義部分：初期変数の定義/初期値の設定、プラグインを呼び出す時に定義された変数に値を上書き（基本知識：JavaScriptの関数（function）について ）
- プラグインの処理本体：処理の初期準備、プラグインの内部関数の定義、this演算子の対処（javaScriptでの入れ子関数内の「this」の参照先が呼出し主となります ）
- プラグインの実行、結果の返還
- このプラグインの基本構造のコード説明は以下のとなります
(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コードの整理に役に立ちます
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が複雑になると分割してプラグイン作成の必要がある
- クライアント側で簡単な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のプラグインの作成に基本的に三つの部分に分けれ記述します
- 変数の定義部分：初期変数の定義/初期値の設定、プラグインを呼び出す時に定義された変数に値を上書き（基本知識：JavaScriptの関数（function）について ）
- プラグインの処理本体：処理の初期準備、プラグインの内部関数の定義、this演算子の対処（javaScriptでの入れ子関数内の「this」の参照先が呼出し主となります ）
- プラグインの実行、結果の返還
- このプラグインの基本構造のコード説明は以下のとなります
(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コードの整理に役に立ちます
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が複雑になると分割してプラグイン作成の必要がある
- クライアント側で簡単な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のプラグインの作成に基本的に三つの部分に分けれ記述します
- 変数の定義部分：初期変数の定義/初期値の設定、プラグインを呼び出す時に定義された変数に値を上書き（基本知識：JavaScriptの関数（function）について ）
- プラグインの処理本体：処理の初期準備、プラグインの内部関数の定義、this演算子の対処（javaScriptでの入れ子関数内の「this」の参照先が呼出し主となります ）
- プラグインの実行、結果の返還
- このプラグインの基本構造のコード説明は以下のとなります
(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コードの整理に役に立ちます
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が複雑になると分割してプラグイン作成の必要がある
- クライアント側で簡単な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のプラグインの作成に基本的に三つの部分に分けれ記述します
- 変数の定義部分：初期変数の定義/初期値の設定、プラグインを呼び出す時に定義された変数に値を上書き（基本知識：JavaScriptの関数（function）について ）
- プラグインの処理本体：処理の初期準備、プラグインの内部関数の定義、this演算子の対処（javaScriptでの入れ子関数内の「this」の参照先が呼出し主となります ）
- プラグインの実行、結果の返還
- このプラグインの基本構造のコード説明は以下のとなります
(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コードの整理に役に立ちます
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が複雑になると分割してプラグイン作成の必要がある
- クライアント側で簡単な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のプラグインの作成に基本的に三つの部分に分けれ記述します
- 変数の定義部分：初期変数の定義/初期値の設定、プラグインを呼び出す時に定義された変数に値を上書き（基本知識：JavaScriptの関数（function）について ）
- プラグインの処理本体：処理の初期準備、プラグインの内部関数の定義、this演算子の対処（javaScriptでの入れ子関数内の「this」の参照先が呼出し主となります ）
- プラグインの実行、結果の返還
- このプラグインの基本構造のコード説明は以下のとなります
(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コードの整理に役に立ちます
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が複雑になると分割してプラグイン作成の必要がある
- クライアント側で簡単な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のプラグインの作成に基本的に三つの部分に分けれ記述します
- 変数の定義部分：初期変数の定義/初期値の設定、プラグインを呼び出す時に定義された変数に値を上書き（基本知識：JavaScriptの関数（function）について ）
- プラグインの処理本体：処理の初期準備、プラグインの内部関数の定義、this演算子の対処（javaScriptでの入れ子関数内の「this」の参照先が呼出し主となります ）
- プラグインの実行、結果の返還
- このプラグインの基本構造のコード説明は以下のとなります
(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コードの整理に役に立ちます
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" が表示される ＜＝ 継承できない