[Javascript] this keyword exercise

function logThis() {
    console.log(this)
}

const obj = {
    logThis,
    logThis2() {
       logThis()
    },
    logThis3() {
       obj.logThis()
    }
}

obj.logThis();
obj.logThis2();
obj.logThis3();

 

Answer:

obj.logThis(); // obj
obj.logThis2(); // window
obj.logThis3(); // obj

 

---

 

// What will the this keywoard refer to for each invocation
const objA = {
    foo() {
        console.log("objA function", this)
    },
    bar: () => {
        console.log("objA arrow =>", this)
    }
}

const objB = {
    foo: objA.foo,
    bar: () => {
        console.log("objB arrow => ", this) // window
        objA.bar()
    },
    baz() { 
        console.log("objB function", this) // objB
        objA.foo() 
    }
}

 

Answer:

objB.foo(); // objB
objB.bar(); // Window
objB.baz(); // objA

 

foo: objA.foo: due to there is no invocation, when we call objB.foo(), it is invoked on objB , and also on objA, foois function syntax, so the thispoints to the invocator which is objB.

Now if we change a little bit:

const objA = {
    foobar: ()=> {
        console.log("objA foobar arrow =>", this)
    },
}

const objB = {
    foobar: objA.foobar,
}
    
objB.foobar()

Now the answer should be window, because for arrow function, the this keyword is determined by the the lexical environment in which the arrow function was defined NOT invoked. So this should be window

 

const obj = {
    logThis() {
        console.log(this)
    },
    logThis2() {
        function logThisInner() {
            console.log(this)
        }
        return logThisInner.apply(this)
    }
}

const {logThis, logThis2} = obj

logThis()  // window
logThis2() // window
obj.logThis()  // obj
obj.logThis2() // obj

After using destriucting, logThis()and logThis2()has no directly obj call. So the thiskeyword is window

 

If you want to fix this:

logThis.call(obj)
logThis2.call(obj)