From b1a6ef0f3b05956703cb4e92c65f4124afa07209 Mon Sep 17 00:00:00 2001 From: azu Date: Sun, 21 Jun 2020 18:39:59 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat(function-this):=20globalThis=E3=81=AB?= =?UTF-8?q?=E3=81=A4=E3=81=84=E3=81=A6=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/basic/function-this/README.md | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/source/basic/function-this/README.md b/source/basic/function-this/README.md index 205e65a8d6..29996078ee 100644 --- a/source/basic/function-this/README.md +++ b/source/basic/function-this/README.md @@ -36,8 +36,8 @@ description: "JavaScriptにおける`this`というキーワードの動作を ### スクリプトにおける`this` {#script-this} 実行コンテキストが"Script"である場合、トップレベルのスコープに書かれた`this`はグローバルオブジェクトを参照します。 -グローバルオブジェクトには、実行環境ごとに異なるものが定義されています。 -ブラウザなら`window`オブジェクト、Node.jsなら`global`オブジェクトとなります。 +グローバルオブジェクトは、実行環境ごとに異なるものが定義されています。 +ブラウザのグローバルオブジェクトは`window`オブジェクト、Node.jsのグローバルオブジェクトは`global`オブジェクトとなります。 ブラウザでは、`script`要素の`type`属性を指定していない場合は、実行コンテキストが"Script"として実行されます。 この`script`要素の直下に書いた`this`はグローバルオブジェクトである`window`オブジェクトとなります。 @@ -49,6 +49,13 @@ console.log(this); // => window ``` +また、ES2020では実行環境によってグローバルオブジェクトの名前が異なる問題を解決するために、 +`globalThis`という名前でそれぞれの実行環境のグローバルオブジェクトを参照できます。 + +```js +console.log(globalThis); // ブラウザでは`window`オブジェクト、Node.jsでは`global`オブジェクト +``` + ### モジュールにおける`this` {#module-this} 実行コンテキストが"Module"である場合、そのトップレベルのスコープに書かれた`this`は常に`undefined`となります。 @@ -64,7 +71,7 @@ console.log(this); // => undefined ``` このように、トップレベルのスコープの`this`は実行コンテキストによって`undefined`となる場合があります。 -単純にグローバルオブジェクトを参照したい場合は、`this`ではなく`window`などのグローバルオブジェクトを直接参照したほうがよいです。 +単純にグローバルオブジェクトを参照したい場合は、`this`ではなく`globalThis`でグローバルオブジェクトを直接参照したほうがよいです。 ## 関数とメソッドにおける`this` {#function-and-method-this} @@ -891,11 +898,11 @@ console.log(obj.method.call("THAT")); // => "THAT" | 実行コンテキスト | strict mode | コード | `this`の評価結果 | | ---------------- | ----------- | ---------------------------------------------------- | ---------------- | -| Script | ＊ | `this` | global | -| Script | ＊ | `const fn = () => this` | global | -| Script | NO | `const fn = function(){ return this; }` | global | +| Script | ＊ | `this` | globalThis | +| Script | ＊ | `const fn = () => this` | globalThis | +| Script | NO | `const fn = function(){ return this; }` | globalThis | | Script | YES | `const fn = function(){ return this; }` | undefined | -| Script | ＊ | `const obj = { method: () => { return this; } }` | global | +| Script | ＊ | `const obj = { method: () => { return this; } }` | globalThis | | Module | YES | `this` | undefined | | Module | YES | `const fn = () => this` | undefined | | Module | YES | `const fn = function(){ return this; }` | undefined | From dd7ef0919617c8f6512282f574d091fac6486de4 Mon Sep 17 00:00:00 2001 From: azu Date: Sun, 21 Jun 2020 18:45:27 +0900 Subject: [PATCH 2/4] fix(function-this): add meta --- source/basic/function-this/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/source/basic/function-this/README.md b/source/basic/function-this/README.md index 29996078ee..d4c9b293b9 100644 --- a/source/basic/function-this/README.md +++ b/source/basic/function-this/README.md @@ -52,6 +52,8 @@ console.log(this); // => window また、ES2020では実行環境によってグローバルオブジェクトの名前が異なる問題を解決するために、 `globalThis`という名前でそれぞれの実行環境のグローバルオブジェクトを参照できます。 +{{book.console}} + ```js console.log(globalThis); // ブラウザでは`window`オブジェクト、Node.jsでは`global`オブジェクト ``` From f93e20fb939897fb91daf27b1bfabc7db99f8c94 Mon Sep 17 00:00:00 2001 From: azu Date: Sun, 21 Jun 2020 19:33:42 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix(function-this):=20globalThis=E3=81=AB?= =?UTF-8?q?=E3=81=A4=E3=81=84=E3=81=A6=E3=82=92=E7=A7=BB=E5=8B=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/basic/function-this/README.md | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/source/basic/function-this/README.md b/source/basic/function-this/README.md index d4c9b293b9..dc66dc50a1 100644 --- a/source/basic/function-this/README.md +++ b/source/basic/function-this/README.md @@ -49,15 +49,6 @@ console.log(this); // => window ``` -また、ES2020では実行環境によってグローバルオブジェクトの名前が異なる問題を解決するために、 -`globalThis`という名前でそれぞれの実行環境のグローバルオブジェクトを参照できます。 - -{{book.console}} - -```js -console.log(globalThis); // ブラウザでは`window`オブジェクト、Node.jsでは`global`オブジェクト -``` - ### モジュールにおける`this` {#module-this} 実行コンテキストが"Module"である場合、そのトップレベルのスコープに書かれた`this`は常に`undefined`となります。 @@ -73,7 +64,21 @@ console.log(this); // => undefined ``` このように、トップレベルのスコープの`this`は実行コンテキストによって`undefined`となる場合があります。 -単純にグローバルオブジェクトを参照したい場合は、`this`ではなく`globalThis`でグローバルオブジェクトを直接参照したほうがよいです。 + +単純にグローバルオブジェクトを参照したい場合は、`this`ではなく`globalThis`を使います。 +`globalThis`は実行環境のグローバルオブジェクトを参照するためにES2020で導入されました。 + +実行環境のグローバルオブジェクトは、ブラウザでは`window`、Node.jsでは`global`のように異なります。 +そのため、`globalThis`を使えない場合はグローバルオブジェクトを参照するためにコード上で分岐する必要がありました。 +ES2020ではこの問題を解決するためにグローバルオブジェクトを参照するための`globalThis`が導入されました。 + +{{book.console}} + +```js +// ブラウザでは`window`オブジェクト、Node.jsでは`global`オブジェクトを参照する +console.log(globalThis); +``` + ## 関数とメソッドにおける`this` {#function-and-method-this} From 4a6bdd6b538cd35cfd86b6e6ab8e1d6d78a25e62 Mon Sep 17 00:00:00 2001 From: azu Date: Sun, 21 Jun 2020 19:40:16 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix(function-this):=20=E4=BD=95=E3=82=92?= =?UTF-8?q?=E8=A7=A3=E6=B1=BA=E3=81=97=E3=81=A6=E3=81=84=E3=82=8B=E3=81=8B?= =?UTF-8?q?=E3=81=AB=E3=81=A4=E3=81=84=E3=81=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/basic/function-this/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/source/basic/function-this/README.md b/source/basic/function-this/README.md index dc66dc50a1..251dfe7b05 100644 --- a/source/basic/function-this/README.md +++ b/source/basic/function-this/README.md @@ -68,9 +68,9 @@ console.log(this); // => undefined 単純にグローバルオブジェクトを参照したい場合は、`this`ではなく`globalThis`を使います。 `globalThis`は実行環境のグローバルオブジェクトを参照するためにES2020で導入されました。 -実行環境のグローバルオブジェクトは、ブラウザでは`window`、Node.jsでは`global`のように異なります。 -そのため、`globalThis`を使えない場合はグローバルオブジェクトを参照するためにコード上で分岐する必要がありました。 -ES2020ではこの問題を解決するためにグローバルオブジェクトを参照するための`globalThis`が導入されました。 +実行環境のグローバルオブジェクトは、ブラウザでは`window`、Node.jsでは`global`のように名前が異なります。 +そのため同じコードで、異なるグローバルオブジェクトを参照するには、コード上で分岐する必要がありました。 +ES2020ではこの問題を解決するために、実行環境のグローバルオブジェクトを参照する`globalThis`が導入されました。 {{book.console}}