簡易呼叫（Simple Call）

當我們直接執行函式時，就是所謂的簡易呼叫（Simple Call），

以下會列出各種簡易呼叫（Simple Call）的範例：

函式

var myName = 'weiwei';

function callName() {
    var myName = '小明';
    console.log(this);
    console.log(this.myName);
};

callName();

該範例我們直接使用 callName() 來執行函式，

這就是所謂的簡易呼叫（Simple Call），

而此時的 this 是指向全域，所以會回傳全域中的 myName

立即函式

var myName = 'weiwei';

(function(){
    console.log(this.myName);
    function callSomeone(){
        var myName = '小明';
        console.log(this);
        console.log(this.myName);
    };
    callSomeone();
})();

在該範例中，我們直接在立即函式中執行 callSomeone() 也是屬於 Simple Call，

因此在 callSomeone() 的 this 也是指向全域，所以也會回傳全域中的 myName

閉包

var myName = 'weiwei';

function myMoney(money){
    return function(update){
        var myName = '小明';
        money += update;
        console.log(this.myName, money);
    }
}

const weiMoney = myMoney(200);

weiMoney(50);  // weiwei 250

該範例中，我們直接使用 weiEasyCard(50) 來執行 easyCard(base) 內 retuen 的函式，

這也屬於 Simple Call，因此這邊的 this 也是指向全域

callback function

var myName = 'weiwei';

function myMoney(callback){
    var myName = '小明';
    const money = 100;
    return callback(money);
}

myMoney(function(money) {
    console.log(this.myName, money + 100);  // weiwei 200
});

範例中 callback function 是將函式作為參數帶入 myMoney() 中，

使用 myMoney() 來執行帶入的函式，而這也是屬於 Simple Call

callback function 除了自己寫之外，

在 JavaScript 中有許多內建的 callback function，

以 forEach 為例：

var myName = 'weiwei'

const a = [1, 2, 3];

a.forEach(function(i){
    var myName = '小明';
    console.log(this.myName, i);
});

當我們在 VS Code 中，輸入 forEach 時，

能看見提示中有寫在 () 要插入一個 callbackfn

因為 forEach 中 () 內的函式是屬於 callback function，

而使用 callback function 是 Simple Call，

因此該函式中的 this 也是指向全域

接著我們來看 setTimeOut()

var myName = 'weiwei'

var family = {
    myName: '小明',
    callName: function(){
        setTimeout(function(){
            console.log(this.myName);
        }, 1000);
    }
};

family.callName();  // weiwei

雖然我們在 family 下執行，但 setTimeout 內的函式為 callback function，

因此這時的 this 也會指向全域，

此時我們不會看函式在哪裡執行，而是看如何執行，

當像這種函式中要執行另一段函式時，但想要正確的取得外層的 小明 時，該怎麼做呢？

var myName = 'weiwei'

var family = {
    myName: '小明',
    callName: function(){
        var self = this;  // vm, that
        setTimeout(function(){
            console.log(self);
            console.log(self.myName);
        }, 1000);
    }
};

family.callName();

此時我們大多會在執行 this 函式的外層，

宣告變數來將 this 賦予到該變數中，

而該變數通常名稱為 self 、 vm 、 that 根據開發者習慣而定，

隨後在使用該變數取值，

在範例中，我們將 this 賦予到 self 中，

此時的 self 是指向物件本身，

因此使用 self.myName 會取得物件中的 小明，

以上就是今天 Simple Call 的講解，感謝觀看！！