Question

Can anybody elaborate below in innerF, what does this refer to? User or innerF?

function User(){
  this.id = 1;
};

User.prototype.sayHi = function(){
    var innerF = function(){
        this.id = 2; // "this" refers to User or innerF ?
    };

    return innerF;
};

Also does the new keyword or anonymous function has to do with changing reference of this keyword?

What if I call it all like this:

var u = User;
var f = u.sayHi();
f();

Or

var u = new User;
var f = u.sayHi();
f();

Thanks

Answer 1

What the this local refers to inside of innerF will depend on how the function is eventually invoked. It can be invoked in a variety of ways that will change the meaning of this. For example

var u = new User();
var innerF = u.sayHi();
innerF();              // 'this' is window
innerF.call(u);        // 'this' is 'u'
innerF.call("hello");  // 'this' is "hello"

Based on your code though it appears that you want this to refer to the instance of User on which sayHi was invoked. If so then you need to store this in a local and refer to that local within innerF.

User.prototype.sayHi = function(){
    var self = this;
    var innerF = function(){
        self.id = 2; 
    };

    return innerF;
};

Note though that this inside sayHi isn’t guaranteed to point to User instance either. In general it will the same tricks can be done to sayHi that were done to innerF. For example

var sayHi = u.sayHi;
sayHi();   // 'this' is window