With の使用に関する詳細な分析-Vue.js-php.cn

With の使用に関する詳細な分析

青灯夜游

リリース： 2020-10-23 17:45:58

転載

2586 人が閲覧しました

With の使用に関する詳細な分析

with はステートメントのスコープチェーンを拡張するために使用されますが、混乱を招くエラーや互換性の問題の原因となる可能性があるため、一般に with ステートメントの使用は推奨されません。 Vue のソースコードには with 文を使用した機能ポイントがあるため、フレームワークのソースコードを読みやすくするために、その機能を紹介します。

パフォーマンスの長所と短所

長所

with ステートメントを使用すると、パフォーマンスの低下を引き起こすことなく変数の長さを短縮できます。追加の計算量は最小限です。「with」を使用すると、不必要なポインターパス解決操作を減らすことができます。ただし、ほとんどの場合、with を使用しなくても、一時変数を使用してポインターを保存するか、call を使用することで同じ効果が得られます。

欠点

with ステートメントを使用すると、プログラムは変数値を検索するときに、最初に指定されたオブジェクト内を検索します。したがって、このオブジェクトの属性ではない変数を見つけるのは非常に遅くなります。

例

let obj = {
    a: 1,
    b: 2,
    c: 3
}
with(obj){
    console.log(a)    //1
    console.log(b)    //2
    console.log(c)    //3
}

ログイン後にコピー

このコードでは、with コードブロック内の各変数に関連付けられた obj オブジェクトは、このローカル変数がobj オブジェクトプロパティが同じ名前を持つ場合、このローカル変数は obj オブジェクトのプロパティを指します。

function fn(obj){
    with(obj){
        a = 1;
    }
}
let obj1 = {
    a: 2
}
let obj2 = {
    b: 3
}

fn(obj1);
console.log(obj1.a)     //1

fn(obj2)
console.log(obj2.a)     //undefined
console.log(a)          //1，变量a被泄漏到全局作用域链上

ログイン後にコピー

上の例では、obj1 には属性 a がありますが、obj2 には属性 a がありません。 fn(obj) は、オブジェクト参照である obj 仮パラメータを受け取り、with(obj) を実行します。 with コードブロック内では、a は実際には参照であり、a に 1 が割り当てられます。

obj2 を with に渡す場合、with で宣言されたスコープは obj2 であり、このスコープから a のクエリが開始されます。識別子 a は、obj2 のスコープ、fn のスコープ、およびグローバルスコープで見つかりませんでした。したがって、非厳密モードでは、グローバル変数がグローバルスコープに自動的に作成され、strictモード では、ReferenceError エラーがスローされます。

パフォーマンスの低下

コード内で with が使用されている場合、JS エンジンは、コンパイルフェーズでは識別子に関する判断が無効であると単純に想定することしかできません。コンパイル実装者は、渡されたスコープオブジェクトが誰であるかを知る方法もありません。したがって、コンパイルフェーズ中に JS エンジンによって実行されるパフォーマンスの最適化は無効になります。最悪のシナリオは、with が出現すると、すべての最適化が無意味になってしまうことです。最も簡単な方法は、最適化を行わないことです。その場合、実行速度が非常に遅くなりますが、これは避けられない事実です。

With

Vue の Vue は、コンパイル時にテンプレートから対応するレンダリング関数を生成します。このレンダリング関数では with ステートメントが使用されます。上記によると with ステートメントの使用は推奨されていないとのことですが、なぜ Vue では with ステートメントが使用されるのでしょうか?

関連する推奨事項: 「

vue.js チュートリアル」

function render () {
  with (this) {
    return _c(&#39;p&#39;,{on:{"click":change}},[_c(&#39;span&#39;,[_v(_s(number))]),_v(" "),_c(&#39;span&#39;,     [_v(_s(name))])])
  }
}

ログイン後にコピー

with のスコープはテンプレートのスコープと正確に一致するため、テンプレートのコンパイルプロセスを大幅に簡素化できます。 with のコード量は非常に少なく、スコープの処理を JS エンジンに任せた方が確実です。もちろん、最も理想的な状況は with の使用を排除することです。プリコンパイル中に、最初のコンパイルによって生成されたコードは自動的に追加処理を受け、完全な AST 分析を使用してスコープを処理し、with を削除し、ES6 をサポートします。方法、文法。つまり、webpack vue を使用する場合、最終的に生成されるコードには with がありません。