#3 Syntax (3) - Callback quiz, Object

Callback

コードごとに優先度が異なるため、コードを順番に実行するにはasync、promiseを理解する必要があります.
とても重要です!!!

写真ソース

実行順
一般コード>Promise(マイクロ)>settimeOut(一般)

イベントループはスタックが空の場合に実行されます.
message(callback) queue = microtask queue & regulartask queue
ミクロ運転は従来より先である.(優先度が高い)
micro => promise, async
regular => setTimeOut

Warm-up Race

console.log("Horse A");
console.log("Horse B");
console.log("Horse C");

-> a - b - c (synchronous)

Race 1

setTimeout(() => console.log("Horse A"), 1000)
console.log("Horse B")

-> b - a

実行順
settimeout pushから呼び出しスタックへ
Web APIに送信してバックグラウンド操作を行う
1000ミリ秒後にタスクを完了
コールバックキューに移動
b pushから呼び出しスタックへ
b運転
event loop call stackが空であるかどうかを確認します->空です.
callback queueをポーリングしpush->aを

実行

Race 2

setTimeout(() => console.log("Horse A"), 0)
console.log("Horse B")

-> b - a

実行順
settimeout pushから呼び出しスタックへ
Web APIに送信してバックグラウンド操作を行う
0ミリ秒後にタスクが完了
コールバックキューに移動
b pushから呼び出しスタックへ
b運転
event loop call stackが空であるかどうかを確認します->空です.
callback queueをポーリングしpush->aを

実行

Race 3

setTimeout(() => console.log("Horse A"), 0);
wait60Seconds(); //some incredibly expensive synchronous computation
console.log("Horse B")

-> b - a
jsでは、常に同期作業を優先します.イベントループにどれくらい時間がかかるかにかかわらず、スタックにプッシュされた同期関数のクラスがある場合、非同期タスクはキューから削除されません.

実行順
settimeout pushから呼び出しスタックへ
Web APIに送信してバックグラウンド操作を行う
0ミリ秒後にタスクが完了
コールバックキューに移動
义齿
wait()->60秒の実行
b pushから呼び出しスタックへ
b運転
event loop call stackが空であるかどうかを確認します->空です.
callback queueをポーリングしpush->aを

実行

Race 4

const asyncOperation = fetch('something.com');
asyncOperation.then((resolvedValue) => console.log("Horse A"));
console.log("Horse B")

-> b - a

実行順
fetch, .then -> Promise
呼び出しスタックにプッシュ
Web APIに送信
b pushから呼び出しスタックへ
b運転
event loop call stackが空であるかどうかを確認します->空です.
callback queueをポーリングしpush->aを

実行

Race 5

setTimeout(() => console.log("Horse A"), 0);
const promise = Promise.resolve(); 
promise.then(() => console.log("Horse B"));
console.log("Horse C")

-> c - b - a

実行順
settimeout pushから呼び出しスタックへ
Web APIに送信してバックグラウンド操作を行う
0ミリ秒後にタスクが完了
コールバックキューに移動
コミットメントは呼び出しスタックにプッシュされます
Web APIに送信してバックグラウンド操作を行う
コールバックキューに移動
c pushから呼び出しスタックへ
うんてん
event loop call stackが空であるかどうかを確認します->空です.
コールバックキューではpromiseの優先度が高いため、bをポーリングし、呼び出しスタック上でpush->bを実行します.
event loop call stackが空であるかどうかを確認します->空です.
callback queue残りのaをポーリングし、push->aを呼び出しスタック

で実行する

Race 6

setTimeout(() => console.log("Horse A"), 5)
const promise = new Promise((resolve) => {
   setTimeout(() => resolve(), 10) 
})
promise.then(() => console.log("Horse B"))
console.log("Horse C")

-> c - a - b

実行順
settimeout pushから呼び出しスタックへ
Web APIに送信してバックグラウンド操作を行う
5ミリ秒後にタスクが完了
コールバックキューに移動
コミットメントは呼び出しスタックにプッシュされます
Web APIに送信してバックグラウンド操作を行う
10ミリ秒後にタスクを完了
コールバックキューに移動
c pushから呼び出しスタックへ
うんてん
event loop call stackが空であるかどうかを確認します->空です.
コールバックキューでは、aが最初に終了するので、aをポーリングして呼び出しスタックにプッシュする->a実行
event loop call stackが空であるかどうかを確認します->空です.
callback queue残りのbをポーリングし、push->bを呼び出しスタック

に入れる

The Final Race

setTimeout(() => console.log("Horse A"), 0);
const promise = fetch("someUrl") // takes 100ms
promise.then(x => console.log("Horse B"));
waitFor200ms();
console.log("Horse C");

-> c - b - a

実行順
settimeout pushから呼び出しスタックへ
Web APIに送信してバックグラウンド操作を行う
0ミリ秒後にタスクが完了
コールバックキューに移動
コミットメントは呼び出しスタックにプッシュされます
Web APIに送信してバックグラウンド操作を行う
100ミリ秒後にタスクを完了
コールバックキューに移動
wait()pushから呼び出しスタックへ
wait()実行->200ミリ秒待機
c pushから呼び出しスタックへ
うんてん
event loop call stackが空であるかどうかを確認します->空です.
callback queueでは、aとbの両方が終了し、優先度の高いbをポーリングすることによって呼び出しスタックに対してpush->b操作を実行する
event loop call stackが空であるかどうかを確認します->空です.
callback queue残りのaをポーリングし、push->aを呼び出しスタック

で実行する

Bonus Race

async function someFn() {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Horse A"), 1000)
  });
 
  let result = await promise; 
  console.log(result); 
}
setTimeout(console.log("Horse B"), 0)
someFn();
console.log("Horse C");

-> b - c - a

実行順
settimeout pushから呼び出しスタックへ
0ミリ秒後すぐにタスクを完了->b実行
Web APIに送信してバックグラウンド操作を行う
コールバックキューに移動
somefn()pushから呼び出しスタックへ
promise->Web APIに送信してバックグラウンド操作を行う
1000ミリ秒後にタスクを完了
コールバックキューに移動
c pushから呼び出しスタックへ
うんてん
event loop call stackが空であるかどうかを確認します->空です.
callback queue aをポーリングし、call stack->実行

にプッシュ

Object

constructor

オブジェクトに拡張します.ジェネレータはインスタンスを作成することもできます.function + 첫 글자 대문자と書きます.
ex. function Todo() {}

this

通常は一番上のルート(window)を指します.
Windows:jsで使用されるすべての機能が含まれています.木の根元

メソッドで使用されている場合は、そのオブジェクトを指します.

メソッドでは、正則関数(funchi(){})で使用されるときにウィンドウを指します.
->オブジェクトを指しますか?

の他の変数にこの変数を指定し、

を使用します.

()=>{}と書きます.

Class

クラス内メソッドはfunctionではなく、메소드명()と書きます.

Inheritance

클래스명.prototype.함수이름新しいインスタンスを作成するときは、コードのみを指します.インスタンスには、各コードがあるわけではありません.共通コードの使用を指します.(同じアドレスを共有)