JS スリーマウンテンズ同期 非同期フロントエンドで非同期な操作は 2 つだけです。
コンパイラ解析 + コード実行の原則: 1. コンパイラはコードを上から下へ1つずつ解析します 2. コードが同期か非同期かを判断する
3. 非同期実行を開始する前に、すべての同期実行が完了するまで待機します。 同期と非同期の違いAPI: コールバックありの非同期、コールバックなしの同期 パフォーマンス: 非同期のパフォーマンスは良好です (スレッドをブロックしません) 同期はスレッドをブロックします 順序: 同期インオーダー実行、非同期アウトオブオーダー実行 その他: コールバック関数: 関数のパラメータが関数である場合、このパラメータ関数はコールバック関数と呼ばれます。 範囲、終了関数スコープチェーン
ブロックスコープ1. 2. let の場合、デフォルトのグローバル スコープはレベル 0 ブロック スコープとも呼ばれます。次に、オブジェクトに加えて、中括弧によって新しいブロック スコープが開きます。レベル 0 はレベル 1 を開き、レベル 1 はレベル 2 を開きます。 3. 関数スコープチェーンと同じですが、関数スコープは関数スコープを開く関数のみであり、ブロックスコープはブロックスコープを開く中括弧であり、varは関数スコープを認識し、letはブロックスコープを認識します。 閉鎖クロージャは関数です。他の関数内の変数を読み取ることができる関数 コード例: 関数foo(){ // foo の内部変数 let num = 10 // この内部はクロージャ関数と呼ばれます inner() { コンソール.log(数値) } } クロージャの用途は何ですか?
クロージャと直接戻り値には違いがある値を直接返すと、実際にはその値のデータだけが返されます。その後の変更は関数内の変数とは何の関係もありません。 したがって、クロージャを使用すると、外部から関数内の変数に間接的にアクセスできるようになります。 クロージャを書くためのいくつかの方法簡単に言えば、閉鎖特性を満たすものはすべて閉鎖とみなされる。 クロージャ:関数の内部変数に外部からアクセスできるようにする関数です。 クロージャ効果1: 変数のライフサイクルの延長ライフサイクル:宣言から破壊までのサイクルを指します グローバル変数のライフサイクルは、Webページの開始から終了までです。 ローカル変数のライフ サイクルは、それが配置されているスコープ内で開始および終了します。 クロージャは変数のライフサイクルを延長できるため、外部からローカル変数にアクセスできます。 したがって、クロージャを多用するとメモリリークが発生する可能性がある。 メモリ リーク: データの一部は不要になりましたが、まだメモリ領域を占有しており、リサイクルされていません。 解決:
閉鎖効果2: アクセス制限変数をローカル変数にして、外部から直接アクセスできないようにします。 私たちが書いたクロージャ(ブリッジ)を介して間接的にのみアクセスできるため、クロージャ内でいくつかの制限を設けて、アクセスを制限するという目的を達成できます。 閉会の際の注意事項知らせ: クロージャを生成する外側の関数が呼び出される回数に応じて、同じ数のクロージャが生成され、そのたびに異なるデータが操作されます。 クロージャを生成する外側の関数が 1 回呼び出されると、生成されるクロージャは 1 つだけになり、操作されるデータは同じままになります。 クロージャはvarの使用によって発生する添え字エラーの問題を解決します<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <スタイル> ul { リストスタイル: なし; パディング: 0; マージン: 0; } li { 幅: 30ピクセル; 高さ: 30px; 背景色: 黄色; 行の高さ: 30px; テキスト配置: 中央; フロート: 左; 右マージン: 10px; } </スタイル> </head> <本文> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <スクリプト> // 以前にletはありましたか?いいえ、ではvar // Find all liを使って添え字の問題を解決する方法を見てみましょう var lis = document.getElementsByTagName('li') (var i = 0; i < lis.length; i++) の場合 { // i には変数が 1 つだけあるので、最終的にクリックすると、全員が 1 つの i を訪問します。 // i の最終値は 5 なので、誰をクリックしても 5 になります // 解決法: li が 5 つある場合、5 つの変数が必要で、変数の値はそれぞれ 0、1、2、3、4 です。 // 5 つの異なる変数を生成するにはどうすればよいでしょうか?関数スコープ(function(){)を作成する必要があります // このループは 5 つの自己実行関数を生成するため // これは 5 つの異なるインデックス変数が存在することを意味します // それらの値はそれぞれ 0、1、2、3、4 である必要があり、i の値は正確に 0、1、2、3、4 です // iをインデックスに割り当てるだけです var index = i // 各liにクリックイベントを追加する lis[i].onclick = function () { アラート(インデックス) } })() } </スクリプト> </本文> </html> 投票機// 投票して現在の投票数を取得できる関数を作成する function votor() { // チケットの数を格納する変数があります。let ticket = 0 戻る { getTicket: 関数 () { console.log('現在のチケット数は: ' + チケット) }, // 投票 add: function () { チケット++ } } } tp = votor() とします tp.add() tp.add() tp.add() tp.add() tp.getTicket() 閉鎖に関する2つの面接の質問// 質問1: window.name = "ウィンドウ"; オブジェクトを = { 名前:「私のオブジェクト」、 getNameFunc: 関数 () { 関数を返す(){ this.name を返します。 }; } }; コンソールにログ出力します。 // 質問2: window.name = "ウィンドウ"; オブジェクトを { 名前:「私のオブジェクト」、 getNameFunc: 関数 () { that = this とする; 関数を返す(){ that.name を返します。 }; } }; コンソールにログ出力します。 プロトタイプ、プロトタイプチェーンプロトタイプオブジェクト効果: プロトタイプオブジェクトのコンストラクタに共通のプロパティとメソッドを追加すると、メモリを節約できます。 プロトタイプチェーンどのオブジェクトから始めても、proto に従って上方向に検索することで Object.prototype を見つけることができます。__ 完全なプロトタイプチェーン図回路図の前提条件: 各オブジェクトには すべてのオブジェクトには、オブジェクトである 関数もオブジェクトです。 オブジェクトにインスタンス化するための正確なコンストラクターがない場合、そのオブジェクトは組み込みコンストラクターであるとみなされます。 Object のインスタンス。Object のプロトタイプは最上位のプロトタイプ オブジェクトであり、その 関数はトップレベルのコンストラクターです。これは独自のコンストラクターであり、独自のインスタンス オブジェクトです (簡単に言えば、関数は自分自身を作成します)。 完成したプロトタイプの概略図: 以上が、難しいJS同期および非同期スコープ、クロージャプロトタイプ、プロトタイプチェーンの詳細な説明の詳細な内容です。JS同期および非同期スコープ、クロージャプロトタイプ、プロトタイプチェーンの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Docker 接続 MongoDB 実装プロセスとコード例
>>: MySQL は information_schema オブジェクトの付与をバイパスし、ERROR 1044 (4200) エラーを報告します
ウェブサイト構築におけるカラーマッチングは非常に特殊であり、ウェブサイトのテーマ、感情、雰囲気などの...
序文:前の記事を読んだ後、binlog はデータベースで実行されたすべての DDL および DML ...
Google Reader で、JunChen が書いた「フロー理論と設計」というタイトルの投稿を見...
序文Linux のファイル権限管理はとにかく素晴らしいです。SUID、SGID、SBIT の機能を確...
この記事の例では、完全な選択機能を実装するためのVueの具体的なコードを参考までに共有しています。具...
概要Nginx では変数を使用して設定を簡素化し、設定の柔軟性を向上させることができます。すべての変...
Text の height 属性が定義されている場合、Text に入力されたテキストは垂直方向に中央...
1. リテラルとローカル変数へのアクセスは最も高速ですが、配列要素とオブジェクト メンバーへのアクセ...
初めて MySQL FUNCTION を書いたとき、エラーが何度も発生しました。 Err] 1064...
一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると、[ファイルの選択]ダイアロ...
データベースへの接続などの基本的な操作はご自身で行ってください。この記事ではパスワードの変更方法を中...
インターネットは絶えず進化する有機体です。長期にわたってインターネットの発展に適応できるページを構築...
序文最近、小さなデモを作成しました。大規模な工場のオンライン データを使用したため、インターフェイス...
序文ストレス テスト中に、リソース使用のボトルネックによって発生する最も直接的なパフォーマンスの問題...
Nexus は RestApi を提供していますが、一部の API はまだ Groovy と組み合わ...