Javascript中的this解析

学习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