JavaScript: 2009年1月アーカイブ

<script>
var a = Math.floor(2.9999);
alert(a);  // '2'と表示
</script>

サイ本　第３章　データ型と値

３種類の基本データ型

複合データ型

サイ本　第２章２.８　予約語

サイ本　第２章２.６　識別子

var $ =   1;
var $1 =  2;
var $x =  3
var x$ =  4;
var $$ =  5;
var $$$ = 6;
var $_  = 7;
var _$  = 8;

alert($);
alert($1);
alert($x);
alert(x$);
alert($$);
alert($$$);
alert($_);
alert(_$);

サイ本　第２章２.５　コメント

// 行コメント

/*  コメント */

/* 
　複数行に
　わたる
　コメント
 */

/* ～ */ はネストできない

/* 

/*  */ ← エラー!!

 */

JavaScript第５版　 第２章２.４セミコロン

a = 3
b = 4
alert(a)
alert(b)

function x(){
  return
  true
}
alert(x());  // 'undefined'

return;
true;

サイ本を熟読して基本をおさらい中。

サイ本　第２章2.2　大文字と小文字

alert(1);
Alert(1); // エラー

a = 1;
A = 2;
alert(a);  // 1
alert(A);  //  2

a = function(){alert(1);}
A = function(){alert(2);}
a(); // 1
A(); // 2

WSH/Jscriptでは？

WSH.echo(1);
WSH.ECHO(1);
WSH.Echo(1);
WSH.EchO(1);
WSH.eCHo(1);

WSH.Quit();
WSH.QUIT();
WSH.quiT();

コレ全部OK。
何故だかはわからない。また、どういう条件の場合これができるのかも不明。

function funcname(args){ do something};

は

var funcname = function(args){ do something};

と等価になる。

javascriptを理解するためのたった2つの大切なこと
javascriptを理解するためのたった2つの大切なこと:改

function文はプログラムの静的な構造を定義するだけなのです。
JavaScriptコードが解析されコンパイルされたときに、関数は定義されます。

function foo( ){ ... }

var foo = function( ){ ... };

foo();
function foo(){ alert(1) }

foo(); // エラー
var foo = function (){ alert(1) };

メソッド定義は代入文！！

function Foo(){  }; // クラス宣言
function Foo.prototype.greet(){ alert('hi') }; // エラー

function Foo(){  }; // クラス宣言
Foo.prototype.greet = function (){ alert('hi') }; //　メソッド定義は代入文で

正常に動作するケース

function Foo(){  };
Foo.prototype.greet = function (){ alert('hi') };

var foo = new Foo();
foo.greet();

Foo.prototype.greet = function (){ alert('hi') };
function Foo(){  };

var foo = new Foo();
foo.greet();

Foo.prototype.greet = function (){ alert('hi') };

var foo = new Foo();
foo.greet();

function Foo(){  };

var foo = new Foo();

Foo.prototype.greet = function (){ alert('hi') };

foo.greet();

function Foo(){  };

エラーになるケース

var foo = new Foo();
foo.greet();

function Foo(){  };
Foo.prototype.greet = function (){ alert('hi') };

var foo = new Foo();
foo.greet();

Foo.prototype.greet = function (){ alert('hi') };
function Foo(){  };

まとめ

• function foo ( ){..} と var foo = function ( ) {..} は、関数が生成されるタイミングが違う
• プロトタイプによるメソッドの宣言は、代入文である。
• メソッドの代入は、
  　クラス宣言をした後、かつ、インスタンスからメソッド呼び出しをする前
  にやるべし。

クロージャとは

クロージャ (クロージャー、Closure) は、プログラミング言語において引数以外の変数を実行時の環境ではなく、自身が定義された環境（静的スコープ）において解決する関数のことである。

クロージャを作るのは難しくない

目次

• 猿でもわかるクロージャ超入門　１　問題
  クロージャを使うと何ができるのか？


• 猿でもわかるクロージャ超入門　２　関数の中の関数
  Javascriptでは関数の中に関数を作れます。


• 猿でもわかるクロージャ超入門　３　無名関数
  匿名はお好き？


• 猿でもわかるクロージャ超入門　４　関数を返す関数
  関数の戻り値が関数だったなら


