【Day27】this - 简易呼叫（Simple Call）

简易呼叫（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();