1. オブジェクトメソッドを定義するJS でオブジェクト メソッドを定義する方法は、オブジェクトの関数を指すプロパティを定義することです。メソッドが呼び出されると、メソッド内の this は、メソッドが属するオブジェクトを指します。 obj = { 配列: [1, 2, 3], 合計: () => { console.log(this === window); // true this.array.reduce((result, item) => result + item); を返します。 } }; console.log(this === window); //true obj.sum(); //エラー: キャッチされない TypeError: Object.sum で未定義のプロパティ 'reduce' を読み取ることができません this.array は実行時に未定義です。obj.sum が呼び出されると、実行コンテキスト内の this は引き続き window を指します。その理由は、矢印関数が関数コンテキストを window にバインドするためです。this.array は window.array と同等であり、明らかに未定義です。 変更方法: 関数式またはメソッドの省略形 (ES6 で既にサポートされています) を使用してメソッドを定義します。これにより、実行時にメソッドが含まれるコンテキストによってメソッドが決定されるようになります。コードは次のとおりです。 obj = { 配列: [1, 2, 3], 合計() { console.log(this === window); // false this.array.reduce((result, item) => result + item); を返します。 } }; console.log(this === window); //true コンソールログ(obj.sum()); //6 2. プロトタイプメソッドを定義するプロトタイプ メソッドの定義にも同じルールが適用され、矢印関数を使用すると実行時に実行コンテキスト エラーが発生します。たとえば、次のコード: 関数 Cat(名前) { this.name = 名前; } Cat.prototype.sayCatName = () => { console.log(this === window); // => true this.name を返します。 }; const cat = new Cat('Tom'); console.log(cat.sayCatName()); // 未定義 この問題は、従来の関数式を使用して解決できます。コードは次のとおりです。 関数 Cat(名前) { this.name = 名前; } Cat.prototype.sayCatName = 関数 () { console.log(this === window); // => false this.name を返します。 } const cat = new Cat('Tom'); console.log(cat.sayCatName()); // トム sayCatName が通常の関数になった後、呼び出されたときの実行コンテキストは、新しく作成された cat インスタンスを指すようになります。 3. イベントコールバック関数を定義する矢印関数は宣言時に実行コンテキストにバインドされます。コンテキストを動的に変更することはできません。これは、動的なコンテキストが必要な場合には不利です。 たとえば、クライアント側プログラミングで一般的な DOM イベント コールバック関数 (イベント リスナー) バインディングでは、コールバック関数がトリガーされると、this は現在イベントが発生している DOM ノードを指しており、このときに動的コンテキストが非常に役立ちます。たとえば、次のコードは、矢印関数をイベント コールバック関数として使用しようとしています。 ボタン = document.getElementById('myButton'); button.addEventListener('click', () => { console.log(this === window); // true this.innerHTML = 'クリックされたボタン'; }); グローバル コンテキストで定義された矢印関数が実行されると、this は window を指します。クリック イベントが発生すると、this.innerHTML は window.innerHTML と同等になり、意味がなくなります。 関数式を使用すると、実行時にこれを動的に変更できます。修正されたコードは次のとおりです。 ボタン = document.getElementById('myButton'); button.addEventListener('click', 関数() { console.log(this === button); // true this.innerHTML = 'クリックされたボタン'; }); 4. コンストラクタを定義するコンストラクター内の this は、新しく作成されたオブジェクトを指します。new Car() が実行されると、コンストラクター Car のコンテキストは新しく作成されたオブジェクトになります。つまり、this instanceof Car === true です。当然ですが、矢印関数はコンストラクターとして使用できません。実際、JS ではそうすることが禁止されており、そうすると例外がスローされます。 たとえば、次のコードはエラーを報告します。 const メッセージ = (テキスト) => { this.text = テキスト; }; const helloMessage = new Message('Hello World!'); //エラー: "TypeError: Message is not a constructor" がスローされます 新しい Message インスタンスを構築すると、Message はコンストラクターではないため、JS エンジンはエラーをスローします。上記の例は、関数式または関数宣言のいずれかを使用してコンストラクターを宣言することで修正できます。 const メッセージ = 関数(テキスト) { this.text = テキスト; }; const helloMessage = 新しいメッセージ('Hello World!'); console.log(helloMessage.text); // 'Hello World!' 上記は、JavaScript のどのシナリオで矢印関数を使用できないかの詳細です。JavaScript で矢印関数を使用できない理由の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: mysql5.7.14 解凍版インストールと設定方法 グラフィックチュートリアル (win10)
さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!DOCTYPE htm...
v-model は、入力とフォーム データ間、または 2 つのコンポーネント間の双方向データ バイ...
目次1. CentOS 7.9 20にDockerをインストールする2. MySQL クラスターをデ...
多くの友人がフォーラムやメッセージエリアで、どのような状況で MySQL をシャーディングする必要が...
実際、上記の 3 つの表はいずれも 3 行 3 列です。区切り線を非表示にするコツはルールにあります...
フォーム入力ボックスの入力をdisable属性に設定して送信すると、入力ボックスの値を取得できなくな...
1. redisイメージを検索する docker 検索 redis 2. Redisイメージをダウン...
最近、あるサービスにアラームが発生し、耐えられなくなっています。アラーム情報は次のとおりです。メトリ...
ドキュメントはしばらく前から書いていましたが、アップロードする勇気がありませんでした。サーバーのセキ...
この記事では、2番目のキルカウントダウンコンポーネントを実装するためのVueの具体的なコードを参考ま...
このドキュメントを作成した当時は2019年12月頃で、er2.200が最新バージョンでした。 1.画...
時間差関数 TIMESTAMPDIFF と DATEDIFF の使用SQL ステートメント、特にスト...
序文最近、仕事の都合で、APP ショッピングカートの注文支払いに取り組んでいました。テスト中にバグが...
目次uni-app のスタイル要約するuni-app のスタイルsassプラグインは公式ウェブサイト...
何人かの学生は、マスターとスレーブの間の不一致の問題に遭遇したと述べました。一般的な状況としては、m...