[ Javascript ] Javascript的奇怪部分 (40%)

js 是在 execute context (執行環境) 中實際被轉成電腦看得懂的東西
在 execute context 中分成兩個階段

  1. 創造階段 Creation Phase
    • 建立全域物件 (Global Object) 跟 this, 如果有連結到外部, 也會產生外部環境的連結
    • 將宣告的變數 (variables) 跟 functions 先在記憶體中佔一個位子, 但變數尚未給值, 而 functions使用 function b () {} 這種方式的會有值
    • 因為有用等號給值的只會等到真正執行的時候, 才會知道當下執行的值會是什麼
    • 所以當只有在記憶體內先佔一個位子時, 所有的變數值都會先被給定 undefined
    • 上面這點就是一般說的 Hoisting
  2. 執行階段 Execution Phase
    • 逐行編譯與執行你的程式碼
Single Thread -> 一次執行一個指令
Synchronous -> "照順序"一次執行一行程式碼

* Javascript在執行的時候誰會最先被創造出來?
-----> Global Object & this

函數呼叫

  • 當一個函數被呼叫的時候, 函數內部會在自己產生一個 Execution context (執行環境)
  • 放入 Execution Stack


Execution Stack

  • 在Stack最上方的就是先執行的
  • 以上圖來看, 第一步驟是先透過 compiler/ interpreter 去翻譯 js code, 在 global execution context中, 先產生 global object 與 this
  • 接下來將 function b & function c 放入記憶體中並給定完值
  • 執行到 a() 時, 先將 function a 的 execution context 產生出來並放入 execution stack的最上方
  • 在 a() 的 execution context (執行環境) 中, 執行到 b()
  • 然後暫停目前執行的工作
  • 產生 b() 的 execution context (執行環境), 並放入 execution stack 的最上方
  • b() 沒做啥事情, 跑完後將 stack 中的 b() pop 出去
  • 回到 a(), a() 中執行完 b() 後也沒其他事情, 將 stack 中 a() pop 出去
  • 回到 Global Execution context
變數環境
  • 描述變數的生命週期, 還有在記憶體中, 變數們彼此的關聯
  • 可以單純想像成 Where is the variable ?
Lexical Environment
  • 程式碼所寫在的位置
Primitive Type (非物件的單值)
  • undefined
  • null
  • boolean
  • String
  • Number
    • 只有浮點數
    • 可以假裝是整數
  • symbol
    • es6
Operator
Comparison Operator
  • console.log(3 < 2 < 1) -> true
    • precedence 相同, 所以看 associativity -> left to right
    • 3 < 2 --> false
    • false < 1
    • 強制轉型
    • 0 < 1 --> true
  • console.log(1 < 2 < 3) -> true
    • 1 < 2 --> true
    • true < 3
    • 強制轉型
    • 1 < 3 --> true
  • console.log(3 == '3') -> true
    • 強制轉型
    • left to right
    • 3 == 3 --> true
  • undefined & null 的強制轉型可能會跟預期中的不一樣!
  • 99%的情況下請使用 === , 而非 == , 除非你有特定目的, 否則不推薦 
  • === / Object.is(a, b)
    • +0 === -0 --> true
    • Object.is(+0, -0) --> false
Existence & Boolean
  • 不存在的東西透過 Boolean 強制轉型都會轉成 false
    • Boolean(undefined) -> false
    • Boolean(null) -> false
    • Boolean("") -> false
  • 在 if () 內的 statement 都會被嘗試轉為 Boolean
  • var a = 0
    • if (a) { console.log('a exists') } 這句會失敗
    • 因為 Boolean(0)會被轉成 false
    • 如果a有機會變成0的話, 正確寫法 if (a || a=== 0)
  • undefined || 'hello'
    • 回傳可以產生 true 的值
    • 因為 Boolean(undefined) -> false
    • Boolean('hello') -> true
    • 所以回傳 true 的那一個
    • "" || 'hello' -> 'hello'
    • 0 || 1 -> 1
    • null || 'hello'
Object & functions
  • Object 0x001
    • reference 0x002 primitive property (number, boolean, .. etc)
    • reference 0x003 Object property
    • reference 0x004 methods (function inside a object called methods)
    • 建立物件的時候, 建議使用 object literal (物件實體), 不要用 new Object()
  • Namespace 命名空間
    • 可以想像成是維持變數與 functions 不被其他人感染的容器
First Class Function
  • 你可以對其他types做的事情, 一樣可以對 function 做
    • 把 function 指派給一個變數
    • 把 function 當成參數傳來傳去..等等
  • function 就是物件


expression

  • a unit of code that results in a value
  • 產生一個值, 不必存在變數內, 必定會回傳一個值
    • a = 3 ---> return 3;
      • = 是 運算元, 會回傳值
    • 1 + 2 ----> return 3;
      • + 是運算元, 會回傳值
    • 1 === 1
      • === 是運算元, 會回傳值
statement
  • 不會回傳值的陳述句
    • if () { ... }
by value

  • a = 3, b= a
    • 純值的 assign 會是透過 copy 那個純值, 然後再 assign 給 b 
by reference

  • a=Object, b=a
    • 物件的話, 是把b也指向原本a指向的記憶體位置
