JavaScript 筆記 07/21/2018
===
###### tags: `JS` `筆記`

## Callback & Event
參考 http://dreamerslab.com/blog/tw/node-js-events/
> Javascript 是一個事件驅動的語言
>
以下的 code

function do_a() {
    setTimeout(function() {
        console.log('do_a');
    }, 1000);
}

function do_b() {
    console.log('do_b');
}

function do_c() {
    setTimeout(function() {
        console.log('do_c');
    }, 1000);
}

do_a();
do_b();
do_c();

結果

do_b
do_a
do_c

我的理解是
在一執行的時候
`do_a` `do_b` `do_c` 都'同時'被call
在 1 秒後, `do_a` 跟 `do_c` 裡面延遲 1 秒的 `console.log` 才被'同時'執行到
~~若有誤請通知更正~~

那如果今天要確保`do_a`做完後才依序跑`do_b` `do_c`呢
可以利用`callback`的概念, 把`do_b`這個function傳進去`do_a`
參考以下code

function do_a (callback) {
    setTimeout(function() {
        console.log('do_a');
        
        callback && callback();
    }, 1000);
}

function do_b (callback) {
    console.log('do_b');
    callback && callback();
}

function do_c () {
    setTimeout(function() {
        console.log('do_c');
    }, 1000);
}

do_a(function () {
    do_b(function () {
        do_c();
    });
};

結果

do_a
do_b
do_c

但是從上方的code
我們知道 為了確保某個function在某個function執行後才執行
需要寫成 function() {} 的巢狀結構 ~~實在是太麻煩~~
而`Node.js`有提供另一個簡潔又好懂的寫法
請參考 http://dreamerslab.com/blog/tw/node-js-events/

## Arrow Functions
參考 http://es6-features.org/#Constants
這裡詳細比較了`javascript`新語法跟舊語法
其中在`Statement Bodies`介紹了一個很酷炫屌的語法

const string1 = 'This';
const string2 = ' is a ';

setTimeout(function(p1, p2) {
    console.log(p1 + p2 + 'traditional function');
}, 1000, string1, string2);

setTimeout((p1, p2) => {
    console.log(p1 + p2 + 'ARROW FUNCTION!');
}, 1000, string1, string2);

結果

This is a traditional function
This is a ARROW FUNCTION!

## Value & Reference
參考 https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0
以及 https://www.ecma-international.org/ecma-262/9.0/index.html#sec-primitive-value

> When we assign these variables to other variables using =, we copy the value to the new variable. They are copied by value.
> Variables that are assigned a non-primitive value are given a reference to that value.
>
以下直接實驗測試一波

var p = 666; // Primitive value
var np = {value: 777}; // Non-primitive value (object)

var test1 = p;
var test2 = np;

test1 = 'test1';
test2.value = 'test2';

console.log(p);
console.log(np.value);

結果
'''
666
test2
'''

由上面可以得知`test2`只是`np`的`reference`
而不是一個新的`object`

## Scope

### Variable

{
    var x = 1;
    {
        var x = 2;
        
        console.log(x);
    }
    console.log(x);
}
console.log(x);

{
    const x = 1;
    {
        const x = 2;
        
        console.log(x);
    }
    console.log(x);
}
console.log(x);

這兩個的差異在`w3school`就有提到
https://www.w3schools.com/js/js_let.asp

另一個比較是

var x = 1;
{
    var x = 2;
}
console.log(x);

var x = 1;
function func ()
{
    var x = 2;
}
func();
console.log(x);

差異在於`block scope`和`function scope`的不同
要了解更多請看 https://edgecoders.com/function-scopes-and-block-scopes-in-javascript-25bbd7f293d7

### function

{
    // Layer 1
    function x () {
        return 1;
    }
    
    {
        // Layer 2
        function x () {
            return 2;
        }
        
        console.log(x());
    }
    console.log(x());
}
console.log(x());

這個例子我目前也尚不能理解
癥結點在於 `Layer 2`的`function x()`無法複寫`Layer 1`
可是`Layer 1`卻又能複寫`global`的

所以我又寫了另一個測試code

// Global

{
    // Layer1
    
    {
        // Layer2
        function x()
        {
            return 2;
        }

        {
            // Layer3
            function x()
            {
                return 3;
            }

            {
                // Layer4
                function x()
                {
                    return 4;
                }

                console.log(x());
            }

            console.log(x());
        }

        console.log(x());
    }

    console.log(x());
}

console.log(x());

結果

4
3
2
2
2

我的理解是
`function`的定義的複寫規則是
若寫了一個`function`
如果上一層`block scope`沒有該`function`的定義
則會從上層`block scope`額外新增該`function`的定義, 一直往上層新增定義到`global`
如果上一層有定義過, 則不複寫

## Vue.js

官方介紹: https://vuejs.org/v2/guide/index.html
目前我的了解是拿來寫前端
在官方一開始的介紹中, 就有提供很多 code 可以測試
只要簡單引入腳本即可使用 Vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

目前也正在邊寫邊看官方教學中

> [name=LJP-TW] [time=Sun, Jul 22, 2018 12:07 AM]