Can someone please explain why `this` is different in these two cases

November 12, 2021

let obj = {
    one: function(){
        this.two();
    },

    two: function(){
        console.log("two");
    }
}

let oneFunc = obj.one;

obj.one(); // two

oneFunc(); // TypeError: this.two is not a function

I have been programming in JavaScript for quite some time. I thought I had a really solid grasp on the this keyword. However, I ran in to this today and it blew my mind. I can’t figure out why this is happening. When I call oneFunc(), this refers to the global object. Why does this happen?

>Solution :

this refere to the object, and what you are doing here is creating a function equal to the methode of the object and so you lose the reference to the object.

You can use bind

let obj = {
    one: function(){
        this.two();
    },

    two: function(){
        console.log("two");
    }
}

let oneFunc = obj.one;
oneFunc = oneFunc.bind(obj);

obj.one(); // two

oneFunc(); // TypeError: this.two is not a function