var name = 'window'

var person1 = {
    name: 'person1',

    foo1: function () {
        console.log(this.name)
    },

    foo2: () => {
        console.log(this.name)
    },

    foo3: function () {
        return function () {
            console.log(this.name)
        }
    },

    foo4: function () {
        return () => {
            console.log(this.name)
        }
    }
}

var person2 = { name: 'person2' }

// 正题来咯

person1.foo1(); // person1 (隐式绑定)
person1.foo1.call(person2); // person2 (call显示绑定person2,显示绑定优先级大于隐式绑定)

person1.foo2(); // window (箭头函数不绑定作用域,找到上层作用域为全局window)
person1.foo2.call(person2);// window (箭头函数没有this,call()无效)

person1.foo3()(); // window (person1.foo3()得到一个return的函数,再加上一个小括号属于独立调用指向全局对象window)
person1.foo3.call(person2)(); // window (person1.foo3.call(person2)这句话得到返回值后,后面加小括号调用,还是属于独立调用 指向window) 
person1.foo3().call(person2);// person2 (最终调用return函数时,显示绑定上了person2)

person1.foo4()();// person1 (person1.foo4()这句话得到return后的函数为箭头函数进行调用,箭头函数中没有this向上一层作用域找,上层作用域为foo4,this指向person1)
person1.foo4.call(person2)();// person2 (上层作用域被显示绑定为person2 ,在箭头函数中找不到this后,向上层所用域找 就找到了之前被显示绑定的person2)
person1.foo4().call(person2);// person1 (person1.foo4()这句话得到return后的函数为箭头函数进行显示绑定person2,但箭头函数中没有this,显示绑定无效,向上一层作用域找,找到函数foo4,this指向person1)


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.