1. スコープ
スコープは関数内でのみクローズする。
関数もまたオブジェクトであるという事実を強調します。
JavaScript は関数をクラスとして用います。
(javascript内では、クラス≒関数≒オブジェクト。クラス(関数)を実体化したものがオブジェクト。だから無名関数( var obj = function(){} )なんて物も作ることができる。)
(JavaScript は C++ や Java などでみられる クラス文を持たない、プロトタイプベースの言語です。これは時に、クラス文を持つ言語に慣れているプログラマを混乱させます。逆に無理やりクラスにしなくとも良いとも思いますが…)
2. 関数の定義
(1)
a();
function a(){
...
}
稼働する
(2)
a();
var a = function(){
...
}
a()が呼び出されたときに、オブジェクト a が未定義なので、未定義エラーとなる。
(3)
a();
var a = new Function
3. 無名関数
(function() {
...
}
何が便利かというと、関数内ではスコープがクローズしているため、他のソースの変数や関数と競合しない。
var a = 100;... ①
var b = 200;... ②
function bbb(){... ③
alert('test');
}
(function() {... 即時関数(5. 参照)
var a = 3;... ④
function bbb(){... ⑤
var b = 5;... ⑥
alert(a);/* 3 と表示 */
alert(b);/* 5 と表示 */
}
bbb();①②③はすべて無視(スコープから外れる)されて、④⑤⑥が有効となる
}
4. 無名関数に値を渡す
var x = 100;
(function(x) {... 即時関数(5. 参照)
alert(x);... 変数 x のスコープは、(function(){}内のみ。従って、x は 100 ではなく、1 となる。
})(1);... function(x) の x に 数値の 1 を渡す。よって alert(x) は、1 を表示する
5. 即時関数
定義されるのではなく、その場で実行される関数。無名関数で書かれることが多い
(function(){ ... })();
が基本。
function(){ ... }(); と書くと
function(){
...
}/* ← ここで関数定義文が完了する */
();
と認識され、(); がSyntax Error となるので、function(){ ... } を ()で括る必要がある。
5.5 jQuery で、他のライブラリと $ を競合させない。(4 と 5 の応用)
jQuery で他のライブラリと競合を起こさない方法
(function($){
$('#ooo')...
...
...
})(jQuery);
上記の様に記載すると、変数 $ は、この無名関数内では、jQuery(window.jQuery) を表し、$ を使用しているライブラリと競合しない。
6. DOMの読み込み完了時に処理を実行させる(jQuery)
$(document).ready(function() {/* document は省略可 $().ready(function() { ... }); */
...
});
↓ 省略形
$(function() {
.../* DOM の読み込みが完了したら ... を実行 */
});
$が使用されているので、jQueryです。
7. setTimeout 関数
setTimeout(関数, 遅延時間(ms)); なので、基本的な使い方としては無名関数を使用して
setTimeout(function(){
alert('ok');
}, 1000);
の様な書き方になる。
まあ、しかしjavascriptというのは独特の表示方法を持ちますね。慣れるとそれがたまらん、という感じになる？
2022/08/01 更新
現行の javascript では、var を使用しないことが推奨されています。これは、var がスコープ外でも参照できてしまうため、バグの要因となりえるためです。現行では、const と let を使用することが推奨されています。
こちらのサイトが良くまとまっていますので、ご参照下さい。
