學習JavaScript有段時間了，一直對this的理解模棱兩可，查看了很多資料弄清楚了一起分享下

this的調用根據調用的上下文來確定，總結大概分為4種方式

1.函數方式調用

window.a='window'
function pay(){
    console.log(this.a)
}
pay()//window

在JavaScript中函數直接調用時，也是this的默認調用方式，this指向全局對象
再看一看回調函數的例子

window.a='window'
function pay(){
    function callback(){
        console.log(this.a)
    }
    callback()
}
pay()//window

在JavaScript中回調函數一直是一個比較煩人的問題，如果不對this做些處理this，不會指向函數對象本身
通常會定義var self=this，使用self來修正this的指向

2.通過對象的方式掉用

window.a='window'
var obj={
    a:'obj',
    getA:function(){
        console.log(this.a)
    }
}
var getA=obj.getA;
obj.getA()//obj
getA()//window

看上去2個調用方法應該都會返回obj，但第二個函數的this指向了全局對象
細想起來getA=obj.getA這種把obj中getA（）的引用賦值給了getA，其實本質上還是函數的調用

3.通過構造函數調用

window.name='window';
var Student=function(name){
    this.name=name;
}
var leo=new Student('leo');
console.log(leo.name)//leo

通過構造函數直接調用this直接指向對象本身，但也要注意一個問題構造函數內如果返回一個對象，this會指向返回的對象

window.name='window';
var Student=function(name){
    this.name=name;
    return {
        name:'joy'
    }
}
var leo=new Student('leo');
console.log(leo.name)//joy

4.利用apply，call，bind實現this的硬綁定

開發中經常會用到這幾個函數，會改變調用函數的this指向
比如

window.a='window'
var obj1={
    a:'haha'
}
var obj2={
    a:'heihei'
}
var obj3={
    a:'welcome'
}
function say(){
    console.log(this.a)
}
say();//window
say.call(obj1);//haha
say.apply(obj2);//heihei
var say3=say.bind(obj3);
say3()//welcome

這3個函數傳入的第一個參數是一樣的，給調用函數提供一個this指向，可以隨意修改函數的this指向
可以用來借用別的函數的方法

//第一個例子
var A=function(name){
    this.name=name
    this.getName=function(){
        return this.name
    }
}
var B=function(){
    A.apply(this,arguments)
}
var b=new B('leo');
console.log(b.getName())//leo
//第二個例子
var obj={}
Array.prototype.push.apply(obj,[1,2])
console.log(obj)//{0:1,1:2,length:2}

利用apply可以直接使用其他函數定義的方法
再來說一說這3個函數的區別
apply與call使用方法類似，關鍵在于第二個參數apply需要傳入一個數組，而call需要把參數一個一個依次傳入
bind與這兩個方法的區別在于apply和call都會立即執行函數而bind（this）是給函數綁定this返回一個新的函數
目的是改造函數

5.this的丟失問題

把函數當做另一個函數的參數時都是引用函數的問題

window.a='window';
function callback(){
    var a='leo';
    console.log(this.a)
}
function pay(callback){
    callback()
}
pay(callback)//window