JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数（function）でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){
return a * b ;
}
console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; };
var z = x( 3, 4 ) ;
console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b");
var x = myFunc( 3, 4 ) ;
console.log( x ) ; // 12が表示される
(function () { // 関数名がない
alert( "Hello!!" ) ;
})(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){
console.log( "Hello" ) ;
// 関数内でその関数を呼び出し
return func_name; // func_name()で記述すると、
//再帰呼び出しになり、メモリが
//なくなるまでに「Hello」を表示される
}
// 変数の関数を呼び出し
func_var();
// 関数名として呼び出し
func_name(); // 当該関数名が定義されていないエラー発生
function 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 x = 10 ; // グローバル変数
function my_func( p ) {
var x = p ; // 関数内のローカル変数
return console.log( "x:" + x );
}
my_func( 100 ) ; // ローカル変数「x」が100になる
console.log( x ); // グローバル変数「x」が10のままになる
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エラーにある
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が表示される
function MyObject( p1 ){
this.a = 5;
this.getValue = function() {
return this.a + p1 ;
}
} ;
var obj_1 = new MyObject(3) ;
console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
Uncaught SyntaxError: Unexpected token -
// プラグインの定義
(function($) {
var namespace; // 任意な名前
namespace = { // オブジェクトの定義
something : function() { // オブジェクトなインナー関数
// 処理の記述
},
bodyInfo : function() { // 別のインナー関数
// 処理の記述
}
};
window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング
})(jQuery);
// プラグインの呼び出し方
$(function() {
ns.something(); // プラグインの関数を呼び出し
ns.bodyInfo();
});
(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オブジェクトを'$'に渡す
$("#element").myplugin() ;