From 4732668f35dd875e048c52c9600d689d04192f62 Mon Sep 17 00:00:00 2001 From: willltns Date: Wed, 24 Jul 2019 20:17:37 +0800 Subject: [PATCH] supplement for Event Loop, HOC & Closure, links to course --- 2. Javascript Foundation/12 - 18.md | 32 +++++++- .../1 - 15.md | 80 +++++++++++++++++++ README.md | 2 +- 3 files changed, 112 insertions(+), 2 deletions(-) create mode 100644 5. The 2 Pillars Closures and Prototypal Inheritance/1 - 15.md diff --git a/2. Javascript Foundation/12 - 18.md b/2. Javascript Foundation/12 - 18.md index 0e43ec5..3a04f49 100644 --- a/2. Javascript Foundation/12 - 18.md +++ b/2. Javascript Foundation/12 - 18.md @@ -40,4 +40,34 @@ The Web API comes with browsers, all of them have their JavaScript Engine implem check if the Call Stack is empty or the Callback Queue has something returned from Web API. #### Callback Queue -a place for finished Web API operations. waiting for the call stack to be empty and event loop to transfer. \ No newline at end of file +a place for finished Web API operations. waiting for the call stack to be empty and event loop to transfer. + +##### Microtask and Macrotask +```javascript +while (eventLoop.waitForTask()) { + const taskQueue = eventLoop.selectTaskQueue() + if (taskQueue.hasNextTask()) { + taskQueue.processNextTask() + } + const microtaskQueue = eventLoop.microTaskQueue + while (microtaskQueue.hasNextMicrotask()) { + microtaskQueue.processNextMicrotask() + } +} +``` +> .1) takes the contents of the input file, 2) wraps it in a function, 3) associates that function as an event handler that is associated with the “start” or “launch” event of the program; 4) performs other initialization, 5) emits the program start event; 6) the event gets added to the event queue; 7) the Javascript engine pulls that event off the queue and executes the registered handler, and then (finally) 8) our program runs! — **“Asynchronous Programming in Javascript CSCI 5828: Foundations of Software Engineering Lectures 18–10/20/2016” by Kenneth M. Anderson** + +So we see the script running is the first macrotask queued. + +**The important points are:** +- Tasks are taken from the Task Queue. +- Task from the Task Queue is a Macrotask != a Microtask. +- Microtasks are processed when the current task ends and the microtask queue is cleared before the next macrotask cycle. +- Microtasks can enqueue other microtasks. All are executed before the next task inline. +- UI rendering is run after all microtasks execution. + +[Microtask and Macrotask: A Hands-on Approach](https://blog.bitsrc.io/microtask-and-macrotask-a-hands-on-approach-5d77050e2168) + +[Difference between microtask and macrotask within an event loop context](https://stackoverflow.com/questions/25915634/difference-between-microtask-and-macrotask-within-an-event-loop-context) + +[Jake Archibald: In The Loop - JSConf.Asia 2018](https://www.youtube.com/watch?v=cCOL7MC4Pl0) \ No newline at end of file diff --git a/5. The 2 Pillars Closures and Prototypal Inheritance/1 - 15.md b/5. The 2 Pillars Closures and Prototypal Inheritance/1 - 15.md new file mode 100644 index 0000000..ce1eb25 --- /dev/null +++ b/5. The 2 Pillars Closures and Prototypal Inheritance/1 - 15.md @@ -0,0 +1,80 @@ +## Functions are Objects (callable objects) +review: when we define functions, the compiler looks at our code lexically, it determines what variables are available in variable environment. and also add scope chain. + +```javascript +const func = new Function('num', 'return num') // function constructor + +func(1) +``` + +```javascript +function woho() { + console.log('woho') +} +woho.yell = 'ahh' +------------- underneath the hood --------------- +const specialObj = { + name: 'woho', + (): console.log('woho'), + yell: 'ahh' +} +``` +- name (optional). when use IIFE or function expression, no name. +- piece of code invoking with brackets. +- properties (call. apply...) + +## First Class Citizens +- function can be assigned to variable or property of object. +- pass function as argument into another function. +- return function as value from other function. + +## High Order Function +- a function that can take a function as an argument. +- a function that returns another function. + +hard code data --> when invoke, pass data --> when invoke, not only data, but pass action(function). + +> been able to achieve with HOF is this ability to tell the function what to do during invocation, we are able have our code dry and more flexible. breaking things down into small functionalities. + +## Closures (lexical scoping) +is simply that a combination of function and the lexical environment. + +Closures allow a function to access variables from an enclosing scope or environment even after it leaves the scope in which it was declared. + +imagine closure is a memory box. and lexically analyze child function. variables outside the child function will be keep around if the child function is using it. anything referenced by the child function will be put into the closure box. + +- Memory efficient +```javascript +function heavyDuty(index) { + const bigArray = new Array(10000).fill('A') + return bigArray[index] +} + +function heavyDuty2() { + const bigArray = new Array(10000).fill('A') + return index => bigArray[index] +} +``` + +- Encapsulation +```javascript +var makeCounter = function() { + var privateCounter = 0 + + function changeBy(val) { + privateCounter += val + } + + return { + increment: function() { + changeBy(1) + }, + decrement: function() { + changeBy(-1) + }, + value: function() { + return privateCounter + } + } +} +``` \ No newline at end of file diff --git a/README.md b/README.md index bea664b..d306dc0 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,2 @@ # Advanced-JavaScript-Concepts-notes -make notes of course Advanced JavaScript Concept +make notes of [Advanced JavaScript Concept](https://www.udemy.com/advanced-javascript-concepts/)