From b7c84d8d6d7bd91986d363a6cb65058cfe0f50cc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 18 Sep 2021 21:41:31 +0900 Subject: Operators/this を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/07/21 時点の英語版に同期 - リンク先のリダイレクトを修正 --- files/ja/_redirects.txt | 4 +- .../javascript/reference/operators/this/index.md | 359 +++++++++++---------- 2 files changed, 182 insertions(+), 181 deletions(-) (limited to 'files/ja') diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 5f7cc61fb8..75444b0ba1 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -3081,7 +3081,7 @@ /ja/docs/Web/API/Element/name /ja/docs/Web/API /ja/docs/Web/API/Event/button /ja/docs/Web/API/MouseEvent/button /ja/docs/Web/API/Event/createEvent /ja/docs/Web/API/Document/createEvent -/ja/docs/Web/API/EventHandler /ja/docs/orphaned/Web/Guide/Events/Event_handlers +/ja/docs/Web/API/EventHandler /ja/docs/Web/Events/Event_handlers /ja/docs/Web/API/EventTarget.addEventListener /ja/docs/Web/API/EventTarget/addEventListener /ja/docs/Web/API/EventTarget.dispatchEvent /ja/docs/Web/API/EventTarget/dispatchEvent /ja/docs/Web/API/EventTarget.removeEventListener /ja/docs/Web/API/EventTarget/removeEventListener @@ -3895,7 +3895,7 @@ /ja/docs/Web/Guide/DOM/Using_full_screen_mode /ja/docs/Web/API/Fullscreen_API /ja/docs/Web/Guide/DOM/Whitespace_in_the_DOM /ja/docs/Web/API/Document_Object_Model/Whitespace /ja/docs/Web/Guide/Events /ja/docs/orphaned/Web/Guide/Events -/ja/docs/Web/Guide/Events/Event_handlers /ja/docs/orphaned/Web/Guide/Events/Event_handlers +/ja/docs/Web/Guide/Events/Event_handlers /ja/docs/Web/Events/Event_handlers /ja/docs/Web/Guide/Events/Orientation_and_motion_data_explained /ja/docs/Web/Events/Orientation_and_motion_data_explained /ja/docs/Web/Guide/Events/Overview_of_Events_and_Handlers /ja/docs/orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers /ja/docs/Web/Guide/Graphics/Drawing_graphics_with_canvas /ja/docs/Web/API/Canvas_API/Tutorial diff --git a/files/ja/web/javascript/reference/operators/this/index.md b/files/ja/web/javascript/reference/operators/this/index.md index eb3ac7425d..3595fcaaee 100644 --- a/files/ja/web/javascript/reference/operators/this/index.md +++ b/files/ja/web/javascript/reference/operators/this/index.md @@ -3,40 +3,40 @@ title: this slug: Web/JavaScript/Reference/Operators/this tags: - JavaScript - - Language feature - - Operator + - 言語機能 + - 演算子 - Primary Expressions - - Reference + - リファレンス - this - - 演算子 - - 言語機能 +browser-compat: javascript.operators.this translation_of: Web/JavaScript/Reference/Operators/this --- -
{{jsSidebar("Operators")}}
- -

関数の this キーワード は、JavaScript ではほかの言語と少々異なる動作をします。また、厳格モードと非厳格モードでも違いがあります。

+{{jsSidebar("Operators")}} -

ほとんどの場合、this の値はどのように関数が呼ばれたかによって決定されます（実行時結合）。これは実行時に割り当てできず、関数が呼び出されるたびに異なる可能性があります。ES5 では、関数が{{jsxref('Operators/this', "どのように呼ばれたかに関係なく this の値を設定する", 'The_bind_method', 1)}} {{jsxref("Function.prototype.bind()", "bind()")}} メソッドが導入され、ES2015 では、独自の this バインディングを行わないアロー関数が導入されました（これは包含するレキシカルコンテキストの this の値を保持します）。