Object就算透過參數的方式傳到 function 內, 也仍然是傳 reference, 所以 function 內如果有改變傳入參數 Object 的值, 原本的 Object 值也會跟著改變
上圖例, 因為 = 這個運算元發現, 要設定新的物件給 c, 所以會把 c 指向新的記憶體位置
所以輸出的c, d分別為 { greeting: 'howdy' }, { greeting: 'Hola' }
!! 注意: 因為 { greeting: 'howdy' } 不是已存在的物件, 所以要分配新的記憶體位置 !!

setname 的 this 會是指向到 global object, 也就是 window, 即便 setname function 是在 c 的 log function 內!

arguments 包含了所有你傳入 function 內的值
spread (...) 在 function 內剩下的參數, 都可以被放到 ...後面接的變數名稱內

  • function greet(a, b, c, ...other) { .. }
    • greet('Neil', 'Wang', 'En', 'address')
      • other => ['address']












留言

張貼留言

這個網誌中的熱門文章

[MySQL] schema 與資料類型優化

圖片
選擇優化的資料類型 原則: 越小越好 因為會佔用最小的磁碟、記憶體與CPU快取。 越簡單越好 操作整數比操作字串代價低，因為字串排序規則 ex: 儲存ip應該用 unsigned int - 4 bytes, 用 varchar 會用到 15 bytes 儲存時間應該用 mysql 內建的時間類型 DATETIME, TIMESTAMP可以儲存相同資料：時間日期，精確到秒 TIMESTAMP 只用 DATETIME 一半的儲存空間，根據時區自動變化 TIMESTAMP 允許的時間範圍比 DATETIME 小很多 避免 NULL 在 innodb 上有單獨的 bit 儲存 null 值，但在 myisam，但還是盡量避免 整數類型 tinyint - 8 bits smallint - 16 bits mediumint - 24 bits int - 32 bits bigint - 64 bits 如果是有正負數的，會因為 1 bits 會用來記錄正負，故範圍為 -2^(n-1) ~ 2^(n-1) unsigned 的範圍則是 -2^n ~ 2^n MySQL 可以為整數指定寬度，例如 INT(11)，其實沒什麼意義，11只是表示與 MySQL 相關工具(client 端的 cli) 用來顯示的長度，對於儲存與計算來說，INT(1)與INT(20)是一樣的。 實數類型 decimal(M,N) - M: 最大位數, N: 小數點後有幾位 ex: decimal(18, 9) => 9位數字.9位數字，總共使用 9 個 bytes float => 4 bytes double => 8 bytes decimal的計算雖然比較精確，但需要額外，但需要額外的空間與計算開銷，資料量較大時，可以用 bigint 代替 decimal，假設需要精準到萬分之一，則可以將數字*1百萬，將結果存在 bigint 內，可以同時避免福點數計算不精準與 decimal 計算代價太高。 字串類型 VARCHAR row_format=fix，這樣就都會固定長度，沒意義 varchar會需要額外1~2 bytes記錄長度, 假設用 latin1 charset, varchar(10) => 11 bytes, varchar(1000) => 1002...
閱讀完整內容

[翻譯] 介紹現代網路負載平衡與代理伺服器

圖片
原文(Source): https://blog.envoyproxy.io/introduction-to-modern-network-load-balancing-and-proxying-a57f6ff80236 什麼是網路負載平衡 (network load balancing) 與 代理伺服器的代理行為 (proxying)? 維基百科是這樣定義負載平衡的 > 負載平衡藉由工作量分配到多台運算資源, 例如: 主機, 主機叢集, 網路連結, CPU,  硬碟等. > 負載平衡盡量最佳化資源的使用, 最大化每個最大化每個資源的吞吐量(生產能力), 最小化反應時間, 避免單一資源工作量過重 > 使用多個資源來當負載平衡來提升可靠與高可用而不是單一個資源 > 負載平衡總是使用獨立的軟體或硬體, 例如獨立的 multilayer switch, 或是 DNS主機的程式 上面的定義用於各資訊領域的各方面, 不單單只有網路而已. 作業系統使用負載平衡在實體處理器去分配運算任務, 容器編排服務像是K8S使用負載平衡在不同的主機叢集中去分配任務, 而網路負載平衡器則是將網路上進來的任務分配給可用的後端主機們. 剩下的文章主要都是講解關於網路負載平衡. 圖1 圖1展示了從應用層來看網路負載平衡. 許多的用戶端(Client)透過只需要向 load balancer 請求, load balancer就會將這些request, 也就是上述提到的任務分配給可用的後端服務. Load balancer位於Client 與後端之間執行幾個重要的任務: 服務發現 (Service discovery) 後端的服務在系統的哪裡, 他們的IP(位置)是什麼? (也就是load balancer該如何與後端主機溝通) 服務的狀態檢查 (Health checking) 現在的服務是否是可接受請求的 負載平衡 (Load Balancing) 該用什麼樣的演算法去平均將request分配給可用的服務 在分散式系統使用負載平衡主要有幾個好處: 主機抽象 (Naming abstraction): 每個client 不需要知道每個後端服務在哪, 只需要利用預先定義好的機制向負載平衡器...
閱讀完整內容