2017-07-07

JavaScript再入門２ - スコープチェーンとクロージャ

Javascript

JavaScript再入門１- プロトタイプチェーンとコンストラクタ関数 - おれの技術日記の続き。

例によってこちらにお世話になります。
最強オブジェクト指向言語 JavaScript 再入門！

4. 変数のスコープはグローバル/ローカルのみ、スコープチェーンのルールに従い内側のスコープから順次走査・参照される

CとかJavaとかだとローカル変数のスコープはブロックを単位としているので、例えば以下のようなコードはコンパイルエラーになってそもそも実行できないが、JavaScriptでは合法。ここで宣言された変数a, bはその関数内のどこでも参照することができる。

function func1(){
    var a = 1;
    if(何らかの条件){
        var b = 3;
    }
    alert(b);
}

JavaScriptはみょうちくりんな言語なので関数を入れ子にすることもできるんだが、では次にこうするとどうなるか。

function func1(){
    var a = 1;
    function func2(){
        var b = 2;
    }
    alert(b);//ここでReferenceError
}
func1();

内側の関数の中で宣言された変数に対して外側の関数からはアクセスすることができず、ReferenceErrorとなる。ブロックレベルのスコープは存在しないが関数の入れ子による変数スコープの制限は有効。

グローバル変数	ローカル変数
関数の外で宣言した変数	関数の内側で宣言した変数・関数の仮引数
プロセス全体で参照できる	その関数の内側からのみ参照できる

次にこんなコードを書いてみると、これは動く。

var c = 3
function func1(){
    var a = 1;
    function func2(){
        var b = 2;
        //一番内側の関数からはその外側の変数を参照できる
        alert(a+b+c);//"6"となる
    }
    func2();
}
func1();

func2で参照された変数は一番内側のスコープをまず走査し、見つからなければもうひとつ外のfunc1のスコープを走査し、最後にグローバルスコープを走査する（もしそれでも見つかれなければエラーになる）。このようにして内側から外側に順次走査する機構をスコープチェーンという。ちなみに、複数のスコープで同一名の変数を宣言した場合には、このルールに従って一番最初に見つかったほう（＝より内側の変数）が参照される。

5. クロージャを使ってグローバルスコープを汚さずに状態を管理する

先ほど行ったようにJavaScriptでは関数の中にさらに関数を定義することができるが、内側の関数をスコープ外から呼び出すことができるか。と思ってこんなコードを書いてみたら、やはり最後の行のfunc2()は参照できずエラーになった。

function func1(){
    var a = 1;
    function func2(){
        var b = 2;
        alert(a+b);
    }
    func2();
}
func1();//これはOK
func2();//これはエラーになる

このスコープの妙を利用して、以下のように関数内に変数の状態を保持させ続けることができる。このようなやり方をクロージャという。

function func1(){
    var a = 1;
    return function(){
        alert(a);
        a+=1;
    }
}
var f = func1();
var f2 = func1();
f();//1がアラートされる
f();//2がアラートされる
f();//3がアラートされる
f2();//1がアラートされる

ちなみに、「この程度ならグローバル変数でもできるのでは？」と思われる方もいると思うが（というか私も思った）、クロージャはグローバルスコープを汚さずに状態を維持するために使うらしい。クロージャの手順は以下の通り。

関数を入れ子に定義する
外側の関数に変数を宣言する
内側の関数からその変数を操作する
内側の関数を外側の関数の戻り値にする

依然として疑問なのは

この例だと関数の参照をグローバルで持ち続けないといけないから結局グローバルスコープは汚れるのでは？
JavaでいうとこのBeanオブジェクトみたいなん作るときにうれしいのかな？でもそれならコンストラクタ関数でもおんなじことできるしな・・・
結局使いどころがピンとこないぞ、ググってもカウンタの例ばっかり出てくる

まあ、これはおいおいわかってくるんでしょう・・

依然として今後の課題

Apply関数って何？
(function() {})();とかいう記法→即時関数というらしい
thisのスコープの考え方

2017-07-06

JavaScript再入門１- プロトタイプチェーンとコンストラクタ関数

Javascript

JavaScriptは昔から触ってるけれど、いつも何となくググりながら場当たり的なコードを書いてやり過ごしてきてプロトタイプとかきちんと理解してないので、備忘も兼ねて勉強したことを記録してみる。

参考：最強オブジェクト指向言語 JavaScript 再入門！

1. オブジェクトはただのハッシュテーブル

オブジェクトは以下のようなコードで定義できる。

var obj = {key:value}

ここでvalueの部分には数値・テキスト・関数などを持ってこれるので、こんな書き方が可能。

var objA = {
    name:"tanaka"
    ,say:function(){alert("my name is " + this.name);}
}
objA.say();

2. Classはないけどプロトタイプチェーンがある

Class型言語の場合はClass定義をひな型としてオブジェクトを作るけれど、JavaScriptにクラスはない。そのかわり自身の上位（？）オブジェクトを自動的に参照するプロトタイプチェーンという機構がある。

var objA = {
    name:"tanaka"
    ,say:function(){alert("my name is " + this.name);}
}
var objB = {
    name:"suzuki"
}
var objC = {}
objB.__proto__ = objA
objC.__proto__ = objB

objA.say(); //"my name is tanaka"となる
objB.say(); //"my name is suzuki"となる
objC.say(); //"my name is suzuki"となる

ここでobjB.say()がコールされたときに、sayという関数はobjB自身はもっていないためそのプロトタイプであるobjAのsay関数が自動的に参照・コールされる。同様にobjC.say()の場合はobjB.nameとobjA.sayが使用される。
（ただし__proto__は標準仕様ではないらしく、通常は__proto__を使ったプロトタイプの設定はしないらしいけど・・・）

3. new演算子と関数を組み合わせてオブジェクトを生成する

ふつうはこんな風に書くらしい。（意味は分かるけど腹落ちしきれない）

var Person = function(name){
    this.name = name;
}
Person.prototype.sayHello = function(){
    alert("Hello " + this.name);
}
var o = new Person("suzuki")
o.sayHello();//"Hello suzuki"となる

「new演算子と組み合わせて関数をコールすることで、関数はコンストラクタ関数として実行され、オブジェクトの生成に利用される」とな。わかるようなわからないような・・・
new Person()をコールしたときに内部では（だいたい）こんなコードが動いているそう。

var obj = {};
obj.__proto__ = Person.prototype;
Person.apply(obj, arguments);
return obj;

__proto__というのは各オブジェクトが継承元の参照を保持するためのフィールドで、prototypeってのはクラス型言語でいうところのstaticともいうべき、各オブジェクトが参照すべきひな型という感じだろうか。3行目の意味はよくわからない、今後の課題とする。
元のスライドを~~丸パクリ~~写経した以下のコードだとここの動きがわかりやすい。

var Person = function(name){
	this.name = name;
}
Person.prototype.sayHello = function(){
	alert("Hello " + this.name);
}

var p = new Person("suzuki");
p.sayHello();//"Hello suzuki"

Person.prototype.name="tanaka";
p.sayHello();//"Hello suzuki"

delete p.name;
p.sayHello();//"Hello tanaka"

あやふやだった理解がだいぶしっかりした気がするけど、力尽きたので今日はここまで。

今後の課題

Apply関数って何？
(function() {})();とかいう記法
thisのスコープの考え方