JavaScript で矢印関数を使用できないシナリオはどれですか

JavaScript で矢印関数を使用できないシナリオはどれですか

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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • より良い JavaScript 条件文と一致条件を書くためのヒント (要約)
  • JSの矢印関数におけるこのポイントの詳細な説明
  • JavaScriptのアロー関数の特徴と通常の関数との違い
  • JavaScript の矢印関数と通常の関数の違いの詳細な説明
  • JS 矢印関数に適さないシナリオは何ですか?
  • JavaScript の条件付きアクセス属性と矢印関数の紹介

<<:  mysql5.7.14 解凍版インストールと設定方法 グラフィックチュートリアル (win10)

>>:  Linuxで環境変数を削除する詳細な手順

推薦する

MySQL で遅い SQL 文を見つける方法

MySQL で遅い SQL ステートメントを見つけるにはどうすればよいでしょうか?これは、多くの人を...

CSS 兄弟要素フローティング分析の概要

float:左/右/なし; 1. 同じレベルフローティング(1)ブロックレベル要素を同じ行に表示する...

RR および RC 分離レベルでのインデックスとロックのテスト スクリプトのサンプル コード

基本概念現在の読み取りとスナップショットの読み取りMVCC では、読み取り操作はスナップショット読み...

Linux は suid vim.basic ファイルを使用して権限昇格を実現します。

カリで再現まず、必要なvim.basicファイルにsuid権限を設定します。 chmod u+s /...

Dockerのヘルス検出メカニズム

コンテナの場合、最も単純なヘルスチェックはプロセス レベルのヘルスチェックであり、プロセスが稼働して...

MySQL の挿入ステートメントの使用実体験

目次1. 挿入のいくつかの構文1-1. 通常の挿入文1-2. 挿入または更新1-3. 挿入または交換...

JavaScript オブジェクト指向クラス継承ケースの説明

1. オブジェクト指向のクラス継承これまでの章では、JavaScript のオブジェクト モデルがプ...

node.jsのインストールとHbuilderXの設定の詳細な説明

npm インストールチュートリアル: 1. Node.jsインストールパッケージをダウンロードする公...

TypeScript の条件型に関する詳細な読書と実践記録

目次ジェネリック型での条件型の使用ツールタイプ脱出ポッド矢印関数で条件型を使用する型推論による条件型...

コマンドラインを使用してUbuntuのバージョンを検出する方法

方法1: lsb_releaseユーティリティを使用するlsb_release ユーティリティは、L...

JavaScript デザインパターン コマンドパターン

コマンド パターンは、JavaScript デザイン パターンにおける動作デザイン パターンです。定...

MySQLの結合の基本原理についての簡単な説明

目次結合アルゴリズム駆動テーブルと非駆動テーブルの違い1. 単純なネストループ結合、単純なネスト、イ...

MySQL の異なるテーブル間でフィールドをコピーする

場合によっては、フィールドから別の新しいフィールドにデータの列全体をコピーする必要があります。これは...

ユーザー中心設計

最近、デジタル デザイン コミュニティで「誰が何を担当するのか」という明らかな混乱についてよく質問さ...

nginx ssl を設定して https アクセスを実装する手順 (初心者向け)

序文サーバーを展開した後、私は大きな喜びを感じながら自分の Web サイトにアクセスし、見たものすべ...