テンプレート式のアロー関数は、vue、react、または angular では無効ですか?なぜ機能しないのでしょうか?

この問題の背景:

Angular プロジェクトの label 属性にアロー関数をバインドしましたが、コンパイル中にエラーが発生しました。

テンプレート式のアロー関数は、vue、react、または angular では無効ですか?

Vue、React、Angular では、アロー関数はテンプレート式では無効です。

その理由は、テンプレート式はコンパイル時に JavaScript コードに変換され、実行時に JavaScript の eval() 関数を通じて実行されるためです。ただし、 eval() はアロー関数の構文をサポートしません。

Vue では、計算されたプロパティを使用して同様の機能を実現できます。 React と Angular では、それぞれのフレームワークが提供する他の方法を使用して、このタイプのロジックを処理できます。

JavaScriptのeval()関数とは何ですか?アロー関数がサポートされていない理由

JavaScript の eval() 関数は、文字列をパラメータとして受け取るおよび < a i=3 組み込み関数です。 > 解析し、JavaScript コードとして実行します。 eval() 関数は、実行時にコードを動的に実行し、式、関数、オブジェクトを評価できます。

eval() 関数は特定の状況では便利ですが、セキュリティ上のリスクも伴います。 eval() は任意の JavaScript コードを実行できるため、ユーザー入力データが eval() 関数に直接渡されると、コードインジェクション攻撃などのセキュリティ上の脆弱性が発生する可能性があります。したがって、 eval() 関数を使用するときは十分に注意し、ユーザーが入力したデータをパラメーターとして受け入れないようにする必要があります。

eval() 関数がアロー関数をサポートしない理由については、アロー関数には独自のスコープバインドルールがあるためです。アロー関数は親スコープ (つまり、外部関数またはグローバルスコープ) の this 値を継承し、経由で変更することはできません。 call()、apply()、またはbind()メソッド。 eval() 関数は、実行時に新しいスコープを作成し、そのスコープ内の this 値を変更します。これら 2 つの関数間の競合により、eval() 関数内でアロー関数を定義すると、動作が未定義になります。したがって、JavaScript 設計者は、潜在的な混乱やエラーを避けるために、 eval() 関数でのアロー関数の使用をサポートしないことを選択しました。 eval() で特定の関数ロジックを実行する必要がある場合は、アロー関数の代わりに通常の関数を使用できます。

アロー関数の範囲を詳しく説明してください。コード例を示します

アロー関数には、JavaScript の特定のスコープ規則があります。これらは、新しいスコープを作成するのではなく、外部関数のスコープを継承します。

アロー関数のスコープを説明するコード例を次に示します。

function outerFunction() {
  let outerVariable = "Outer";

  // 普通函数
  function regularFunction() {
    let regularVariable = "Regular";
    console.log(outerVariable); // 输出 "Outer"
    console.log(regularVariable); // 输出 "Regular"
  }

  // 箭头函数
  const arrowFunction = () => {
    let arrowVariable = "Arrow";
    console.log(outerVariable); // 输出 "Outer"
    console.log(arrowVariable); // 输出 "Arrow"
  };

  regularFunction();
  arrowFunction();
}

outerFunction();

上記の例では、outerFunction は 2 つの内部関数を含む外部関数です。このうち、regularFunction は通常の関数、arrowFunction はアロー関数です。

通常の関数でもアロー関数でも、外部関数の変数にアクセスできます outerVariable。これは、外部関数スコープから変数を継承するためです。したがって、すべてのユーザーは "Outer" にアクセスして出力できます。

さらに、regularFunction はローカル変数 regularVariable も定義し、 arrowFunction はローカル変数を定義します。 a> を出力できます。はを出力でき、は arrowVariable。これらのローカル変数には、それぞれの関数内でのみアクセスできます。したがって、regularFunction"Regular"arrowFunction"Arrow"

つまり、アロー関数のスコープは外部関数のスコープを継承しており、これにより外部関数の変数に簡単にアクセスできるようになります。