理解this

JavaScript中的this是其灵活性的表现，同时也因为this的多变性与其他语言的不一致，也成为JavaScript的一个难以理解的地方。因此在这里总结一下this常见的情况，以加深记忆

JavaScript中的this表示执行上下文对象，有以下几种绑定规则：

1.默认绑定

JavaScript中规定，函数中的this默认会和window对象绑定（在严格模式下默认绑定会失效）

var name = 'yip'
function a(){
    console.log(this.name);
}
a();//yip

2.隐式绑定

当函数的调用位置有另外一个上下文对象时，this会和这个上下文对象绑定，简单来说就是和函数的调用者绑定

var name = 'yip';
function a(){
    console.log(this.name);
}
var obj = {
    name:'xie',
    a:a
}
obj.a();//xie

隐式绑定有两种特殊情况会导致隐式绑定失效

var name = 'yip';
function a(){
    console.log(this.name);
}
var obj = {
    name:'xie',
    a:a
}
var obj1 = {
    name ： 'zhan'
}
var b = obj.a;
b();//yip,这是第一种情况，这时的b只是取得了obj.a的引用，执行时上下文还是没有绑定
obj.a();//xie
(obj1.a = obj.a)()//yip，这里是第二种情况，间接引用，但是执行上下文还是没有绑定

在计时器setTimeout中，以及把函数作为参数传递到另一函数中，也会发生隐式丢失,在这种情况下，相当于隐式赋值。

var name = 'yip';
function a(){
    console.log(this.name);
}
var obj = {
    name:'xie',
    a:a,
    b:function(){
        setTimeout(function(){
            console.log(this.name);
        },1000)
    }
}
setTimeout(obj.a,1000);//yip
function argFunc (func){
    func();
}
argFunc(a);//yip
obj.b();//yip

3.显示绑定

JavaScript中有3个特殊的方法。call、apply、bind，可以显式指定函数的执行上下文

var name = 'yip';
function a(){
    console.log(this.name);
}
var obj = {
    name:'xie',
    a:a
}
var obj1 = {
    name ： 'zhan'
}
obj.a();//xie
a.call(obj);//xie
a.apply(obj);//xie
var b = a.bind(obj);
b();//xie

bind 与 apply和call 作用相似，但bind返回一个函数，可以在后来被调用，其执行环境由bind绑定；

ES5以下实现bind

function mybind(func,context){
    if(func.bind){
        return func.bind(context);
    }else{
        return function(){
            func.apply(context);
        }
    }
}

构造函数里的this

JavaScript中规定，任何函数都可以用new操作符实例化对象，使用new操作符之后，函数就变为构造函数，其中的this指向新建的对象。

使用new操作符时，在JavaScript机制中执行下列几步操作

1. 新建一个空对象；

2. 执行函数内容；

3. 把this指向新建的对象；

4. 返回一个对象，可能是函数中返回的也可能是新建打的对象

   function a(){
   this.name = ‘yip’;
   this.sayName = fucntion (){
   console.log(this.name);
   }
   }
   var obj = new a();
   obj.sayName();//yip

一个简单的验证方法是看函数调用的前面是否是一个引用对象。

事件处理器中的this

在事件处理器中的this指向事件发生的对象。

var name = 'yip';
var mybtn = document.getElementById('mybtn');
function callback (){
    console.log(this);
}
mybtn.addEventListener("click",callback)//button

ES6箭头函数

在ES6中，新增箭头函数，在箭头函数中不使用上面所说的任意一种绑定规则，而是根据外层作用域的this来决定this（函数内或者是全局）。

这可以解决在函数中使用setTimeout发生的隐式丢失，ES6之前的解决方案是通过声明一个变量存储this来实现

var self = this;

ES6中是：

var name = 'yip';
function a(){
    console.log(this.name);
}
var obj = {
    name:'xie',
    a:a,
    b:function(){
        setTimeout(()=>{
            console.log(this.name);
        },1000)
    }
}
obj.b();//xie

因此常把ES6的箭头函数用于事件处理器和计时器中

var name = 'yip';
var mybtn = document.getElementById('mybtn');
callback = () =>{
    console.log(this);
}
mybtn.addEventListener("click",callback)//window