# 為你自己學 JavaScript ／ 高見龍

{%hackmd @ModernWeb/HkqZxb98v %}

### [簡報下載](https://s.itho.me/modernweb/2020/Slides/d102.pdf)
> 共筆從這開始
> 入門以上，中級未滿

###### tags: `MW20` `語言與開發` `JavaScript`

## 延伸閱讀
[為你自己學 Git](https://gitbook.tw/)
[為你自己學 Ruby on Rails](https://railsbook.tw/)
[為你自己的小孩學程式設計 ](https://ithelp.ithome.com.tw/users/20065770/ironman/3808)

## 技術篇
> 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](https://www.youtube.com/watch?v=8aGhZQkoFbQ)
{%youtube 8aGhZQkoFbQ %}

### 物件導向
* 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](https://www.ecma-international.org/publications/standards/Ecma-262.htm) (硬梆梆的官方文件)
- [MDN web docs](https://developer.mozilla.org/zh-TW) (相對好讀，有範例)