关于this指向的面试题

如果想要搞懂下面的面试题，你需要搞懂this指向问题，这里推荐coderwhy大神的文章，通俗易懂，情形脱俗，只要用心读，不会都难(拍马屁)，https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA

面试题一：

var name = 'window'
var person = {
    name: "name",
    sayName: function () {
        console.log(this.name)
    }
}
// 这两者的结果是一样的，因为.的优先级很高，用不用括号包裹都是一样的
person.sayName() // name
(person.sayName)()  // name
// 术语： 间接函数引用， 赋值表达式的返回值是赋值的结果，然后被调用（window调用）  
(b = person.sayName)() // window

面试题二：

var name = 'window'
var person1 = {
    name: 'person1',
    foo1() {
        console.log(this.name)
    },
    foo2: () => {console.log(this.name)},
    foo3() {
        return function() {
            console.log(this.name)
        }
    },
    foo4() {
        return () => {
            console.log(this.name)
        }
    }
}

var person = {name: 'person2'}

person1.foo1()  // person1
person1.foo1.call(person2)  // person2

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

person1.foo3()() // window
person.foo3.call(person2)() // window
person.foo3().call(person2) // person2

person1.foo4()() // person1
person.foo4.call(person2)() // person2
person.foo4().call(person2) // person1

面试题三

var name = 'window'

function Person(name) {
    this.name = name
    this.foo1 = function () {
        console.log(this.name)
    }
    this.foo2 = () => {
        console.log(this.name)
    }
    this.foo3 = function () {
        return function () {
            console.log(this.name)
        }
    }
    this.foo4 = function () {
        return () => {
            console.log(this.name)
        }
    }
}

var person1 = new Person('person1')
var person2 = new Person('person2')

person1.foo1() // person1
person1.foo1.call(person2) //person2 

person1.foo2() // person1
person1.foo2.call(person2) // person1 

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

person1.foo4()() // person1
person1.foo4.call(person2)() // person2 
person1.foo4().call(person2) // person1

面试题4

var name = 'window'

function Person(name) {
    this.name = name
    this.obj = {
        name: 'obj',
        foo1() {
            return function () {
                console.log(this.name)
            }
        },
        foo2() {
            return () => {
                console.log(this.name)
            }
        }
    }
}

var person1 = new Person('person1')
var person2 = new Person('person2')

person1.obj.foo1()()  // window
person1.obj.foo1.call(person2)() // window
person1.obj.foo1().call(person2) //person2

// person1.obj.foo2() 此时foo2的this指向调用它的obj了
// person1.obj.foo2()返回一个箭头函数，然后调用，箭头函数没有this
// 去上级作用域找，他的上级作用域就是foo2,此时foo2的this是obj，所以这个箭头函数的this也是obj
// 这里注意: 函数的作用域和作用域链是在函数定义的时候就已经形成了的，不是函数调用时才形成
person1.obj.foo2()() // obj
person1.obj.foo2.call(person2)() // person2
person1.obj.foo2().call(person2) // obj