Why cannot use function name to retrieve property in JavaScript?

Question

The following is the code

function add() {
  var counter = 0;
  this.num = 0;
  function plus (){ return counter +=1;}
  plus();
  return counter;
}

console.log(add.num); //outputs :undefined

Function name can be treated as reference of a function object, so the num is the property of add function object, the outputs could have been 0. But the result is not like so, why?

If i change the code to:

function add() {
      var counter = 0;
      this.num = 0;
      function plus (){ return counter +=1;}
      plus();
      return counter;
    }
var obj = new add();
    console.log(obj.num); //outputs : 0

it works correctly. Can anyone explain this? Many many many thanks.

Answer 1

this refers to current instance of your function. until you create a new instance using new add() this will refer to window object.

add.num will check if add has a property named num. Which is false because add refers to a function definition not an instance/object of function.

function add() {
  var counter = 0;
  this.num = 0;
  function plus (){ return counter +=1;}
  plus();
  return counter;
}

console.log(add.num); //outputs :undefined  because add=function(){};

while in another case, when you create object using new it returns you a javascript object having all the public properties.

///obj=Object{ num : 0};

function add() {
      var counter = 0;
      this.num = 0;
      function plus (){ return counter +=1;}
      plus();
      return counter;
    }
var obj = new add();
    console.log(obj.num); //outputs : 0 because obj is {num:0}

Fiddle to play: http://jsfiddle.net/ZpVt9/76/

Answer 2

It will help to read-up on this in JavaScript: MDN

When you do new add(), the interpreter creates a new JavaScript Object/Hash and binds it to this variable in the function. So this is valid inside the scope of the function.

When you don't do a new you are calling the function without a context, so this is undefined in such cases (in 'use strict' mode).

You can explicitly pass a context to Functions using Function.apply/Function.call/Function.bind

Answer 3

this inside a function points to different object depending on how the function is called:

1. If the function is called in the global context (outside any function) this points to global object (which is window if the script is executed within a browser). console.log(this === window) will output true.

2. If this is referred inside a function, then it depends if we have set strict mode.

   • If the code is in strict mode then this will be undefined unless we explicitly assign it to something.

   • If the code is not in strict mode then this will point to global object. (Which is again window if script is executed in a browser).

3. If function is used as constructor to make new objects then this points to the new object being made.

4. If function is used as object method then this points to the object method is called on.

More explanation with examples here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

---

Every function is an object in JavaScript. But as you can see from above explanation none of the ways this points to function object itself from the same function body. Thus the only way you can set function's property is by directly assigning it to the function without using this.

There is another way of adding a property to functions. This is a very bad idea of doing so as adding any property this way will reflect in all functions used. Every function is linked to Function.prototype object. Thus adding any property in this object will get reflected in all functions.

Function.prototype.someProperty = 1;
//now try accessing it via any function object
console.log(add.someProperty); //should print 1 to console.

Answer 4

"num" is not a property of the "add" function is a property of the object created and returned by that function if you want to add num to your add function you need to do

add.prototype.num=0; 

and remove it from your objects definition