為你自己學 JavaScript ／ 高見龍

簡報下載

共筆從這開始
入門以上，中級未滿

tags: MW20 語言與開發 JavaScript

延伸閱讀

為你自己學 Git
為你自己學 Ruby on Rails
為你自己的小孩學程式設計

技術篇

JavaScript 那甚麼爛設計

世界上只有兩種語言，一種是被罵到臭頭，一種是沒人用
就算要罵，也要是熟悉它由愛生恨，拳拳到肉的罵。

執行環境 (Execution Context)

• 全域物件：
  • 每次開始執行的時候會有的一個物件
  • 網頁： window
  • Node: global

  
  ​​​​var a = 1;
  ​​​​console.log(a == window.a) // true
  

堆疊 (Stack)

• 執行環境就像泡泡一樣，會一直往上疊。
• 不能無限的往上疊(EX. recursive) ==> Stack Overflow 堆疊溢位。

單執行緒

• JavaScript一次只能做一件事，他是單執行緒的語言。

• Ex1

  
  
  ​​​​console.log(1);
  ​​​​console.log(2);
  ​​​​console.log(3);
  

  Output: 1 2 3

• Ex2

  
  
  
  
  
  ​​​​console.log(1);
  ​​​​setTimeout(
  ​​​​    function(){console.log(2);},
  ​​​​    3000
  ​​​​);
  ​​​​console.log(3);
  

  Output: 1 3 2

  • 2會比3還要後面才出現
  • JavaScript 本身沒有 timer，而是去調用瀏覽器內建的計時器。
  • setTimeout()是叫程序3秒後再出來，這是一個設定的動作，他不會執行3秒鐘那麼久。

• Ex3
  如果改成setTimeout只有0秒，那是不是就會跑出 1 2 3 了呢?

  
  
  
  
  
  ​​​​console.log(1);
  ​​​​setTimeout(
  ​​​​    function(){console.log(2);},
  ​​​​    0
  ​​​​);
  ​​​​console.log(3);
  

  Output: 1 3 2
  實際上當 setTimeout 進去後就分離了，可見上面 ex2 的最後一條

Call Stack vs. Event Queue

• 只要 Stack 上面還有事情要做，Event Queue 就繼續等，等到 Stack 結束 Event 才會做事。
• Ex

  
  
  
  
  
  
  
  
  ​​​​console.log(1);
  ​​​​setTimeout(
  ​​​​    function(){console.log(2);},
  ​​​​    0
  ​​​​);
  ​​​​console.log(3);
  ​​​​while(1){
  ​​​​    //發呆 無限迴圈
  ​​​​}
  

  • 那個2永遠不會出現，因為Stack上面一直在做事。
• Philip Roberts - event loop
  
  Image Not Showing Possible Reasons

  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported

  Learn More →

物件導向

• Javascript 沒有類別。用prototype下去做的東東。

function heroCreator(name, action){
    // wait for implemantation
}
const goku = new heroCreator('悟空', '龜派氣功');

• 所有物件都有__proto__屬性。
• Prototype Chain 原型鏈。
• 函數也是物件，每個函數都有prototype屬性。

new做了甚麼事

• 在泡泡裡面先建立一個空的物件。
• 把這個空物件的__proto__屬性指向heroCreator的物件。

function heroCreator(name, action){
 this.name = name
 this.action = action
}
heroCreator.prototype.attack = function() {
    console.log(`${this.name}使出絕招${this.action}`);
}
const goku = new heroCreator('悟空', '龜派氣功');
goku.attack();    // 找不到attack，會往上找prototype

奇怪的語法

執行順序

先乘除後加減，由左至右

• Ex1

  ​​​​console.log(6 / 2 * 3);
  

  Output: 9

• Ex 2

  ​​console.log( 9 / 2 * 3);
  

  Output: 13.5

• Ex3

  ​​​​console.log(1 < 10 < 100) ;
  

  Output: True

• Ex4

  ​​​​console.log(100 < 10 < 1) 
  

  Output: True
  100 < 10 => false。執行優先順序一樣，由左至右執行
  console.log(false < 1)
  false 就會被強制轉型轉成0 (Javascript Corecion)。所以就合理了。

NaN

• NaN 是一種數字, 用來表達「不是數字」或「無效的數字」

console.log(NaN === NaN)

Output: false
規格就這樣說R
x 或 y 是 NaN 一律回傳 false

等號

• ==
  • 只會比較值，型別不一樣會做轉型。
  • == 型別一樣會去做 ===
• ===

自我成長篇

做學問的方式

大部分的技術被發明出來，
是要解決特定問題的，要知道技術想解決什麼問題才去用它

要學新技術時，先想想自己是要解決什麼問題
學從難處學，用從易處用

有時別人寫的不一定是對的，要查詢其他更權威的資料或查看原始碼
推薦參加IT鐵人賽，不管做的東西是難的還是簡單的，寫作的過程是在跟自己對話

技術文件舉例：

• Standard ECMA-262 (硬梆梆的官方文件)
• MDN web docs (相對好讀，有範例)