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 が出現すると、すべての最適化が無意味になってしまうことです。最も簡単な方法は、最適化を行わないことです。その場合、実行速度が非常に遅くなりますが、これは避けられない事実です。

vue.js チュートリアル」

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

関連する推奨事項:

2020 フロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアル推奨: 2020 年の最新の vue.js ビデオ チュートリアル 5 選

プログラミング入門をご覧ください。 ！

以上がWith の使用に関する詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。