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

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

序文

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

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

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

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

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

1. 矢印関数

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

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

  1. 矢印関数が作成されると、その this ポインターが決定されます。
  2. 矢印関数内の 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 モジュール ファイルに分割できます。

  1. <script /> タグでは、これは Window を参照します。
  2. 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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JSの矢印関数におけるこのポイントの詳細な説明
  • JavaScriptの原理と方向性
  • JS にこれがあるのはなぜですか?
  • このリファレンスとJavaScriptのカスタムプロパティの詳細な説明
  • JavaScript における this ポイントの問題の詳細な説明
  • 関数の分類の詳細な説明とJavascriptでのこのポイントの例
  • JavaScript関数におけるこのポイントの問題の詳細な説明
  • JavaScriptの詳細な分析と方向の変更方法

<<:  データベース接続プール Druid の使用手順

>>:  https ウェブサイトを展開し、Nginx でアドレス書き換えを構成するための詳細な手順

推薦する

DockerでPython環境をパッケージ化するプロセスの詳細な説明

docker パッケージング Python 環境の手順は次のとおりです。 1 pip listの下に...

Xtrabackup を使用した MySQL バックアップ プロセスの詳細な説明

目次01 背景02 はじめに03 ワークフロー04 いくつかの質問05 ファイルをバックアップする0...

CSSはカラフルでスマートな影の効果を実現します

背景前景要素から特定の色を継承する影の効果を作成する方法を知りたいと思ったことはありませんか?方法に...

CSSアニメーションによるテーブルスクロールカルーセル効果の実装

前回の CSS 回転灯と同じ内容の CSS アニメーションの応用です。これは単なる別のアプリケーショ...

CSS3は、大きな円のドット分布と回転効果を実現するためにtransform-originを使用します。

まず、transform-origin 属性を使用する必要があります。transform 属性は必ず...

Vue における属性とプロパティの具体的な使用法と違い

目次Vue.jsにおける属性とプロパティ値および関連する処理として属性とプロパティの概念属性とプロパ...

Elasticsearchツールcerebroのインストールと使用チュートリアル

Cerebro は、Elasticsearch バージョン 5.x より前の Elasticsear...

WeChatミニプログラムでのマップの正しい使用例

目次序文1. 準備2. 実際の戦闘2.1 ミニプログラムの権限を設定する2.2 カプセル化ツールの機...

ドメイン名を nginx サービスにバインドする方法

nginx.conf で複数のサーバーを設定します。 http リクエストを処理する際、nginx ...

Reactプロジェクトの新規作成からデプロイまでの実装例

新しいプロジェクトを始めるこの記事では主に、新規プロジェクトを0から1まで取り組むプロセスを記録し、...

jQuery タグセレクターの適用例の詳細な説明

この記事では、jQueryタグセレクターアプリケーションの具体的なコードを例として紹介します。具体的...

Mysqlのマージ結果と水平スプライシングフィールドの実装手順

序文最近、レポート機能に取り組んでいたのですが、ある月に各部署に入社した人と退職した人の数をカウント...

Tomcat のパフォーマンス最適化のための Apr モジュールの構築方法

序文Tomcat は、無数のチューニング オプションを備えた、広く使用されている Java Web ...

CSS3 パッケージ化後にプレフィックスプラグインを自動的に追加する方法の詳細な説明: autoprefixer

vue-cli で構築されたプロジェクト スキャフォールディングでは、すでに autoprefix...

Keras を使って SQL インジェクション攻撃を判断する (例の説明)

この記事では、ディープラーニングフレームワーク keras を使用して、SQL インジェクションの特...