• 猿でもわかるクロージャ超入門　５　クロージャを作る
  あ、できちゃった！

参考になったページ

クロージャを理解する手がかりになったページ

• nothing but ordinary - JavaScript はじめてのクロージャ入門
  　　ここが一番わかりやすかった。


• クロージャとは - はてなキーワード
  　　Wikipediaよりは分かりやすかった。


• JavaScriptクロージャを完全理解！スコープチェインを知る（後編） - page2 - builder by ZDNet Japan
  　　カウンタの例がシンプルでわかりやすかった。


• JavaScript クロージャとレキシカルスコープ - Backstage of theater.js
  　　「内部関数とクロージャはほぼ同義」という説明が、クロージャを理解するヒントになりました。
  長いページですが、最初の数十行読むだけで充分よいヒントが得られます。

クロージャを理解した後で読むと目からウロコなページ

• Life is beautiful: Javascriptクイズ（中級者向け）：無名関数と実行効率の話
  　　無名関数をどういう場面で使うと効果的かがよくわかった。


• Life is beautiful: Javascript、クロージャを使ったプライベート関数の隠蔽について
  　　クロージャをどういう場面で使うと効果的かかがよくわかった。ほおぉ。まさに目からウロコ。


• クロージャの定義 - Perl入門～サンプルコードによるPerl入門～
  　　Perlにおけるクロージャが良く分かった。シンプルな説明がステキです。

追記①

追記②

クロージャは、理解するよりも作るほうが簡単

<script>
//サンプル5-1

function outer(){
    var x = 1;	　// outerのスコープ内で変数を定義

    return　function (){ //この関数が「クロージャ」
        alert(x);  // "関数内関数"の中で、outerスコープの変数を参照。
    };

}

var f =  outer(); 
f();  // 1と表示。
</script>

• outerのスコープ内で変数を定義し、
• outerの中に関数(=関数内関数)を作って
• その関数内関数から、先ほどの変数を参照する

何の役に立つのか？

「クロージャが作れたのはいいけど、何がうれしいのか？」

<script>
//サンプル5-2

function outer(){
    var x = 1;

    return　function (){
        alert(x);
	x = x + 1;
    };

}

var f =  outer(); 
f();  // 1
f();  // 2
f();  // 3
</script>

問題
　呼び出すたびに、1,2,3,...を返すような関数f()を定義せよ。

f();  //  1 
f();  //  2
f();  //  3

補足１　無名関数は必須ではない。

「無名関数」を使わないクロージャ

//サンプル5-3

function outer(){
    var x = 1;

    function inner(){
        alert(x);
	x = x + 1;
    };

    return inner;
}

var f =  outer(); 
f();  // 1
f();  // 2
f();  // 3

補足２　「クロージャ」(Closure)という名前について

<script>
//サンプル4-1

function outer(){
    var inner = function (){  // 無名関数を定義してinnerに代入
        alert("hello");
    }

　　return inner;             // inner関数を返す
}

var f =  outer();             // outre関数は戻り値としてinner関数を返す。それがfに代入される。
f();                          // "hello"と表示。inner() が実行されたのと同じ効果がある。
</script>

1. outer内で無名関数が生成される
2. それが変数innerに代入される
3. そのinnerが戻り値として返される
4. それがfに代入される

普通に関数を宣言してそれを返す

<script>
//サンプル4-2

function outer(){
    function inner(){  // inner関数を定義
        alert("hello");
    }

　　return inner;      // inner関数を返す
}

var f =  outer();      // inner関数がfに代入される。
f();                   // "hello"と表示。
<・script>

無名関数を定義してそのままreturnする

<script>
//サンプル4-3

function outer(){

    return　function (){  // 無名関数を定義してすぐreturn
        alert("hello");
    };

}

var f =  outer();         // onter内で定義した無名関数がfに代入される。
f();                      // "hello"と表示。
<・script>

<script>
//サンプル4-4

function outer(){

    return　function (){
        var x = "hello";
        alert(x);
    };

}

var f =  outer();
f();  // "hello"と表示。
</script>

<script>
//サンプル4-5

function outer(){
    var x = "hello";

    return　function (){
        alert(x);
    };

}

var f =  outer(); 
f();  // "hello"と表示。
</script>

関数を定義する方法その１　(普通のやり方)

<script>
function speak(){ alert("hello"); }

speak(); // "hello"と出力
</script>

関数を定義する方法その２　(無名関数を使う)

<script>
var speak = function (){ alert("hello"); }

speak(); // "hello"と出力
</script>

無名関数を定義してすぐさま実行する

• 無名関数を定義する
• それを変数speakに代入する
• speak( )で関数を実行する

<script>
(  function(){ alert("hello"); }  )(); // "hello"と出力
</script>

クロージャとは関数である。

クロージャとは、関数である

クロージャとは関数の中の関数である

関数の中の関数

//関数の中で関数を定義

function outer(){
    function inner(){
        alert("hello");
    }
}

<script>
function outer(){
    function inner(){
        alert("hello");
    }
}

inner(); // エラー!
</script>

<script>
function outer(){
    function inner(){
        alert("hello");
    }
}

outer(); // 何も起こらない!
</script>

<script>
function outer(){
    function inner(){
        alert("hello");
    }
    inner();  //←コレ
}

outer(); // "hello"と表示された！
</script>

問題です。

f();  //  1 
f();  //  2
f();  //  3

この問題、解けますでしょうか？

普通の関数では、できないと思います。
しかし「クロージャ」というのを使えば、このようなことができます。

クロージャって何だ？

私が最初に見たのは続・初めてのPerl 改訂版（アルパカ本）でした。
まったく理解できませんでした。

その後、404　Blog not foundやnaoyaさんのブログなどで「クロージャ」という単語を目にしました。
やはり、まったく分かりませんでした。

とどめの一撃はWikipediaの解説記事。

クロージャ (クロージャー、Closure) は、プログラミング言語において引数以外の変数を実行時の環境ではなく、自身が定義された環境（静的スコープ）において解決する関数のことである。

本当にありがとうございました（涙）
私はあきらめました。

そして歳月は流れ・・・

最近、Javascriptで勉強してみたら、突然理解できるようになりました。
理解した、というよりも「クロージャが作れてしまった」のです。
上に書いた問題が解けてしまったのです。

「よくわかんねーけど、おれ、自転車に乗れてるぞ？」という、少年のような気持ちでした。

そこで、
「クロージャ」がまったく意味不明だった私がクロージャを作れるようになった過程
を、ここに披露いたします。(注)

私がクロージャを理解するために格闘して、わかったことは、

クロージャは理解するより作るほうが簡単。
クロージャを作るためには、次の３つのことだけできればよい。

クロージャを作成するために必要な３つのこと

• 関数内の関数
• 関数を返す関数
• 無名関数

概要

ダウンロード

使い方

c:¥>cscript  getSubSubFolders.js //nologo

実行結果の例

C:¥>cscript getSubSubFolders.js c:¥perl //nologo
cpan    build
cpan    sources
eg      aspSamples
eg      cgi
eg      fork
eg      IEExamples
eg      PerlEx
eg      Windows Script Components
eg      Windows Script Host
html    bin
html    Components
html    faq
・・・
長いので以下略

スクリプトのソースコード

var fso = new ActiveXObject("Scripting.FileSystemObject");

var path = argv(0);

var root = fso.getFolder(path);

var subs = getSubFolders(root);

var subsubs=[];

foreach(subs,    function(sub){ subsubs = subsubs.concat(getSubFolders(sub)); });

foreach(subsubs, function($_){ echo($_.ParentFolder.Name + "\t" +  $_.Name); });

//サブフォルダ一覧を取得

function getSubFolders(oFolder) {

    return collectionToArray(oFolder.SubFolders);

}

//コレクションを配列に変換

function collectionToArray(collection){

    var objEnu = new Enumerator(collection);

    var array = [];

    for (; !objEnu.atEnd(); objEnu.moveNext() ){

      array.push(objEnu.item());

    }

    return array;

}

function echo(str) { WSH.Echo(str); }

function argv(i){

    if(WSH.Arguments.length == 0) echo('引数が指定されていません。');

    return WSH.Arguments(i);

}

function foreach(array,func){ for(var i in array) func(array[i]); }