別JSファイルの変数・関数を利用したい

わからないこと
下記のコードでなぜ関数secondFunc()のみ正常に利用することができ、
他のグローバル変数や、クラスなどが ReferenceError となるのかがわからない。

認識
HTMLの解析は上から順に行われていくので、second.js では first.js が、third.js では first.js と second.js のグローバル変数・関数を扱うことができる。
グローバル変数・関数はwindowの下に入っているものなのでファイルを分けても共有されるもの。
しかしうまくいかず、、、

HTML
1<!DOCTYPE html>
2<html lang = 'ja'>
3  <head>
4    <meta charset = 'utf-8'>
5  </head>
6  <body>
7    <script src = first.js></script>
8    <script src = second.js></script>
9    <script src = third.js></script>
10  </body>
11</html>

Javascript
1'use strict'
2{
3  let first = "global first";
4
5  function firstFunc(){
6    return first;
7  }
8
9  class First{
10
11    constructor(){
12      this.num1 = 1;
13    }
14
15    getNum1(){
16      return this.num1;
17    }
18  }
19}

javascript
1'use stirct'
2{
3  
4  const second = "global second";
5
6
7  function secondFunc(){
8    return second;
9  }
10
11  class Second{
12    constructor(){
13      this.num2 = 2;
14    }
15    getNum2(){
16      return this.num2;
17    }
18  }
19
20  console.log(first);    // ReferenceError : first is not defined
21  console.log(firstFunc());  // ReferenceError : firstFunc is not defined
22
23}

javascript
1'use strict'
2{
3  const third = "global third";
4
5  console.log(first);    //ReferenceError : first is not defined
6  console.log(second);   //ReferenceError : second is not defined
7
8  console.log(secondFunc());     //global second が出力
9  console.log(firstFunc());   //ReferenceError : firstFunc is not defined
10
11  const sec = new Second();    //ReferenceError : Second is not defined
12  
13
14
15}
16

一体なぜこのようことが起きてしまうのでしょうか？
どなたか解答お願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

3種のJSファイルのuse strict以降を{}で囲っているためグローバルになっていないのでは？
以下、参考です。

ブロックスコープ

Javascript
1'use strict'
2//{
3  let first = "global first";
4
5  function firstFunc(){
6    return first;
7  }
8
9  class First{
10
11    constructor(){
12      this.num1 = 1;
13    }
14
15    getNum1(){
16      return this.num1;
17    }
18  }
19//}

投稿2020/08/20 23:26

編集2020/08/20 23:27

nekoniki

総合スコア2409

tomiswinner

2020/08/20 23:55

ブロックスコープが適用されるのですね、ありがとうございます！追加で申し訳ないのですがただ一点わからないことがあります。ブロックスコープが適用されているのに、何故second.jsのsecondFunc()関数は利用できるのでしょうか？またその一方でfirst.jsのfirstFunc()関数が利用できないのは何故なのでしょうか？

nekoniki

2020/08/21 00:23

よくよく見たらsecond.jsだけ`use stirct`になっていました。 first.jsは`use strict`が効いているため暗黙的グローバルの宣言ができずfirstFunc()が使えなくなっていたのだと思います。参考 https://qiita.com/ymaru/items/3c73af2cd4efe027a618

tomiswinner

2020/08/22 03:19

初歩的な部分でしたね、、申し訳ないです。丁寧に対応いただき本当にありがとうございました！！

行動規範の内容に同意します