JavaScript - this キーワード

こんにちは、JavaScriptの志望者たち！今日は、thisキーワードの世界への興味深い旅に出発しましょう。あなたの近所の親切なコンピュータサイエンスの先生として、この時々難しいけれども常に魅力的な概念をガイドします。お気に入りの飲み物を手に取り、リラックスして、一緒に潜りましょう！

'this'キーワードとは？

パーティーで誰かが叫ぶ、「Hey, you!」誰が振り返ると思いますか？みんな、でしょう？でももし彼らが「Hey, Sarah!」と言ったら、サラだけが返事するでしょう。JavaScriptでは、thisキーワードは「Hey, you!」と的对象に言うのと同じです。現在のオブジェクトに参照する方法です。

thisキーワードは、すべての関数のスコープ内で自動的に定義される特別な識別子です。しかし、ここに落とし穴があります。その値は、関数がどのように呼ばれるかによって決まります。このthisの動的性質が、それを強力で時々混乱させるものにしています。

'this'はどのオブジェクトを参照する？

さて、ここで興味深い部分に入ります。thisが参照するオブジェクトは、どのようにそしてどこで使用されるかによって変わる可能性があります。まるでカメレオンのように、周囲の環境に基づいて色を変えるのです。以下のシナリオを見てみましょう。

文法

深く掘り下げる前に、thisの使い方を簡単に見てみましょう：

console.log(this);

シンプルですね？しかし、そのシンプリシティーに騙されないでください。異なるコンテキストで使用すると、魔法（または問題）が起きます。

JavaScript 'this' in the Global Scope

グローバルスコープ（いかなる関数の外側）で使用された場合、thisはグローバルオブジェクトを参照します。ブラウザでは、通常はwindowオブジェクトです。

console.log(this === window); // true

this.myGlobalVar = "I'm global!";
console.log(window.myGlobalVar); // "I'm global!"

ここで、thisはパーティー全体（グローバルスコープ）にアクセスするVIPパスのように機能します。

JavaScript 'this' in a Function

通常の関数内でthisを使用する場合、その値は関数がどのように呼ばれるかによって異なります。

function showThis() {
console.log(this);
}

showThis(); // window (非厳格モード)

この場合、thisは迷子の犬のように、周囲のものにくっつきます - 非厳格モードではグローバルオブジェクトです。

'this' in a Function in Strict Mode

厳格モードは、何も逃さない厳しい先生のようです。厳格モードでは、関数内のthisは明示的に設定されない限りundefinedです。

"use strict";
function strictThis() {
console.log(this);
}

strictThis(); // undefined

'this' in a Constructor Function

関数がコンストラクタ（newキーワード）として使用される場合、thisは新しく作成されたオブジェクトを参照します。

function Person(name) {
this.name = name;
this.greet = function() {
console.log("Hello, I'm " + this.name);
};
}

const john = new Person("John");
john.greet(); // "Hello, I'm John"

ここで、thisは新しく生まれたオブジェクトの身分を確立する出生証明書のようです。

'this' in an Arrow Function

アロー関数はJavaScriptの世界の反逆者です。彼らは自分のthisを束縛せず、囲みスコープから引き継ぎます。

const obj = {
name: "Alice",
sayHello: () => {
console.log("Hello, " + this.name);
}
};

obj.sayHello(); // "Hello, undefined"

この場合、アロー関数内のthisはobjを参照せず、周囲のスコープ（おそらくグローバルスコープ）を参照します。

'this' in the Object Method

オブジェクトのメソッド（オブジェクトのプロパティとしての関数）でthisを使用する場合、それはメソッドが呼ばれたオブジェクトを参照します。

const car = {
brand: "Toyota",
getBrand: function() {
return this.brand;
}
};

console.log(car.getBrand()); // "Toyota"

ここで、thisは忠実な執事のように、常に主人（オブジェクト）を参照します。

'this' in a Child Function of an Object Method

これはやや難しい部分です。オブジェクトのメソッド内の関数では、thisはもはやオブジェクトを参照しません。

const restaurant = {
name: "Tasty Treats",
getMenu: function() {
function displayName() {
console.log(this.name);
}
displayName();
}
};

restaurant.getMenu(); // undefined

この場合、displayName()内のthisはグローバルオブジェクトを参照します。

JavaScript 'this' in Event Handlers

イベントハンドラ内では、thisは通常、イベントを受け取った要素を参照します。

<button id="myButton">Click me!</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
console.log(this); // <button id="myButton">Click me!</button>
});
</script>

ここで、thisはスターの spotlight 一样に、クリックされた要素に焦点を当てます。

Explicit Function Binding in JavaScript

時々、私たちはthisに exactに何をすべきか指示したい場合があります。それにはcall()、apply()、またはbind()を使用します。

const person1 = { name: "Alice" };
const person2 = { name: "Bob" };

function sayHello() {
console.log("Hello, " + this.name);
}

sayHello.call(person1); // "Hello, Alice"
sayHello.apply(person2); // "Hello, Bob"

const boundHello = sayHello.bind(person1);
boundHello(); // "Hello, Alice"

これらのメソッドは、thisにどの役割を演じるべきか指示するディレクターのようです。

JavaScript 'this' Precedence

さて、thisの束縛の優先順位をまとめましょう：

ルール	優先順位
newキーワード	1 (最も高い)
明示的な束縛 (call、apply、bind)	2
メソッド呼び出し	3
関数呼び出し	4 (最も低い)

アロー関数は特別で、常に囲みスコープからthisを引き継ぎます。

そして、皆さん！thisの世界への旅を終えました。thisの理解は自転車に乗るのと同じで、最初は不安定かもしれませんが、練習を続ければすぐにスムーズに走ることができます。codingを続け、探索を続け、最も重要なのは、JavaScriptでの楽しさを享受してください！

Credits: Image by storyset