JavaScriptにおけるこのポインティング問題の詳細な説明

序文

信じてください。この記事の 7️⃣ ステップを覚えておけば、JS の this リファレンスを完全にマスターできます。

まず、式を暗唱します: 矢印関数、新規、バインド、適用して呼び出し、オブジェクト、直接呼び出し、関数内ではありません。

式の順序に従って、前のシナリオのいずれかが満たされている限り、これがどこを指しているかを判断できます。

では、数式の順番に詳しく説明していきます。記事内のサンプルコードはすべてChromeコンソールで実行されています。

記事の最後には、学習成果をテストするための練習問題が用意されています。ぜひ試してみてください。

1. 矢印関数

矢印関数は、this が変更されないため最初にランク付けされます。したがって、現在の関数が矢印関数である限り、他のルールを確認する必要はありません。

矢印関数の this は、作成されたときの外側の this への参照です。ここで重要なポイントが 2 つあります。

矢印関数が作成されると、その this ポインターが決定されます。
矢印関数内の this は外側の this を参照します。

したがって、矢印関数の this を知るには、まず外側の this の方向を知る必要があり、外側の層で 7 段階の式を継続的に適用する必要があります。

2. 新しい

new キーワードを使用して関数が呼び出される場合、関数内の this は JS によって作成された新しいオブジェクトである必要があります。

読者は、「矢印関数が new キーワードを使用して呼び出された場合、矢印関数の this は変更されるのだろうか?」と疑問に思うかもしれません。

コンソールで試してみましょう。

関数 = () => {}
new func() // エラーをスローする

コンソールからわかるように、矢印関数はコンストラクターとして使用できないため、new で実行することはできません。

3. バインドする

bind は Function.prototype.bind() を参照します。

複数回バインドする場合、最初のバインドの値のみが認識されます

エラーが発生しやすいポイント

関数func() {
  console.log(これ)
}

関数bind(1).bind(2)() // 1

これは矢印関数では変更されません

バインドして新規

エラーが発生しやすいポイント

関数func() {
  console.log(this, this.__proto__ === func.prototype)
}

バインド関数 = func.bind(1)
new boundFunc() // オブジェクトが true の場合、式 2 が優先されます

4. 申し込んで電話する

apply() と call() の最初のパラメータは次のとおりです。違いは、apply を呼び出す場合、実際のパラメータが配列に配置され、call を呼び出す場合、実際のパラメータがコンマで区切られることです。

これは矢印関数では変更されません

エラーが発生しやすいポイント

関数 = () => {
  // ここで this は外側の this を指しており、式 7 の「関数内ではない」を参照してください。
  console.log(これ)
}

func.apply(1) // ウィンドウ、式1が優先される

これはバインド関数では変更されません

エラーが発生しやすいポイント

関数func() {
  console.log(これ)
}

バインド関数 = func.bind(1)
boundFunc.apply(2) // 1、式3が優先される

5. 帯点（オブジェ）

関数func() {
  コンソールログ(this.x)
}

オブジェクト = { x: 1 }
obj.func = 関数
obj.func() // 1

ここで、矢印関数とバインド関数の優先度が高いことを示すためにコードを使用する必要はありません。興味がある場合は、自分で試してみてください。

6. 直接通話

関数が前のシナリオを満たさず、直接呼び出される場合、これはグローバルオブジェクトを指します。ブラウザ環境ではグローバルオブジェクトはWindowであり、Node.js環境ではGlobalです。

簡単な例から始めましょう。

関数func() {
  console.log(これ)
}

func() // ウィンドウ

外側の層の outerFunc が紛らわしい目的を果たす複雑な例を見てみましょう。

関数outerFunc() {
  console.log(これ) // { x: 1 }

  関数func() {
    console.log(this) // ウィンドウ
  }

  関数()
}

外側の関数をバインドします({ x: 1 })()

7. 関数内ではない

関数に含まれないシナリオは、ブラウザの <script /> タグまたは Node.js モジュールファイルに分割できます。

<script /> タグでは、これは Window を参照します。
Node.js モジュールファイルでは、これはモジュールのデフォルトのエクスポートオブジェクト (module.exports) を参照します。

非厳密モード

厳密モードは ES5 で導入されました。 ES5 仕様より前、つまり非厳密モードでは、これを undefined または null にすることはできません。したがって、**非厳密モードでは、上記の 7 つの手順を経て、 this が undefined または null を指していると判断された場合、 this はグローバルオブジェクトを指します。 **ブラウザ環境ではグローバルオブジェクトはWindow、Node.js環境ではGlobalです。

たとえば、次のコードでは、非厳密モードでは、これはグローバルオブジェクトを参照します。

関数a() {
  console.log("関数 a:", this)
  ;(() => {
    console.log("矢印関数: ", this)
  })()
}

（）

a.bind(null)()

a.bind(未定義)()

a.bind().bind(2)()

適用()

非厳密モードでの実行結果は次のとおりです。

厳密モードでは、比較のために同じコードを実行します。厳密モードで実行するには、すべてのコードを一度にコンソールにコピーして貼り付けることを忘れないでください (最初の行の「use strict」が次のコードに適用されるため)。

「厳密な使用」

関数a() {
  console.log("関数 a:", this)
  ;(() => {
    console.log("矢印関数: ", this)
  })()
}

（）

a.bind(null)()

a.bind(未定義)()

a.bind().bind(2)()

適用()

厳密モードで実行した結果は次のようになります。

7 ステップの式は、厳密モードと非厳密モードの両方で完了しますが、非厳密モードでは null または undefined がグローバルオブジェクトに変換される点が異なります。そのため、これをヒントに含めませんでした。

復習問題

まず式を暗唱し、次に「矢印関数、新規、バインド、適用して呼び出す、オブジェクト、直接呼び出し、関数内ではない」という質問をします。

1. 次のコードを実行した後、func.count の値は何ですか?

関数 func(num) {
  this.count++
}

関数カウント = 0
関数(1)

答え

func.count は 0 です。

式によれば、func() が呼び出される場合は、6 番目のカテゴリ「直接呼び出し」に属します。非厳密モードでは、これはグローバルオブジェクトを参照します。これは func とは関係がないので、func.count は変更されません。とても簡単です。

2. 次の矢印関数は誰を指していますか?

オブジェクト = {
  関数() {
    const arrowFunc = () => {
      コンソールログ(this._name)
    }

    戻り矢印関数
  },

  _name: "オブジェクト",
}

obj.func()()

関数 = obj.func
関数()()

obj.func.bind({ _name: "newObj" })()()

obj.func.bind()()()

obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })()

答え

// オブジェクト
// 未定義
//新しいオブジェクト
// 未定義
// バインドオブジェクト

とても簡単ですよね？習得を諦めていませんか？

要約する

これで、JavaScript の this ポイントの問題に関するこの記事は終わりです。js の this ポイントに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: