回答編集履歴

関数宣言と関数式、グローバルコード上の this 値

2018/05/06 16:31

投稿

think49

スコア18166

test CHANGED Viewed

@@ -158,4 +158,116 @@
+### 関数宣言と関数式
+> function(){ ... } はラムダ式の定義、
+式の定義という意味では正しいのですが、実は条件があります。
+| 関数の種類                     | 制限事項                                                     |
+| ------------------------------ | ------------------------------------------------------------ |
+| 関数宣言 (FunctionDeclaration) | function キーワードで始まらなければならず、名前をつけなければならない |
+| 関数式 (FunctionExpression)    | function キーワードで始まってはならず、名前は付けても付けなくても良い |
+関数宣言は**function キーワードで始まらなければならない**と決まっている為、いわゆる即時関数と呼ばれる書き方では `()` や `+` 等を先頭に置くことで関数式化しています。
+```JavaScript
+(function main () { // "(" で始める事で関数式扱いとなる (関数式なので名前は付けても良い)
+  console.log(main.name);
+}());
+```
+### グローバルコード上の this 値
+> thisはDOMツリーのルートということなのですね。
+これは違います。
+DOM 規定ではなく、ECMAScript 規定によって、「**グローバルコード上では this 値がグローバルオブジェクトである**」と定められています。
+そして、`window` キーワードでグローバルオブジェクトを参照できるのは、DOM 規定によるものです。
+```JavaScript
+/**
+ * グローバルコード
+ */
+window.parseFloat('1.0'); // (A)
+this.parseFloat('1.0');   // (B)
+```
+上記コードは、Webブラウザ上ではどちらも期待通りに動作しますが、Node.js では (A) が動作せず、(B) のみ期待通りに動作するでしょう。
+Node.js は window キーワードでグローバルオブジェクトを参照できませんが、ECMAScript 仕様は実装されています。
+その為、ECMAScript 仕様の範囲内である `this` 値による参照は有効なのです。
+---
+ちなみに、DOM 上のルートノードは元々は `document` でした。
+Document Object Model の名が示す通りですね。
+ですので、`document.parentNode` は未定義です。
+`window` は長らく、標準化されていませんでしたが、HTML Standard の既定と同時に `window` オブジェクトが定義され、DOM Standard でも定義されました。
+- [HTML Standard — Window object, WindowProxy exotic object（日本語訳）](https://triple-underscore.github.io/HTML-window-ja.html#the-window-object)
+- [4.2. Node tree - DOM Standard](https://dom.spec.whatwg.org/#node-trees)
+DOM Standard では少し、複雑で3つのツリーが出てきます。
+- Node tree上 に Document は存在しますが、Window は存在しません
+- Document tree 上の root は document です
+- Shadow tree 上の root は ShadowRoot であり、Window です
 Re: Chironian さん

main() 関数の代替

2018/05/06 16:31

投稿

think49

スコア18166

test CHANGED Viewed

@@ -1,3 +1,7 @@
+### JavaScriptの実行タイミング
 > これに対してJavaScriptの関数がいつ呼ばれるのか？の把握が甘そうなのです。
@@ -26,4 +30,132 @@
+### main() 関数の代替
+JavaScriptの場合、関数を自由に定義できるので main 関数という概念はありませんが、ES3, ES5 時代にはグローバル汚染を回避する為に即時関数で括る慣習がありました。
+```JavaScript
+<script>
+/**
+ * (A) ES3/ES5
+ */
+'use strict';
+(function () {  // FunctionExpression
+  function handleClick (event) {
+    console.log(event.type);
+  }
+  function main () {
+    this.document.addEventListener('click', handleClick, false);
+  }
+  main.call(this);
+}.call(this));
+</script>
+```
+ES6 (ES2015) 時代もグローバル汚染は回避しますが、回避手段が増えています。
+```JavaScript
+<script>
+/**
+ * (B) ES6 (ES2015) type1
+ */
+'use strict';
+(() => {  // ArrowFunction
+  function handleClick (event) {
+    console.log(event.type);
+  }
+  const main = () => {
+    this.document.addEventListener('click', handleClick, false);
+  };
+  main();
+})();
+/**
+ * (C) ES6 (ES2015) type2
+ */
+{ // BlockStatement
+  const handleClick = function handleClick (event) {
+    console.log(event.type);
+  };
+  const main = () => {
+    this.document.addEventListener('click', handleClick, false);
+  };
+  main();
+}
+</script>
+```
+いずれも私が気を付けていることは、**main 関数がグローバルコードと同じ this 値を持っていること**です。
+が、これは私の個人的なポリシーであり、標準的な基準があるわけではありません。
 Re: Chironian さん