兵どもが、夢のあとさき

JavaScript 系の言語に興味を惹かれ、まったりと更新しております

javascript のスコープ

f:id:shogorobe:20080101000035j:plain今日の昼食

1. スコープ

スコープは関数内でのみクローズする。

関数もまたオブジェクトであるという事実を強調します。

JavaScript は関数をクラスとして用います。

(javascript内では、クラス≒関数≒オブジェクト。クラス(関数)を実体化したものがオブジェクト。だから無名関数( var obj = function(){} )なんて物も作ることができる。)

(JavaScriptC++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 を使用することが推奨されています。

 こちらのサイトが良くまとまっていますので、ご参照下さい。

 

typescriptbook.jp