大白话理解箭头函数this

     　　var obj1={
            num:4,
            fn:function(){
                num:5;
                var f=() => {
                    num:6;
                    console.log(this.num); 
                    //4 外层非箭头函数包裹，指向fn的作用域,即obj1
                    var f2=() => {
                        console.log(this.num);
                    //4 外层箭头函数包裹，向上寻找非箭头函数，指向fn的作用域,即obj1
                    }
                    f2();
                }
                f();
            }
        }
        obj1.fn();

　　　　function foo() {
            console.log(this) //window
            setTimeout(() => {
                console.log(this) // window
                console.log('id:', this.id);
            }, 100);
        }
        var id = 10;
        foo()

 　　　　var obj = {
            x:100,//属性x
            show(){
                console.log(this) // obj
                setTimeout(() => { 
                    console.log(this) // obj
                },1000);
            }
        };
        obj.show();

　　　　 function foo() {
            console.log(this)
            //本是window,但使用call更改了this，故为{id:100}
            setTimeout(() => {
                console.log(this)
            // 本应该指向foo的作用域，但由于外层非箭头函数使用call更改了this,故为{id:100}
                console.log(this.id); // 100
            }, 1000);
        }
        var id = 10;
        foo.call({id:100})

var obj={
    a:10,
    func:()=>{
        console.log(this);  //window
    },
    test:function(){
        console.log(this); // obj
        setTimeout(()=>{
            console.log(this); //obj
            this.func();
        },1);
    }
}
obj.test();

    　　 var obj = {
            func: function() {
                console.log('func')
            },
            say: function(){
                console.log(this) // obj
                setTimeout(()=> {
                    console.log(this) //obj
                    this.func() // ‘func’
                }); //
            }
        }
        obj.say(); 

    var obj = {
            func: function() {
                console.log('func')
            },
            say: () =>{
                console.log(this) // window
                setTimeout(function () {
                    console.log(this) //window
                    this.func() // 报错，window下没有func方法
                }); //
            }
        }
        obj.say();     

 　　　　var obj = {
            func: function() {
                console.log('func')
            },
            say: () =>{
                console.log(this); // window
                var b=() =>{
                    console.log(this) //window
                    this.func() // 报错，window下没有func方法
                } //
                b()
            }
        }
        obj.say();

 　　　　var obj = {
            say: function () {
                'use strict';  
                //  严格模式下,没有宿主调用的函数中的this是undefined
                var f1 = function () {
                    console.log(this); // undefined
                    setTimeout(() => {
                        console.log(this); // undefined
                    })
                };
                f1();
            }
        }
        obj.say()

var name = 'window'

var person1 = {
  name: 'person1',
  show1: function () {
    console.log(this.name)
  },
  show2: () => console.log(this.name),
  show3: function () {
    return function () {
      console.log(this.name)
    }
  },
  show4: function () {
    return () => console.log(this.name)
  }
}
var person2 = { name: 'person2' }
person1.show1() // person1
person1.show1.call(person2) // person2

person1.show2() // window
person1.show2.call(person2) // window

person1.show3()() // window
person1.show3().call(person2) // person2
person1.show3.call(person2)() // window

person1.show4()() // person1
person1.show4().call(person2) // person1
person1.show4.call(person2)() // person2

var name = 'window'

function Person (name) {
  this.name = name;
  this.show1 = function () {
    console.log(this.name)
  }
  this.show2 = () => console.log(this.name)
  this.show3 = function () {
    return function () {
      console.log(this.name)
    }
  }
  this.show4 = function () {
    return () => console.log(this.name)
  }
}

var personA = new Person('personA')
var personB = new Person('personB')
personA.show1() // personA
personA.show1.call(personB) // personB

personA.show2() // personA
personA.show2.call(personB) // personA

personA.show3()() // window
personA.show3().call(personB) // personB
personA.show3.call(personB)() // window

personA.show4()() // personA
personA.show4().call(personB) // personA
personA.show4.call(personB)() // personB