About this classic a few exercises

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();

the answer is:

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)()

answer:

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

I tend to point in the wrong show2 and show4,

Note the arrow function:

this function arrow points to the function of the arrow who call the outer function, this function arrow is pointing to the object, not a function of the outer function if the arrow is pointing 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)()

answer:

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

There are few doubts points:

1. new binding priorities are not binding than display it? Why personA.show1.call (personB) can become a personB?
2. Why can function here show2 arrow pointing personA?