JavaScriptのスコープチェインについての確認。

4つのコードを試してみた。

1つ目。

var val = 1;
window.onload = function(){
 var val = 10;
 alert("2回目:" + val);
 (function(){
  var val = 100;
  alert("3回目:" + val);
 })();
 alert("4回目:" + val);
 next();
}

function next(){
 alert("5回目:" + val);
}

alert("1回目:" + val);

上記のようなJavaScriptを実行すると、以下のような挙動を示す。
1回目:1
2回目:10
3回目:100
4回目:10
5回目:1

2つ目

var val = 1;
window.onload = function(){
 val = 10;
 alert("2回目:" + val);
 (function(){
  var val = 100;
  alert("3回目:" + val);
 })();
 alert("4回目:" + val);
 next();
}

function next(){
 alert("5回目:" + val);
}

alert("1回目:" + val);

※1つ目のコードと比べて、

alert("2回目:" + val);

の上のval変数を宣言するときに「var」がないよ。
これを実行すると、下のような挙動。
1回目:1
2回目:10
3回目:100
4回目:10
5回目:10

3つ目。

var val = 1;
window.onload = function(){
 var val = 10;
 alert("2回目:" + val);
 (function(){
  val = 100;
  alert("3回目:" + val);
 })();
 alert("4回目:" + val);
 next();
}

function next(){
 alert("5回目:" + val);
}

alert("1回目:" + val);

※1つ目のコードと比べて、

alert("3回目:" + val);

の上のval変数を宣言するときに「var」がないよ。
これを実行すると、以下のような挙動に。
1回目:1
2回目:10
3回目:100
4回目:100
5回目:1

4つ目。

var val = 1;
window.onload = function(){
 val = 10;
 alert("2回目:" + val);
 (function(){
  val = 100;
  alert("3回目:" + val);
 })();
 alert("4回目:" + val);
 next();
}

function next(){
 alert("5回目:" + val);
}

alert("1回目:" + val);

※1つ目のコードと比べて、

alert("2回目:" + val);

と

alert("3回目:" + val);

の上のval変数を宣言するときに「var」がないよ。
これを実行すると以下のようになる。
1回目:1
2回目:10
3回目:100
4回目:100
5回目:100

JavaScriptのクロージャ、スコープチェインについての記事での、

このように、変数オブジェクトを外側に向かって次々とたぐり、参照された変数を探していくという仕組みがスコープチェインと呼ばれるものです。

の通りの挙動を示しました。