+**関数の `this` キーワード** は、JavaScript ではほかの言語と少々異なる動作をします。また、[strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)であるかどうかでも違いがあります。 -
{{EmbedInteractiveExample("pages/js/expressions-this.html")}}
+ほとんどの場合、`this` の値はどのように関数が呼ばれたかによって決定されます (実行時結合)。これは実行時に代入によって設定することはできず、関数が呼び出されるたびに異なる可能性があります。ES5 では {{jsxref("Function.prototype.bind()", "bind()")}} メソッドが導入され、関数が{{jsxref('Operators/this', "どのように呼ばれたかに関係なく `this` の値を設定する", 'The_bind_method', 1)}}することができるようになり、ES2015 では、自身では `this` の結び付けを行わない[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)が導入されました (これは包含する構文上のコンテキストの `this` の値を保持します)。 - +{{EmbedInteractiveExample("pages/js/expressions-this.html")}} -

構文

+## 構文 -
this
+``` +this +``` -

値

+### 値 -

非厳格モードでは、実行コンテキスト (グローバル、関数、eval) のプロパティで、常にオブジェクトへの参照です。厳格モードではどのような値でも取り得ます。

+strict モードでない場合は、実行コンテキスト (グローバル、関数、eval) のプロパティで、常にオブジェクトへの参照です。 strict モードではどのような値でも取り得ます。 -

解説

+## 解説 -

グローバルコンテキスト

+### グローバルコンテキスト -

グローバル実行コンテキスト (すべての関数の外側) では、厳格モードであるかどうかにかかわらず、this はグローバルオブジェクトを参照します。

+グローバル実行コンテキスト (すべての関数の外側) では、strict モードであるかどうかにかかわらず、`this` はグローバルオブジェクトを参照します。 -
// ウェブブラウザーでは window オブジェクトもグローバルオブジェクトです。
+``` js
+// ウェブブラウザーでは window オブジェクトもグローバルオブジェクトです。
 console.log(this === window); // true
 
 a = 37;
@@ -45,19 +45,18 @@ console.log(window.a); // 37
 this.b = "MDN";
 console.log(window.b)  // "MDN"
 console.log(b)         // "MDN"
-
+``` -
-

メモ: コードが実行されている現在のコンテキストに関係なく、グローバルの {{jsxref("globalThis")}} プロパティを使用していつでも簡単にグローバルオブジェクトを取得できます。

-
+> **Note:** コードが実行されている現在のコンテキストに関係なく、グローバルの {{jsxref("globalThis")}} プロパティを使用していつでも簡単にグローバルオブジェクトを取得できます。 -

関数コンテキスト

+### 関数コンテキスト -

関数内での this の値は、関数の呼び出され方によって異なります。

+関数内での `this` の値は、関数の呼び出し方によって異なります。 -

下記のコードは厳格モードではないため、また呼び出し時に this の値が設定されないため、this は既定でグローバルオブジェクトとなり、これはブラウザーでは {{domxref("Window", "window")}} です。

