序文信じてください。この記事の 7️⃣ ステップを覚えておけば、JS の this リファレンスを完全にマスターできます。 まず、式を暗唱します: 矢印関数、新規、バインド、適用して呼び出し、オブジェクト、直接呼び出し、関数内ではありません。 式の順序に従って、前のシナリオのいずれかが満たされている限り、これがどこを指しているかを判断できます。 では、数式の順番に詳しく説明していきます。記事内のサンプルコードはすべてChromeコンソールで実行されています。 記事の最後には、学習成果をテストするための練習問題が用意されています。ぜひ試してみてください。 1. 矢印関数矢印関数は、this が変更されないため最初にランク付けされます。したがって、現在の関数が矢印関数である限り、他のルールを確認する必要はありません。 矢印関数の this は、作成されたときの外側の this への参照です。ここで重要なポイントが 2 つあります。
したがって、矢印関数の 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 モジュール ファイルに分割できます。
非厳密モード 厳密モードは 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: https ウェブサイトを展開し、Nginx でアドレス書き換えを構成するための詳細な手順
質問js を使用して CSS 疑似クラス スタイルを変更するにはどうすればよいでしょうか?しかし、j...
1. 概要information_schema データベースは performance_schema...
1. 環境整備1.MySQLインストールパス: /usr/local 2. CentOS 6.2 ...
Shopify Plus は、私たちが設立した e コマース プラットフォームのエンタープライズ バ...
コンテナはすでに作成されていますが、その起動パラメータ(データがマウントされる場所)を知る方法 #コ...
Harbor は、Docker イメージを保存および配布するためのエンタープライズ レベルのレジスト...
mysql データベースには student テーブルがあり、その構造は次のとおりです。 Oracl...
1. メディアクエリ方式 /*iPhone X への適応*/ @media 画面のみ、(デバイス幅:...
目次1. テスト環境1.1 CentOS 7をインストールする1.2 Docker CE 19.03...
背景モバイル デバイスでは、ページ ジャンプ間のキャッシュが必須要件です。例: ホームページ =&g...
基本的にすべてのeコマースプロジェクトにはショッピングカートの機能があります。これはreact-na...
Debian の紹介Debian は、広い意味では、フリーなオペレーティング システムの作成に専念...
目次序文1. Vue2 のライフサイクルインスタンスのライフサイクルその他のライフサイクルフック2....
クラスを見るとき、どのような情報を得たいですか?このクラスはどこで使用され、その機能は何ですか?この...
目次1. 概要1. 説明文テスト2. 結果の各列の説明2. ID列の説明1. 環境整備2. expl...