# <font class="h2">this 簡易呼叫simple call</font>

###### tags: `javascript`
<style>
.h2 {
background: linear-gradient(135deg,#fff,#537479) ;
color: #537479;
display:block;
padding: 6px 5px;
border-radius: 4px;
}
.h3 {
background: linear-gradient(180deg,#fff 50%,#c9d5d4) ;
color: #537479;
display:block;
padding: 6px 5px;
border-bottom: 3px solid #537479;
}
.h4 {
color: #537479;
font-weight:bold;
font-size:1.1em;
}
</style>
:::info
盡可能不要使用simple call的this
simple call的this會指向全域
:::

var myName = '真心話大冒險'
function callName(){
    console.log(this,this.myName);
}
callName();//'真心話大冒險'

這裡直接呼叫`callName`的方式就是simple call
simple call不是看你呼叫的位置，而是依據呼叫方式而定
:bulb:簡單來說，只要看到一個函式是直接執行就屬於simple call
<br>

### <font class="h4">範例一-立即函式:</font>

var myName = '真心話大冒險';
function callName() {
    console.log(this, this.myName);
}
(function () {
    console.log(this.myName);
    function callSomeone() {
        console.log(this.myName);
    }
    callSomeone();
})();
//真心話大冒險
//真心話大冒險

這裡立即函式裡面並沒有定義`myName`，所以`this.myName`會直接調用外層的全域的`真心話大冒險`
立即函式裡面還有一個`callSomeone()`函式，這裡直接呼叫`callSomeon()`方式也是屬於simple call
<br><br>

### <font class="h4">範例二-閉包形式:</font>

var myName = '真心話大冒險';
function callName() {
    console.log(this, this.myName);
}
function easyCard(base) {
    var money = base;
    var name = '悠遊卡';
    return function(update){
        money = money + update;
        console.log(this.myName, money);
    }
}
var MingEasyCard = easyCard(100);
MingEasyCard(10);//真心話大冒險 110

閉包是在一個函式內再定義另一個函式，並且去取用它外層函式的變數。
這裡`MingEasyCard(10)`直接調用閉包裡面的函式，也屬於simple call
<br><br>

### <font class="h4">範例三-callback function形式:</font>

var myName = '真心話大冒險';
function callName() {
    console.log(this, this.myName);
}
function myEasyCard(callback){
    var money = 100
    return callback(money)
}
myEasyCard(function(money){
    console.log(this.myName,money + 100)
});//真心話大冒險 200

callback就是將一個函式傳到另外一個函式內，並且在另外一個函式內執行
那麼在另一個函式執行的`callback(money)`依然是屬於simple call，那麼simple call的this就會指向全域。
這裡`this.myName`的指向依然會指向全域的`真心話大冒險`
<br><br>

### <font class="h4">範例四-內建callback函式:forEach形式:</font>

var myName = '真心話大冒險';
function callName() {
    console.log(this, this.myName);
}
var a = [1,2,3];
a.forEach(function(i){
    console.log(this.myName,i);
})
//真心話大冒險 1
//真心話大冒險 2
//真心話大冒險 3

`function(i)`是屬於callBack function也是屬於simple call，this就會指向全域
<br><br>

### <font class="h4">範例五:</font>

var myName = '真心話大冒險';
function callName() {
    console.log(this, this.myName);
}
var family = {
    myName:'小明家',
    callName:function(){
        setTimeout(function(){
            console.log(this.myName)
        },1000);
    }
}
family.callName();//真心話大冒險

先前提到當我使用像`family.callName()`這種形式執行時候，後面`callName()`的this會指向`family`物件。
但是`faimly`物件裡面`callName`屬性會執行另外一段函式，`setTimeout function`依然屬於callback function，所以這一段依然是屬於simple call ，所以它的this依然是指向window
:bulb:我們不用看這個函式在哪裡執行，重點是它是怎麼去執行它
<br>

var myName = '真心話大冒險';
function callName() {
    console.log(this, this.myName);
}
var family = {
    myName:'小明家',
    callName:function(){
        var self =this;
        setTimeout(function(){
            console.log(self.myName)
        },1000);
    }
}
family.callName();//小明家

如果希望this不要指向全域，而是指向`family`物件
在裡面函式`setTimeout`的外層定義一個變數去指向this:`var self =this`
並且原本要執行的`this.myName`套用這個變數`self.myName`，這樣就可以取到外層的這個物件(`family`)
:bulb:`slef`也會有很多不同取名，很多情況也可以取作`vm`，`that`，看開發者習慣而定