+下記のコードは [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)ではないため、また呼び出し時に `this` の値が設定されないため、`this` は既定でグローバルオブジェクトとなり、これはブラウザーでは {{domxref("Window", "window")}} です。 -
function f1() {
+```js
+function f1() {
   return this;
 }
 
@@ -65,29 +64,32 @@ console.log(b)         // "MDN"
 f1() === window; // true
 
 // Node 上で
-f1() === global; // true
+f1() === global; // true +``` -

ただし厳格モードでは、実行コンテキストに入るときに this 値が設定されていないと、以下の例のように undefined のままになります。

+ただし strict モードでは、実行コンテキストに入るときに `this` 値が設定されていないと、以下の例のように `undefined` のままになります。 -
function f2() {
-  'use strict'; // 厳格モードにする
+```js
+function f2() {
+  'use strict'; // strict モードにする
   return this;
 }
 
 f2() === undefined; // true
-
+``` -
二番目の例において、this が {{jsxref("undefined")}} となるのは f2 が直接呼び出されており、オブジェクトのメソッドやプロパティ (例えば window.f2()) ではないためです。この機能は初めて厳格モードへの対応が始まったとき、一部のブラウザーが実装していませんでした。その結果、これらのブラウザーは不正確に window オブジェクトを返していました。
+> **Note:** 二番目の例において、`this` が {{jsxref("undefined")}} となるのは `f2` が直接呼び出されており、オブジェクトのメソッドやプロパティ (例えば `window.f2()`) ではないためです。この機能は初めて [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)への対応が始まったとき、一部のブラウザーが実装していませんでした。結果的に、これらのブラウザーは不正確に `window` オブジェクトを返していました。 -

関数の呼び出し時に this の値を特定の値に設定するには、以下の例のように {{jsxref("Function.prototype.call()", "call()")}} または {{jsxref("Function.prototype.apply()", "apply()")}} を使用します。

+関数の呼び出し時に `this` の値を特定の値に設定するには、以下の例のように {{jsxref("Function.prototype.call()", "call()")}} または {{jsxref("Function.prototype.apply()", "apply()")}} を使用します。 -

クラスコンテキスト

+### クラスコンテキスト -

クラスは関数の機能であるため、クラスと関数の this の動作は似ています。ただし、いくつかの違いと注意点があります。

+[クラス](/ja/docs/Web/JavaScript/Reference/Classes)は関数の機能であるため、クラスと関数の `this` の動作は似ています。ただし、いくつかの違いと注意点があります。 -

クラスのコンストラクター内では、this は通常のオブジェクトです。クラス内のすべての非静的メソッドは this のプロトタイプに追加されます。

+クラスのコンストラクター内では、`this` は通常のオブジェクトです。クラス内のすべて静的でないメソッドは `this` のプロトタイプに追加されます。 -
class Example {
+```js
+class Example {
   constructor() {
     const proto = Object.getPrototypeOf(this);
     console.log(Object.getOwnPropertyNames(proto));
@@ -98,25 +100,24 @@ f2() === undefined; // true
 }
 
 new Example(); // ['constructor', 'first', 'second']
-
+``` -
-

メモ: 静的メソッドは this のプロパティではありません。それらはクラス自体のプロパティです。

-
+> **Note:** 静的メソッドは `this` のプロパティではありません。クラス自身のプロパティです。 -

派生クラス

+### 派生クラス -

基本クラスのコンストラクターとは異なり、派生コンストラクターには初期の this バインディングがありません。{{jsxref("Operators/super", "super()")}} を呼び出すとコンストラクター内に this バインディングが作成され、基本的に以下のコードを評価する効果があります。ここで、Base は継承されたクラスです。

+基本クラスのコンストラクターとは異なり、派生コンストラクターには初期の `this` の結び付けがありません。{{jsxref("Operators/super", "super()")}} を呼び出すとコンストラクター内に `this` の結び付けが作成され、基本的に以下のコードを評価する効果があります。ここで、Base は継承されたクラスです。 -
this = new Base();
+```js +this = new Base(); +``` -
-

警告: super() を呼び出す前に this を参照するとエラーが発生します。

-
+> **Warning:** `this` を `super()` の呼び出しの前に参照すると、エラーが発生します。 -

派生クラスは、オブジェクトを return するか、コンストラクターを持たない場合を除き、super() を呼び出す前に return することはできません。

+派生クラスはでは `super()` を呼び出す前に return をしてはいけません。ただし、 `Object` を返す場合やコンストラクターがない場合を除きます。 -
class Base {}
+```js
+class Base {}
 class Good extends Base {}
 class AlsoGood extends Base {
   constructor() {
@@ -129,31 +130,33 @@ class Bad extends Base {
 
 new Good();
 new AlsoGood();
-new Bad(); // 参照エラー
+new Bad(); // 参照エラー +``` -

例

+## 例 -

関数コンテキスト内の this

+### 関数コンテキスト内の this -
// オブジェクトを call や apply の最初の引数として渡すと、this がそれに結び付けられます
+```js
+// オブジェクトを call や apply の最初の引数として渡すと、this がそれに結び付けられます。
 var obj = {a: 'Custom'};
 
-// このプロパティはグローバルオブジェクトに設定されます
+// 変数を定義すると、その変数がグローバルの window のプロパティとして割り当てられます。
 var a = 'Global';
 
 function whatsThis() {
   return this.a;  // this の値は関数の呼び出し方によって変わります
-function is called
 }
 
-whatsThis();          // 関数内の this として 'Global' は設定されていないので、デフォルトではグローバル/ウィンドウオブジェクトになります。
-whatsThis.call(obj);  // 関数内の this として 'Custom' が obj に設定されています
-whatsThis.apply(obj); // 関数内の this として 'Custom' が obj に設定されています
-
+whatsThis(); // 'Global' はこの関数では関 this として設定されていないので、既定でグローバルの window オブジェクトになります +whatsThis.call(obj); // 'Custom' が関数内の this として obj に設定されています +whatsThis.apply(obj); // 'Custom' が関数内の this として obj に設定されています +``` -

this とオブジェクト変換

+### this とオブジェクト変換 -
function add(c, d) {
+```js
+function add(c, d) {
   return this.a + this.b + c + d;
 }
 
@@ -168,24 +171,26 @@ add.call(o, 5, 7); // 16
 // オブジェクトで、二番目の引数は関数呼び出しの
 // 引数として使用される配列です。
 add.apply(o, [10, 20]); // 34
-
+``` -

なお、非厳格モードにおいて、call と apply は、this として渡された値がオブジェクトではない場合、内部の ToObject 操作を利用してオブジェクトに変換しようします。7 や 'foo' のようなプリミティブが渡された場合、関連するコンストラクターを使用してオブジェクトに変換されます。たとえば、プリミティブの数値である 7 は new Number(7) であるかのようにオブジェクトに変換され、文字列の 'foo' は new String('foo') であるかのようにオブジェクトに変換されます。

+なお、 strict モードでない場合、`call` と `apply` は、`this` として渡された値がオブジェクトではないと、内部の `ToObject` 操作を利用してオブジェクトに変換しようします。`7` や `'foo'` のようなプリミティブが渡された場合、関連するコンストラクターを使用してオブジェクトに変換されます。たとえば、プリミティブの数値である `7` は `new Number(7)` であるかのようにオブジェクトに変換され、文字列の `'foo'` は `new String('foo')` であるかのようにオブジェクトに変換されます。 -
function bar() {
+```js
+function bar() {
   console.log(Object.prototype.toString.call(this));
 }
 
 bar.call(7);     // [object Number]
 bar.call('foo'); // [object String]
 bar.call(undefined); // [object global]
-
+``` -

bind メソッド

+### `bind` メソッド -

ECMAScript 5 で {{jsxref("Function.prototype.bind")}} が導入されました。f.bind(someObject) の呼び出しは、f と同じ内部とスコープを持つ新しい関数を生成し、ここが this が発生するオリジナルの関数ですが、関数がどのように使われるかにかかわらず、新しい関数では bind の最初の引数に永続的にバインドされます。

+ECMAScript 5 で {{jsxref("Function.prototype.bind()")}} が導入されました。`f.bind(someObject)` の呼び出しは、`f` と同じ内部とスコープを持つ新しい関数を生成し、ここが `this` が発生するオリジナルの関数ですが、関数がどのように使われるかにかかわらず、新しい関数では `bind` の最初の引数に永続的にバインドされます。 -
function f() {
+```js
+function f() {
   return this.a;
 }
 
@@ -197,21 +202,23 @@ console.log(h()); // azerty
 
 var o = {a: 37, f: f, g: g, h: h};
 console.log(o.a, o.f(), o.g(), o.h()); // 37,37, azerty, azerty
-
+``` -

アロー関数

+### アロー関数 -

アロー関数では、this はそれを囲むレキシカルコンテキストの this の値が設定されます。グローバルコードでは、グローバルオブジェクトが設定されます。

+[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)では、`this` はそれを囲む構文上のコンテキストの `this` の値が設定されます。グローバルコードでは、グローバルオブジェクトが設定されます。 -
var globalObject = this;
-var foo = (() => this);
-console.log(foo() === globalObject); // true
+```js +var globalObject = this; +var foo = (() => this); +console.log(foo() === globalObject); // true +``` -
-

メモ: アロー関数の呼び出し時に this 引数が call, bind, apply に渡されても無視されます。呼び出しに引数を加えることはできますが、最初の引数 (thisArg) は null を設定してください

-
+> **Note:** アロー関数の呼び出し時に `this` 引数が `call`, `bind`, `apply` に渡されても無視されます。呼び出しに引数を加えることはできますが、最初の引数 (`thisArg`) は `null` を設定してください。 -
// オブジェクトのメソッドとして呼び出す。
+
+```js
+// オブジェクトのメソッドとして呼び出す。
 var obj = {func: foo};
 console.log(obj.func() === globalObject); // true
 
@@ -220,11 +227,13 @@ console.log(foo.call(obj) === globalObject); // true
 
 // bind を使用して this の設定を試みる
 foo = foo.bind(obj);
-console.log(foo() === globalObject); // true
+console.log(foo() === globalObject); // true +``` -

何があっても、foo の this は生成されたときの値が設定されています (上記の例ではグローバルオブジェクトです)。同様のことが、ほかの関数内で生成したアロー関数にも適用されます。それらの this には、それを包含するレキシカルコンテキストのものになります。

+何があっても、`foo` の `this` は生成されたときの値が設定されています (上記の例ではグローバルオブジェクトです)。同様のことが、ほかの関数内で生成したアロー関数にも適用されます。それらの `this` には、それを包含する構文上のコンテキストのものになります。 -
// this を返す関数を返す bar メソッドを持つ
+```js
+// this を返す関数を返す bar メソッドを持つ
 // obj を生成します。返された関数はアロー関数
 // として生成されているため、その this は
 // それを包含する関数の this に永続的に拘束
@@ -232,7 +241,7 @@ console.log(foo() === globalObject); // true
// 返値の関数の値に順に設定します。 var obj = { bar: function() { - var x = (() => this); + var x = (() => this); return x; } }; @@ -241,7 +250,7 @@ var obj = { // 返値の関数への参照を fn に割り当てます。 var fn = obj.bar(); -// 厳格モードでは、this を設定せずに fn を呼び出すと +// strict モードでは、this を設定せずに fn を呼び出すと // 通常はグローバルオブジェクトか undefined が既定値となります。 console.log(fn() === obj); // true @@ -250,17 +259,18 @@ var fn2 = obj.bar; // するとアロー関数の呼び出しで this は bar の // this に従うため window と同じになります。 console.log(fn2()() == window); // true - +``` -

上記では、関数 (この無名関数を A と呼びます) に obj.bar が返すアロー関数として生成されたほかの関数 (この無名関数を B と呼びます) を割り当てています。結果として、呼び出されたときに関数 B の this は、永続的に obj.bar (関数 A) の this が設定されます。返された関数 (関数 B) が呼びされるとき、その this は常に最初に設定されたものになります。上記のコード例では、関数 B の this は obj である関数 A の this が設定されているため、通常はその this に undefined かグローバルオブジェクト (または、以前の例のグローバルコンテキストのように、いずれかのメソッド) が設定されますが、obj の設定が残ります。

+上記では、関数 (この無名関数を A と呼びます) に `obj.bar` が返すアロー関数として生成されたほかの関数 (この無名関数を B と呼びます) を割り当てています。結果として、呼び出されたときに関数 B の `this` は、永続的に `obj.bar` (関数 A) の `this` が設定されます。返された関数 (関数 B) が呼びされるとき、その `this` は常に最初に設定されたものになります。上記のコード例では、関数 B の `this` は `obj` である関数 A の `this` が設定されているため、通常はその `this` に `undefined` かグローバルオブジェクト (または、以前の例のグローバルコンテキストのように、いずれかのメソッド) が設定されますが、`obj` の設定が残ります。 -

オブジェクトのメソッドとして

+### オブジェクトのメソッドとして -

関数がオブジェクトのメソッドとして呼び出されるとき、その this にはメソッドが呼び出されたオブジェクトが設定されます。

+関数がオブジェクトのメソッドとして呼び出されるとき、その `this` にはメソッドが呼び出されたオブジェクトが設定されます。 -

次の例では、o.f() が起動したとき、関数内の this には、o オブジェクトが関連付けられます。

+次の例では、`o.f()` が起動したとき、関数内の `this` には、`o` オブジェクトが関連付けられます。 -
var o = {
+```js
+var o = {
   prop: 37,
   f: function() {
     return this.prop;
@@ -268,11 +278,12 @@ console.log(fn2()() == window); // true
 };
 
 console.log(o.f()); // 37
-
+``` -

この振る舞いは、関数定義の方法や場所に全く影響を受けないことに注意してください。前述の例では、o の定義中に f メンバーとして関数をインラインに定義しています。しかし、関数を最初に定義して、後から o.f に付け足すことができます。その結果は同じ振る舞いになります。

+この動作は、関数定義の方法や場所に全く影響を受けないことに注意してください。前述の例では、`o` の定義中に `f` メンバーとして関数をインラインに定義しています。しかし、関数を最初に定義して、後から `o.f` に付け足すことができます。その結果は同じ動作になります。 -
var o = {prop: 37};
+```js
+var o = {prop: 37};
 
 function independent() {
   return this.prop;
@@ -281,35 +292,38 @@ function independent() {
 o.f = independent;
 
 console.log(o.f()); // 37
-
+``` -

これは、関数が o の f のメンバーとして呼び出されることだけが重要なことを示しています。

+これは、関数が `o` の `f` のメンバーとして呼び出されることだけが重要なことを示しています。 -

同様に、this の関連付けは、最も直近のメンバー参照にのみ影響を受けます。次の例では、関数が呼び出すとき、オブジェクト o.b の g メソッドとして呼び出しています。実行時に、関数内の this は o.b を参照します。オブジェクト自体が o のメンバーであるという事実は何の意味もありません。最も直近の参照のみが重要なのです。

+同様に、`this` の関連付けは、最も直近のメンバー参照にのみ影響を受けます。次の例では、関数が呼び出すとき、オブジェクト `o.b` の `g` メソッドとして呼び出しています。実行時に、関数内の `this` は `o.b` を参照します。オブジェクト自体が `o` のメンバーであるという事実は何の意味もありません。最も直近の参照のみが重要なのです。 -
o.b = {g: independent, prop: 42};
+```js
+o.b = {g: independent, prop: 42};
 console.log(o.b.g()); // 42
-
+``` -

オブジェクトのプロトタイプチェーン上の this

+#### オブジェクトのプロトタイプチェーン上の `this` -

同じ概念が、オブジェクトのプロトタイプチェーンのどこかに定義されたメソッドにも当てはまります。メソッドがオブジェクトのプロトタイプチェーン上にあった場合、メソッドがオブジェクト上にあるかのように、this はメソッドを呼び出したオブジェクトを参照します。

+同じ概念が、オブジェクトのプロトタイプチェーンのどこかに定義されたメソッドにも当てはまります。メソッドがオブジェクトのプロトタイプチェーン上にあった場合、メソッドがオブジェクト上にあるかのように、`this` はメソッドを呼び出したオブジェクトを参照します。 -
var o = {f: function() { return this.a + this.b; }};
+```js
+var o = {f: function() { return this.a + this.b; }};
 var p = Object.create(o);
 p.a = 1;
 p.b = 4;
 
 console.log(p.f()); // 5
-
+``` -

この例では、変数 p に割り当てられたオブジェクト自身は f プロパティを持たず、プロトタイプから継承しています。しかし、f に対する検索が、最終的に o でその名前を持つメンバーを見つけることは重要ではありません。検索は p.f への参照から開始されるため、関数内の this は p として参照されるオブジェクトの値を取ります。f は p のメソッドとして呼ばれたため、その this は p を参照します。これは、JavaScript のプロトタイプ継承の興味深い機能です。

+この例では、変数 `p` に割り当てられたオブジェクト自身は `f` プロパティを持たず、プロトタイプから継承しています。しかし、`f` に対する検索が、最終的に `o` でその名前を持つメンバーを見つけることは重要ではありません。検索は `p.f` への参照から開始されるため、関数内の `this` は `p` として参照されるオブジェクトの値を取ります。`f` は `p` のメソッドとして呼ばれたため、その `this` は `p` を参照します。これは、JavaScript のプロトタイプ継承の興味深い機能です。 -

ゲッター/セッターと this

+#### ゲッター/セッターと `this` -

再度、同じ概念が、ゲッターやセッターから呼ばれる関数にも当てはまります。ゲッターやセッターとして使用される関数は、このプロパティを設定するか、または得られている元のオブジェクトに関連付けられている this を持ちます。

+再度、同じ概念が、ゲッターやセッターから呼ばれる関数にも当てはまります。ゲッターやセッターとして使用される関数は、このプロパティを設定するか、または得られている元のオブジェクトに関連付けられている `this` を持ちます。 -
function sum() {
+```js
+function sum() {
   return this.a + this.b + this.c;
 }
 
@@ -326,32 +340,30 @@ Object.defineProperty(o, 'sum', {
     get: sum, enumerable: true, configurable: true});
 
 console.log(o.average, o.sum); // 2, 6
-
+``` -

コンストラクターとして

+### コンストラクターとして -

関数がコンストラクターとして ({{jsxref("Operators/new", "new")}} キーワードとともに) 使用されたとき、その this は生成された新しいオブジェクトに関連付けられます。

+関数がコンストラクターとして ({{jsxref("Operators/new", "new")}} キーワードとともに) 使用されたとき、その `this` は生成された新しいオブジェクトに関連付けられます。 -
-

コンストラクターの既定では、this で参照されるオブジェクトを返しますが、代わりにほかのオブジェクトを返すことができます (返値がオブジェクトではない場合、this オブジェクトが返されます)。

-
+> **Note:** コンストラクターの既定では、`this` で参照されるオブジェクトを返しますが、代わりにほかのオブジェクトを返すことができます (返値がオブジェクトではない場合、`this` オブジェクトが返されます)。 -
/*
- * Constructors work like this:
+```js
+/*
+ * コンストラクターは下記のように動作します。
  *
  * function MyConstructor(){
- *   // Actual function body code goes here.
- *   // Create properties on |this| as
- *   // desired by assigning to them.  E.g.,
+ *   // 実際の関数本体のコードはこちらになります。
+ *   // プロパティに代入することで、 |this| に必要な
+ *   // プロパティを作成します。例えば、
  *   this.fum = "nom";
- *   // et cetera...
+ *   // など...
  *
- *   // If the function has a return statement that
- *   // returns an object, that object will be the
- *   // result of the |new| expression.  Otherwise,
- *   // the result of the expression is the object
- *   // currently bound to |this|
- *   // (i.e., the common case most usually seen).
+ *   // 関数にオブジェクトを返す return 文があれば、
+ *   // そのオブジェクトが |new| 式の結果になります。
+ *   // そうでなければ、式の結果は現在 |this| に
+ *   // バインドされているオブジェクトになります
+ *   // (つまり、最もよく見られる一般的なケースです)。
  * }
  */
 
@@ -362,7 +374,6 @@ function C() {
 var o = new C();
 console.log(o.a); // 37
 
-
 function C2() {
   this.a = 37;
   return {a: 38};
@@ -370,15 +381,16 @@ function C2() {
 
 o = new C2();
 console.log(o.a); // 38
-
+``` -

最後の例 (C2) では、構築中にオブジェクトを返しているので、this が結び付けられている新しいオブジェクトは単に破棄されています。(これは根本的に "this.a = 37;" ステートメントを死んだコードにしてしまっています。これは実行されるので、正確には死んだコードではありませんが、外部への影響がありません。)

+最後の例 (`C2`) では、構築中にオブジェクトを返しているので、`this` が結び付けられている新しいオブジェクトは単に破棄されています。(これは根本的に "`this.a = 37;`" 文を死んだコードにしてしまっています。これは実行されるので、正確には死んだコードではありませんが、外部への影響がありません。) -

DOM イベントハンドラーとして

+### DOM イベントハンドラーとして -

関数がイベントハンドラとして使用された場合、その this はリスナーが配置されている要素に設定されます ({{domxref("EventTarget/addEventListener", "addEventListener()")}} 以外のメソッドで動的に追加されたリスナーについては、この規約に従わないブラウザー－もあります)。

+関数がイベントハンドラとして使用された場合、その `this` はリスナーが配置されている要素に設定されます ({{domxref("EventTarget/addEventListener", "addEventListener()")}} 以外のメソッドで動的に追加されたリスナーについては、この規約に従わないブラウザーもあります)。 -
// リスナーとして呼び出された場合は、関連づけられた要素を青にする
+```js
+// リスナーとして呼び出された場合は、関連づけられた要素を青にする
 function bluify(e) {
   // 常に true
   console.log(this === e.currentTarget);
@@ -392,35 +404,37 @@ var elements = document.getElementsByTagName('*');
 
 // クリックリスナーとして bluify を追加することで、
 // 要素をクリックすると青くなるようになる
-for(var i = 0 ; i < elements.length; i++){
+for (var i = 0; i < elements.length; i++) {
   elements[i].addEventListener('click', bluify, false);
-}
+} +``` -

インラインイベントハンドラー内

+### インラインイベントハンドラー内 -

コードがインラインの on-イベントハンドラーから呼び出されたとき、その this にはリスナーが配置されている DOM 要素が設定されます。

+コードがインラインの [on-イベントハンドラー](/ja/docs/Web/Events/Event_handlers)から呼び出されたとき、その `this` にはリスナーが配置されている DOM 要素が設定されます。 -
<button onclick="alert(this.tagName.toLowerCase());">
+```html
+
+ +``` -

上記のアラートは button と表示します。ただし、外側のコードがこのように設定された this を持っているだけだということに注意してください。

+上記のアラートは `button` と表示します。ただし、外側のコードがこのように設定された `this` を持っているだけだということに注意してください。 -
<button onclick="alert((function() { return this; })());">
+```html
+
+ +``` -

この場合、内側の関数の this は設定されていないので、グローバルの window オブジェクトを返します (つまり、this が呼び出しによって設定されていないので、非厳格モードの既定オブジェクトです)。

+この場合、内側の関数の `this` は設定されていないので、グローバルの window オブジェクトを返します (つまり、`this` が呼び出しによって設定されていないので、非 strict モードの既定オブジェクトです)。 -

クラスの中の this

+### クラス内の this -
+通常の関数と同様に、メソッド内の `this` の値は、どのように呼び出されるかによって異なります。クラス内の `this` が常にクラスのインスタンスを参照するように、この動作をオーバーライドしておくと便利な場合もあります。これを実現するには、コンストラクターでクラスのメソッドをバインドします。 -

通常の関数と同様に、メソッド内の this の値は、どのように呼び出されるかによって異なります。クラス内の this が常にクラスのインスタンスを参照するように、この動作をオーバーライドしておくと便利な場合もあります。これを実現するには、コンストラクターでクラスのメソッドをバインドします。

- -
class Car {
+```js
+class Car {
   constructor() {
     // 違いを示すために sayHi ではなく sayBye をバインドする
     this.sayBye = this.sayBye.bind(this);
@@ -452,35 +466,22 @@ bird.sayHi(); // Hello from Tweety
 
 // バインドされたメソッドの場合、'this' は呼び出し元に依存しません
 bird.sayBye = car.sayBye;
-bird.sayBye();  // Bye from Ferrari
- -
-

メモ: クラスは常に厳格モードのコードです。これを定義せずに this でメソッドを呼び出すとエラーが発生します。

-
- -

仕様

- - - - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#sec-this-keyword', 'The this keyword')}}
- -

ブラウザーの互換性

- -

{{Compat("javascript.operators.this")}}

- -

関連情報

- - +bird.sayBye(); // Bye from Ferrari +``` + +> **Note:** クラスは常に strict モードのコードです。これを定義せずに `this` でメソッドを呼び出すとエラーが発生します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode) +- [Gentle + explanation of 'this' keyword in JavaScript](https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/) +- グローバルコンテキストの取得: {{jsxref("globalThis")}} -- cgit v1.2.3-54-g00ecf