JavaScript の「this」の説明-jsチュートリアル-php.cn

JavaScript の「this」の説明

DDD

リリース： 2024-12-25 14:35:18

オリジナル

397 人が閲覧しました

`this` in JavaScript Explained

これは、フロントエンドのインタビューの質問シリーズの質問 #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'

ログイン後にコピー