JavaScript の「this」の説明

これは、フロントエンドのインタビューの質問シリーズの質問 #5 です。準備をレベルアップしたい場合、または常に最新情報を入手したい場合は、Frontend Camp へのサインアップを検討してください。

---

this キーワードは常に、関数またはスクリプトの現在のコンテキストを参照します。

これは私たちのほとんどにとって混乱を招くトピックです (冗談です) が、そうである必要はありません。必要なのは、いくつかのルールを覚えておくことだけです。

次のルールは優先順位に従って、実行時に this の値がどのように決定されるかを決定します。

関数コンストラクターでの使用法

関数が new キーワードで呼び出された場合、関数内の this は新しく作成されたオブジェクト インスタンスを参照します。

function Book(title) {
  console.log(this);
  this.title = title;
  console.log(this);
}

const book1 = new Book('Jungle Book');

// {}
// { title: "'Jungle Book' }"

console.log(book1.name); // 'Jungle Book'

これを明示的にバインドする

call()、apply()、bind() を使用すると、関数内で this の値を明示的に設定できます。

• call() と apply() は、関数をすぐに呼び出す必要がある場合に使用されます。
• bind() は、後で使用する新しい関数を返します。

const obj = { name: 'Ben' };

function sayHello() {
  console.log(`Hello, ${this.name}!`);
}

const sayHelloToBen = sayHello.bind(obj);

sayHelloToBen(); // Hello, Ben!
sayHello.call(obj); // Hello, Ben!
sayHello.apply(obj); // Hello, Ben!

メソッド呼び出しでの使用法

関数がオブジェクトのメソッドである場合、これはオブジェクトを参照します。

const person = {
  name: 'Ben',
  logThis: function() {
    console.log(this);
  }
}

person.logThis(); // { name: 'Ben', logThis: fn() }

通常の関数呼び出しでの使用法（フリー関数呼び出し）

関数がグローバル コンテキストで呼び出された場合、これはグローバル オブジェクト (非厳密モードの場合) または未定義 (厳密モードの場合) を参照します。

ブラウザの場合、グローバル オブジェクトは window です。

// Browser

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

showThis(); // Window { open: fn, alert: fn, ... }

関数がグローバル コンテキストで宣言されると、その関数は window オブジェクトのプロパティになります。 window.showThis() を呼び出しても同じ結果が得られます。これが、暗黙的なメソッド呼び出しである理由です。 (この上のルールを参照してください)

複数のルールが適用される場合は、優先順位の高いルールが適用されます。

const obj1 = {
    value: 1,
    showThis: function() {
        console.log(this);
    },
};

const obj2 = { value: 2 };

obj1.showThis.call(obj2); // { value: 2 }

上記の例では、メソッド呼び出しと明示的バインディングという 2 つのルールが適用されています。明示的なバインディングの方が優先されるため、this の値を設定することになります。

アロー関数

アロー関数は、独自の this 値を持たないため、上記のルールに従いません。 親スコープから this 値を選択します。

const person = {
  name: 'Ben',
  showThis: () => {
    console.log(this);
  },
  showThisWrapped: function() {
    const arrowFn = () => console.log(this);
    arrowFn();
  }
}

person.showThis(); // Window { open: fn, alert: fn, ... }
person.showThisWrapped(); // { name: 'Ben', showThis: fn, showThisWrapped: fn }

これが、イベント リスナーにアロー関数の使用を避けるべき理由です。イベント リスナーは HTML 要素を this 値にバインドしますが、ハンドラーがアロー関数の場合はそれができません。

function Book(title) {
  console.log(this);
  this.title = title;
  console.log(this);
}

const book1 = new Book('Jungle Book');

// {}
// { title: "'Jungle Book' }"

console.log(book1.name); // 'Jungle Book'

---

まとめ

1. 関数コンストラクター (new Person()) では、これは新しく作成されたオブジェクト インスタンスになります。
2. bind()、call()、または apply() を使用して明示的にバインドされている場合、関数内のこれは指定された値に設定されます。
3. メソッド内では、これはそのメソッドがプロパティであるオブジェクトに設定されます。
4. 自由関数呼び出し内では、これはグローバル オブジェクト (非厳密モード) または未定義 (厳密モード) を指します。
5. 複数のルールが適用される場合は、最初に記載されているルール (1 ～ 4) が適用されます。
6. アロー関数には独自の this がありません。その値は親スコープから選択されます。

---

今読んだ内容は気に入りましたか?フロントエンド キャンプの待機リストへの参加を検討してください ✌️

以上がJavaScript の「this」の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。