CODEWITHSUNDEEP
javascriptinheritancethis
gstackoverflow
gstackoverflow

Reputation: 37084

difference between functionName() and functionName.call(this)

I research functional inheritance in javascript. According the article I have read I have wrote the code:

function Base(){
    var enableVar = true

  this.enable = function(){
      console.log("enable");
        enableVar = true;
  }
   this.disable = function(){
      console.log("disable");
        enableVar = true;
  }
}

function Child(){
    Base.call(this);
}

new Child().enable();

this code works properly and I see message in console.

but I don't understand row:

Base.call(this);

for me it is Base function invocation with this replaced with this thus it is same with Base();

But looks like my state is wrong. I see error:

VM898:62Uncaught TypeError: (intermediate value).enable is not a function(…)

Please clarify difference for me.

UPDATE

function funcB(){
  return this.a;
}

function funcA(){
  this.a = 2;   
  return funcB();
}
alert(funcA());

this code alerts 2 although I invoke funcB like funcB();

I really don't understand difference

Upvotes: 2

Views: 49

Answers (2)

Howzieky
Howzieky

Reputation: 829

functionName.call(obj) calls functionName normally, with one main difference: Inside of functionName, this refers to obj. Normally this refers to window, but making this reference obj is very good for inheritance because you can just keep on using this throughout all of your constructors.

EDIT (To explain the update):

This is your code:

function funcB(){
  return this.a;
}

function funcA(){
  this.a = 2;   
  return funcB();
}
alert(funcA());

We will run through this step by step. The first thing to actually run is alert(funcA());, which calls funcA(). That code sees this as equal to window by default (window being javascript's Global Variable container). So what the computer sees as the next step (executing funcA) is this:

function funcA(){
  window.a = 2;   
  return funcB();
}

That code sets the global variable a to 2, and will return whatever funcB returns, so we'll take a look at funcB. And remember, by default, javascript sets this = window, so funcB is actually

function funcB(){
  return window.a;
}

Remember that we set window.a = 2 back in funcA, so funcB becomes

function funcB(){
  return 2;
}

Which means that funcA becomes

function funcA(){
  window.a = 2;   
  return 2;
}

Which means that alert(funcA()); becomes alert(2);

Upvotes: 2

lonesomeday
lonesomeday

Reputation: 237817

First, think what new does. It creates a new object that is an instance of the function you specify. So new Child creates a new object based on Child

Base.call(this) means "run the Base function as if the newly created Child object as the context" (where "context" means "internal value of this). This means that the enable and disable functions are added to the new Child object.

Now think what calling Base() does. There is no new Base object. There is therefore no value of this within the function. The new Child object is not modified, so when you call .enable(), that function does not yet exist and you get the error that you mention.

Upvotes: 1

Related Questions