在講解 this 之前，先來看一段程式碼，觀察它的執行過程

var myName = 'weiwei';

function callName() {};

callName();

我們可以看見在進入 callName() 這段函式時，

會自動產生 this，此時的 this 是指向全域 window

此時我們在函式中使用 this.myName 來取用全域中的 myName

var myName = 'weiwei';

function callName() {
    console.log(this.myName);
};

callName();

我們能看見會回傳全域中的 myName，

因為此時 this 是指向全域的關係，

所以才會顯示全域中的 myName，

而今天要來介紹關於 this 的指向

this

當我們在執行函式時，this 都會自動產生，

它是一個保留字

我們可以在全域或是函式的執行環境中去執行它

this 基本觀念

• 每個執行環境都有自己的 this
• this 與函式宣告方式沒有關聯性，只和呼叫方式有關
• 在嚴謹模式下，簡易呼叫會有很大的改變

影響函式 this 的調用方式

1. 物件的方法調用（最常運用 this 的方法）
2. 簡易呼叫（simple call）
3. call, apply, bind 方法
4. 嚴謹模式
5. DOM 事件處理器
6. 箭頭函式

今天針對物件的方法調用進行說明

物件的方法調用

在物件的方法調用中是最常用的，

這邊只須記下兩個重點就能掌握物件的方法調用

1. this 與函式宣告方式沒有關聯性，只和呼叫方式有關
2. 物件的方法調用時，只需注意在哪一個物件下呼叫

var myName = 'weiwei';

function callName() {
    console.log(this, this.myName);
};

var family = {
    myName: '小明',
    callName: callName,
}

family.callName();

此時能看見 this 是指向 family 這個物件，

而 myName 的結果為 小明，

因此可以了解 this 會指向前面調用它的物件

我們在看一個範例，當我們使用二階以上的物件時，this 的指向會如何

var myName = 'weiwei';

function callName() {
    console.log(this, this.myName);
};

var family = {
    myName: '小明',
    callName: callName,
    wei: {
        myName: '威威',
        callName: callName,
    },
};

family.callName();
family.wei.callName();

我們可以看見在呼叫 family 內的函式 callName() 時，

this 是指向 family 這個物件，

而在呼叫 family 的屬性 wei 當中的函式 callName() 時，

this 是指向 wei 這個物件

接著我們來看最後一個範例，我們將 family.callName() 賦予到變數中，看結果如何

var myName = 'weiwei';

function callName() {
    console.log(this.myName);
};

var family = {
    myName: '小明',
    callName: callName,
};

var callName = family.callName;
callName();

會看見結果為 weiwei，

此時的 this 會指向全域，

因為 callName() 是直接在全域中執行，而不是在物件中執行，

因此 this 就會指向全域，而不會指向物件，

以上就是物件的方法調用中 this 的指向，我們明天見！！