this
看到這個是不是很頭痛???
但別怕 接著往下看

this 基本觀念

• 每個執行環境都有屬於自己 this的關鍵字
• this 與 函式如何宣告沒有關連性，僅與呼叫方法有關
• 嚴格模式下，簡易呼叫會有很大的改變

影響函式 this 的調用方式

• 作為物件方法(最常運用this的方法)
• 簡易呼叫(絕大多數的呼叫方式)
• bind,apply,call方法
• new
• DOM 事件處理器
• 箭頭函式(ES6)

這裡只要記住兩個重點

• this 與 函式如何宣告沒有關連性，僅與呼叫方法有關
• 物件的方法調用時，只需關注是在哪一個物件呼叫

最常見的 this：物件的方法調用

function call(){
    // 這裡的 this 指向 family此物件
    console.log(this,this.name);
}
var family = {
    name: '皮傑先生',
    call: call,
}
family.call(); // 皮傑先生

function call(){
    console.log(this,this.name);
}
var family = {
    name: '皮傑先生',
    call: call,
    member:{
        name:'小雞公主',
        call:call,
    }
}
family.call(); // 皮傑先生
family.member.call(); // 小雞公主

var name = '全域變數';
var family = {
    name: '皮傑先生',
    call: function(){
        console.log(this.name);
    },  
}
var callName = family.call;
// 在全域呼叫 所以 this 指向全域
callName(); // 全域變數 在全域呼叫 所以 this 指向全域

this：簡易呼叫
simple call 的 this 皆指向 window
但要注意 並非是在全域的物件下去執行函式(window.callName())

var name = '全域變數';
function callName(){
    // this 指向 window
    console.log(this,this.name); // 全域變數
}
callName();
// 盡可能不要使用 simple call 的 this

// IIFE
var name = '全域';
(function(){
    console.log(this.name); // 全域
    function callName(){
        console.log(this.name); // 全域
    }
    callName();
}());
// 這裡執行 simple call 並非 window.callName(); 這樣執行

// 閉包
var name = '321'
function storeMoney(init){
    var money = init || 100;
    var name = '123'
    return function(price){
        money = money + price;
        console.log(this.name , money); // 321 600
    }
}
var myMoney = storeMoney(100);
myMoney(500); // simple call 直接調用

// callback function
var name = '皮傑先生';
function card(fn){
    var money = 100;
    fn(money);
}
card(function(item){
    console.log(this.name, item + 100); // 皮傑先生 200
})

var name = '皮傑先生';
var a = [1,2,3];
// forEach 後面也是 callback function
a.forEach(function(i){
    console.log(this.name , i);
})

最後再看一個例子

var name = '小雞公主';
var family = {
    name : '皮傑先生',
    callName : function(){
        setTimeout(function(){
            console.log(this.name); // 小雞公主
        },1000);
    }
}
family.callName();
// setTimeout 裡的函式為 callback function
// 我們不用管 函式在哪執行，只需注意它是怎麼去執行

若想要取得物件的name
可以宣告一個 var vm = this;

var name = '小雞公主';
var family = {
    name : '皮傑先生',
    callName : function(){
        var vm = this;
        setTimeout(function(){
            console.log(vm.name); // 皮傑先生
        },1000);
    }
}
family.callName();

那今天的介紹就到這裡
若有任何問題 或 內容有誤
都可以跟我說唷