The new operator in my small programme

Question

Hey guys i have this below small programme :

function foo() {
  this.x = 2;
  return this;
}


var y = foo();
var g = foo();                                                                                                             
g.x = 3;
console.log("y", y.x); // 3
console.log("g", g.x); // 3
console.log("this", this.x); //3

now all 3 console.logs print 3 , i guess the 1st console.log prints 3 because y.x is overwritten by g.x but i don't quite get why this.x prints 3 , because i have no this.x in the global scope .

My 1st question : Why does this.x print 3 ?

now if my original programmer is corrected in the following way(basically i am adding the new operator) :

function foo() {
              this.x = 2;
              return this;
            }

            var y = new foo();
            var g =  new foo();                                                                                                             
            g.x = 3;
            console.log("y", y.x);   // 2
            console.log("g", g.x);   // 3
            console.log("this", this.x); // undefined

I get more predictable results or rather expected ones (check comments) .

What difference the new operator makes eludes me , now i browsed through SO and found this below thread :

New operator

also i saw the MDN doc's, but still i'am confused .

can somebody answer my 1st question and then also tell me Most Importantly ,how does the new operator make any difference ? in my example , make ur answer concise , just tell me the exact reason why the new operator gives me the results i want ?

Thank you .

Alexander .

Answer 1

To determine the value of this in a function, Javascript looks at how you call this function:

• if you call it with .apply (or .call), as in foo.call(someObj), this is the value of the first argument
• if there's a new before the function call, this is a newly created object
• if there's a dot (or a bracket) before the function, as in someObj.foo(), this is what precedes the dot (someObj here)
• if there's nothing before the function name, this is the Global object (window if you run in a browser)

^{NB: the above is intentionally simplified, refer to the standard for the full picture (search for "thisArg")}

So, in your first snippet, you modify the Global object and return it. In the second snippet, you modify and return a fresh object created by new.

Answer 2

My question was about why when i use the new keyword in the below programme , do i get the desired result , look below .

function foo() {
              this.x = 2;
              return this;
            }

            var y = new foo();
            var g =  new foo();                                                                                                             
            g.x = 3;
            console.log("y", y.x);   // 2
            console.log("g", g.x);   // 3
            console.log("this", this.x); // undefined

now without new the result is

console   
 3 
 3 
 undefined

now i did read the Mozilla but it was less helpful in understanding the new keyword .

what my common sense tells me is that when i say the following :

p = foo();

i am still referring to the original copy of foo(), so any modifications made to p will affect foo() .

but when i say :

p = new foo(); 

i am actually creating a new independent copy that exactly like foo() but not bound to it . p can now be used and modified without affecting the original foo() .

well sometimes common sense works better , than documentation(i still recommend reading the documentation though LOL .)

new was just doing what it was suppose to do , Make a new independent instance of the function .