Skip to content

youhoc

Pages
- Home
- Modern App Guidelines
- Linux
  Day 1: Linux Distributions & Navigation
  Day 2: User Management
  Day 3: File Permission & Ownership
  Day 4: Package Management
  Day 5: Services Management
- Javascript
  JS The Weird Part
  Execution Context
  Types & Operators
  Objects & Functions
  Error Handling & Strict Mode
  Typescript, ES6, Tra
  Modern JS
  JS in the Browser
  Data Storage JSON
  Modern JS
  Advanced Objects & Methods
  Webpack & Babel
  Async
  jQuery
  In-depth Analysis of jQuery
  React-ready JS
  Arrow Function
  Template Literals
  Logical AND, OR, Ternary, Nullish Operators
  Destructuring & Rest Operator
  Array Method
  Immutability and Spread Operator
  Promises, Async/Await, Callback
- PHP
  gruntJS
  composer
  MySQL
- Docker
  Container Basics
  Container Networking
  Container Image
  Container Volume & Persistent Data
  Dockerfile
  Docker Compose
  Docker Registry
- Node.js
  1. Installing & Exploring
  2. Core Modules
  3. Get User Input
  File System & Input Arguments
  5. Express Web Server
  6. Deploy to Heroku & Github
  Authentication
  7. Databases
  8. Rest API
- ReactJS
  React from Andrew
  Summary from Next
  1. Basics
  2. React Components
  3. Webpack
  4. Styling with SCSS
  5. React Router
  6. React Hook
  Modern React From The Beginning
  Intro to JSX
  Vite Build Tools
  Basic Component Creation
  Component State
  Props & Component Composition
  useState with Inputs & Form Submission
  useEffect, useRef & Local Storage
  Async / Await and Http Request in React
  React Router: Declarative Mode
  ContextAPI
  React Router: Framework Mode
  File-routing & HTML Layouts
  Server-side Data Query
  Links & Navigation
  Loaders
- Typescript
  Type User vs UserProp
- Payload CMS

/

...

/

Execution Context

Execution Context

Syntax Parser

có một parser giữa code và computer để translate code cho computer hiểu và chạy

Execution Context

môi trường mà code chạy

ví dụ, khi chạy JS trên một tab Chrome, dù là JS rỗng (không có đoạn code nào), thì

Lexical Environment

thứ tự các dòng code có ảnh hưởng đến cách JS chạy

⁠

name / value pair

define nhiều lần

nhưng chỉ nhận giá trị 1 lần

giá trị có thể là những name / value pair khác

object

collection of name / value pair

// name / value

address: '64 Yen Do'

// object

address: {

street: 'Yen Do',

number: 64,

district: {

name: 'Binh Thanh',

ward: 17

}

}

⁠

global environment & global object

global environment: là execution environment (global) đầu tiên mà JS khởi chạy

cho dù không có đoạn code nào, thì trong môi trường global environment, JS cũng sẽ tự khởi tạo 2 thứ:

global object = window

global var = this

ở tầm global thì this = window (this ở đây có thể là window của Chrome, hoặc máy chủ của NodeJS)

global = “not inside a function”

var a = 'hello'

function b() {}

a thuộc gloval var

a cũng thuộc global object

truy cập a bằng nhiều cách

a

window.a

this.a

⁠

⁠

⁠

⁠

⁠

⁠

called b

hello world

⁠

⁠

⁠

Called b

undefined

# undefined = var a (I've not set value for a)

# uncaught errror = no a (there is no a at all in the code)

⁠

Execution Context bao gồm 2 phase:

creation phase: giữ chỗ cho biến (tất cả là ‘undefined’) và hàm vào bộ nhớ

code execution phase

Javascript is single-threaded and synchronous

how about async?

thứ tự các function:

creation: a(), b(), d (underfined);

run a() - line 1

run b()

run var d

exit b()

run a() - line 2

exit a()

run var d

⁠

⁠

⁠

⁠

variable environment

tùy vào vị trí đứng của var lúc đó ở đâu

# global context

myVar = 1

# a() context

myVar = 2

# b() context

myVar = undefined

# back to global context

myVar = 1

⁠

⁠

⁠

⁠

⁠

⁠

⁠

the scope chain

outer environment = outside where the function is written, NOT where the function is called.

vị trí hàm được viết, chứ không phải vị trí hàm được gọi

JS sẽ ưu tiên các biến BÊN TRONG hàm, nếu không có mới tìm bên ngoài (outer environment)

⁠

⁠

⁠

# vì outer environment của b() là global chứ không phải a()

myVar = 1

⁠

⁠

⁠

# b() lúc này đã nằm trong execution context của a(), nên outer environment của b() là a()

myVar = 2

⁠

⁠

⁠

myVar = 2

uncaught error: b is not defined

# bởi vì chưa từng có hàm b() được setup ở global environment

⁠

⁠

⁠

# không có myVar trong scope của a() lẫn b(), nên JS sẽ tiếp tục tìm bên ngoài nữa, là global

myVar = 1

⁠

what about asynchronous & callback?

tất cả event nằm ngoài JS Engine đều phải xếp hàng đợi thực thi sau

# kết quả console.log

finished function (still wait 3s)

finished execution

click event!

# nghĩa là click handler chỉ thực thi SAU khi các JS chính đã chạy xong

function a() hoặc b() setup xong

function chạy xong

global chạy xong

mới đến click handler / event queue

⁠

⁠

⁠

⁠

⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.