【this】谈一下js中this的指向和箭头函数的特殊情况

this的指向一直都是js理解中比较困难的部分，这次把遇见的情况都展示出来；另外ES6新增的箭头函数不属于这个规律，特殊看待。

this的指向 大致分为以下几种情况

1.普通函数 --- this指向函数的调用对象

function f() {  
    var user = 'XX';  
    console.log(this.user);  //undefined
    console.log(this);  //window
}

f();

这里f 的调用等同于window.f(); 所以f函数内部this指向的是window

2.对象方法中调用 ---- this 指向上级对象

var obj = {
    user:"xxx",
    fn:function(){
        console.log(this.user);  //xxx
    }
}
obj.fn();

【注1】这里要注意一点，就是在对象中可能有多层嵌套的对象，但是this指向的都是他调用地方的上级对象

var obj = {
    user:"xxx",
    b: {
        user: "bbb",
        fn:function(){
            console.log(this.user);  // bbb
        }
    }
    
}
obj.b.fn();

如上，虽然是在obj里面this调用，但是因为是在obj.b这个对象中，所以this指向的是 obj.b

---

【注2】注意不能只看上级对象，更关键的是调用对象

var obj = {
    user:"xxx",
    b: {
        user: "bbb",
        fn:function(){
            console.log(this.user);  // undefined
        }
    }
    
}
var f = obj.b.fn;
f()

如上，this其实是在f执行的时候调用的，这时候，f的this的调用对象是window,那么就可以理解window.user为undefined

【小结】在对象方法中的this的指向主要是看他最终调用的位置，它是由谁调用的，如果调用对象有多层，this指向的是this的上级对象

3.构造函数 --- this指向new出来的对象

function Fn(){
    this.user = "xxx;
}
var a = new Fn();
console.log(a.user); //xxx

new 的过程其实也是初始化了一个新的对象，然后用新的对象调用原先的函数 Fn.call(a) 这个情况跟下面这种情况类似了。

4.apply, call, bind 通过改变函数的调用对象而改变this的指向

function foo() {
  console.log('id:', this.id);  //42
}

var id = 21;

foo.call({ id: 42 });   //foo函数的调用对象变成了 {id: 42},所以this指向发生了变化

5.箭头函数this的指向 ---- this指向其定义时候的对象



图1： 箭头函数，this指向定义时候的对象，foo在window作用域下，所以this指向window; ===> 箭头函数的外层，foo函数的this就是window对象

---



图2：箭头函数，this指向定义时对象，那么由于foo.call 此时定义时候this指向了{ id: 42}对象，所以这里id输出的是42；====> 箭头函数的外层，foo函数的this就是{ id: 42} 对象

【小结】箭头函数的this在定义时所在的对象，其实质是因为箭头函数没有自己的this,用的是外层的this

---

【结尾】普通函数的this是看的是它执行时候的调用对象; 箭头函数的this与它的执行没有关系，在定义的时候就决定了；