JavaScript の this キーワードを理解する

JavaScript の this キーワード

this キーワードは、JavaScript の最も強力な機能の 1 つですが、誤解されています。これは関数が実行されるコンテキストを指し、関数の呼び出し方法によって異なります。

1.これは何ですか?

この値は、実行コンテキスト、つまり関数が実行される環境によって決まります。通常、これはオブジェクトを指しますが、その正確な値は、関数がどこでどのように呼び出されるかによって異なります。

2.仕組み

A.グローバルコンテキスト

グローバル実行コンテキスト (関数の外側) では、これはグローバル オブジェクトを指します:

• ブラウザの場合: ウィンドウ
• Node.js の場合: グローバル

例:

console.log(this); 
// In a browser: window
// In Node.js: global

B.通常の関数内

関数がグローバル スコープで呼び出される場合、これはデフォルトでグローバル オブジェクトになります (非厳密モード)。厳密モードでは、これは未定義です。

例:

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

showThis(); 
// Non-strict mode: window (global object)
// Strict mode: undefined

C.オブジェクトメソッド内

関数がオブジェクトのメソッドとして呼び出される場合、これはオブジェクト自体を参照します。

例:

const obj = {
  name: "JavaScript",
  getName: function () {
    console.log(this.name);
  },
};

obj.getName(); // Output: JavaScript

D.コンストラクター関数の内部

コンストラクター関数では、これは新しく作成されたオブジェクトを参照します。

例:

function Person(name) {
  this.name = name;
}

const john = new Person("John");
console.log(john.name); // Output: John

E.アロー関数内

アロー関数には独自の this がありません。代わりに、周囲の語彙スコープからこれを継承します。

例:

const obj = {
  name: "JavaScript",
  getName: function () {
    const arrowFunc = () => console.log(this.name);
    arrowFunc();
  },
};

obj.getName(); // Output: JavaScript

3.これをバインドします

呼び出し、適用、またはバインドを使用して、この値を明示的に設定できます。

A.通話を使用する

特定の this 値と個別に指定された引数を使用して関数を呼び出します。

例:

function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

const user = { name: "Alice" };
greet.call(user, "Hello"); // Output: Hello, Alice

B. apply を使用する

呼び出しと同じように動作しますが、引数を配列として受け取ります。

例:

greet.apply(user, ["Hi"]); // Output: Hi, Alice

C.バインドの使用

指定されたオブジェクトに永続的に設定された新しい関数を返します。

例:

const boundGreet = greet.bind(user);
boundGreet("Hey"); // Output: Hey, Alice

4.このの一般的な使用例

A.イベントハンドラ

イベント リスナーでは、イベントをトリガーした要素を指します。

例:

console.log(this); 
// In a browser: window
// In Node.js: global

B.動的オブジェクトメソッド

これにより、オブジェクトがメソッドを動的に共有できるようになります。

例:

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

showThis(); 
// Non-strict mode: window (global object)
// Strict mode: undefined

C.クラスメソッド

クラスでは、これは現在のインスタンスを指します。

例:

const obj = {
  name: "JavaScript",
  getName: function () {
    console.log(this.name);
  },
};

obj.getName(); // Output: JavaScript

5.よくある落とし穴とベストプラクティス

A.コンテキストを失う

メソッドが変数に割り当てられると、元のコンテキストが失われる可能性があります。

例:

function Person(name) {
  this.name = name;
}

const john = new Person("John");
console.log(john.name); // Output: John

解決策: バインド関数またはアロー関数を使用します。

const obj = {
  name: "JavaScript",
  getName: function () {
    const arrowFunc = () => console.log(this.name);
    arrowFunc();
  },
};

obj.getName(); // Output: JavaScript

B.コールバック関数内

コールバック内の this はコンテキストを失うことがよくあります。

例:

function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

const user = { name: "Alice" };
greet.call(user, "Hello"); // Output: Hello, Alice

解決策: アロー関数を使用します。

greet.apply(user, ["Hi"]); // Output: Hi, Alice

6.概要

• これは関数の実行コンテキストを指します。
• アロー関数では、これは字句スコープから継承されます。
• 呼び出し、適用、またはバインドを使用して、この値を明示的に設定します。
• コードのバグを避けるために、これがさまざまなコンテキストでどのように動作するかを理解します。

これをマスターすると、JavaScript の動作をより深く理解できるようになり、よりクリーンで予測可能なコードを作成できるようになります。

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がJavaScript の this キーワードを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。