几道关于this的经典练习题

1.

var num = 1;
var myObject = {
    num: 2,
    add: function() {
        this.num = 3;
        (function() {
            console.log(this.num);
            this.num = 4;
        })();
        console.log(this.num);
    },
    sub: function() {
        console.log(this.num)
    }
}
myObject.add();
console.log(myObject.num);
console.log(num);
var sub = myObject.sub;
sub();

答案是：

1  3

3

4

4

2.

        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.show1.call(person2)

        person1.show2()
        person1.show2.call(person2)

        person1.show3()()
        person1.show3().call(person2)
        person1.show3.call(person2)()

        person1.show4()()
        person1.show4().call(person2)
        person1.show4.call(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

我容易错的点在show2和show4，

注意箭头函数：

箭头函数的this指向的是谁调用箭头函数的外层function，箭头函数的this就是指向该对象，如果箭头函数没有外层函数，则指向window。

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.show1.call(personB)

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

        personA.show3()()
        personA.show3().call(personB)
        personA.show3.call(personB)()

        personA.show4()()
        personA.show4().call(personB)
        personA.show4.call(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

有几个疑惑点：

1. new绑定的优先级不是高于显示绑定吗？为什么personA.show1.call(personB)还能变成personB？
2. show2箭头函数这里为什么能指向personA？