js:module

差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

--- js:module [2021/07/05 10:26]
y2sunlight [グローバルスコープに関する注意]
+++ js:module [2021/07/05 10:36] (現在)
y2sunlight [グローバルスコープに関する注意]
@@ 行 150: / 行 150: @@
 モジュールの機能は単独のスクリプトのスコープに対してインポートされます。インポートされた機能はインポートしたスクリプトの内部からしかアクセスできません。即ち、インポートされた機能はグローバルスコープから利用することはできません。
-<sxh javascript;title:main.js>
+また、モジュールの場合、自動的に [[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode|Strict モード]]になり、var命令の省略は禁止されます。
-mport { School } from './school.js'
-var local_school = new School('Local School');
-console.log(local_school.name);  // OK
-// global_school = new School('Global School');
-// console.log(global_school.name); NG
-</sxh>
 <sxh html;title:index.html>
@@ 行 170: / 行 162: @@
   <script type="module" src="main.js"></script>
   <script>
+    // local_schoolはモジュールの内部からしかアクセスできない
     console.log(local_school.name);    // NG
     foo_school = new School('Foo School')  //NG
@@ 行 176: / 行 169: @@
 </html>
 </sxh>
-> TODO:module内ではグローバル変数が使えない？
+<sxh javascript;title:main.js>
+import { School } from './school.js'
+var local_school = new School('Local School');
+console.log(local_school.name);  // OK
+// モジュール内ではグローバルスコープを持つ変数が作成できない。
+// global_school = new School('Global School');
+// console.log(global_school.name); NG
+</sxh>
+<sxh javascript;title:school.js>
+export class School {
+    constructor(name) {
+        // プロパティの定義
+        this.name = name;
+    }
+}
+</sxh>
+\\

js/module.1625448404.txt.gz · 最終更新: 2021/07/05 10:26 by y2sunlight