2

So, using Code Academy I'm in the Objects section of the Javascript tutorial and I'm having a really hard time wrapping my brain around Functions & Objects. I'd like some help and explaining with parts of the code below. I've commented on each line what I need help with. Thanks so much in advance.

// Obviously declaring the Rabbit function with adjective to be called

function Rabbit(adjective) { 

  // I don't understand this line, or the context of why this is being used.

  this.adjective = adjective; 

  // Why declare another function here? Is a function within a function 
  // considered a Method or is that only Function within an Object?

  this.describeMyself = function() { 

    // I get this part but why does it need a function to do this?

    console.log("I am a " + this.adjective + " rabbit"); 
  };
}

// I don't get this either, Isn't this declaring a new object? How can   
// that be when you only have a Function named Rabbit?

var rabbit1 = new Rabbit("fluffy"); 
var rabbit2 = new Rabbit("happy");
var rabbit3 = new Rabbit("sleepy");

// How could this work if describeMyself is in the Rabbit function and 
// has nothing to do with rabit1?

console.log(rabbit1.describeMyself); 
console.log(rabbit2.describeMyself);
console.log(rabbit3.describeMyself);

Hopefully not too confusing but if any of you more experienced Javascript people could kindly explain out everything I talked about in the comments I'd greatly appreciate it. Thanks

Scott Sauyet
  • 49,207
  • 4
  • 49
  • 103
Josh Nanocchio
  • 67
  • 3
  • 1
    A "method" in programming languages generally is a function attached as a property or child of an object (but the EMCAScript specification that defines JavaScript never uses the word "method" to describe any feature of the language; it's just a general word). For the rest, this is generally answered by [JavaScript: How does 'new' work internally](https://stackoverflow.com/questions/6750880/javascript-how-does-new-work-internally) although the answers there may assume a strong command of the language already. The short answer is `new` invokes a function with a newly-created `this` object. – apsillers Aug 28 '16 at 01:26
  • Note that your course is teaching a technique that still works but which has been generally [considered superseded](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) by the most recent version of Javascript. But if you have experience with any modern OOP language (C++, Ruby, Java), it should be easy enough to find parallels with their notions of classes, methods, etc. But be warned that the underlying mechanism (prototypal delegation) is significantly different. – Scott Sauyet Aug 28 '16 at 01:53
  • To correct my earlier comment: the spec actually *does* explicitly define "method" as "function that is the value of a property". (I mistakenly thought it did not provide such a definition for that category of function.) – apsillers Aug 28 '16 at 02:29

2 Answers2

1
  1. Rabbit is a constructor, which produces an instance when called with new keyword.
  2. When you do that, this points to the instance you created.

So, by var rabbit1 = new Rabbit('fluffy'), you created an object looks somehow like this and assign to variable rabbit1:

{
  adjective: 'fluffy',
  describeMyself: function() {...}
}

As this in rabbit1.describeMyself points to the instance itself (rabbit1), when you call rabbit1.describeMyself(), this.adjective actually gives you rabbit1.adjective. That's why you get 'fluffy'.

For rabbit2 and rabbit3, this points to themselves respectively.

Leo
  • 13,428
  • 5
  • 43
  • 61
  • I'd suggest you read an entry level book. Cross-coupled topics are very common in learning a programming language, online series usually cannot handle such situations well. – Leo Aug 28 '16 at 01:44
  • Moreover, **any** function can be used as a constructor, simply by `var something = new myFunction()`. By convention, constructor functions are capitalized to distinguish them. – Scott Sauyet Aug 28 '16 at 01:47
  • @ScottSauyet `new` any function wouldn't be quite meaningful, if it's not composed in purpose of a constructor. But yes, you could `new` it anyway :) – Leo Aug 28 '16 at 01:52
  • In fact, it could be actively harmful, if it did something to `this` that was really meant to be used in a different manner. But it's been done. I know, I've seen it... I've cleaned up the resulting mess. :-) – Scott Sauyet Aug 28 '16 at 01:57
0

I think the critical thing that helped me understand JavaScript, was the realization that JavaScript functions are objects.

A JavaScript object can contain a function as one of the values of an array or as the value of a deeper object.

So, in your question about this.adjective, you are storing the passed in (from the outside) adjective inside the scope of function Rabbit which becomes Rabbit.adjective to the larger outside scope. If you didn't set it to a property of Rabbit then Rabbit.adjective would be undefined in the larger outside scope closure, but would be available to anything inside of Rabbit.

console.log(rabbit1.describeMyself); // How could this work if describeMyself is in the Rabbit function and has nothing to do with rabit1?

In this case rabbit1 has inherited the properties of Rabbit by being first instantiated (created) from a prototype (sort of like a parent that you can always copy from but can't copy back to--so by value) so that it has all the same properties as Rabbit but with the different data inject from the new line. In this way you can use what's in Rabbit inside rabbit1 without contaminating Rabbit and being able to customize Rabbit by having as many instances of Rabbit (Rabbit1, Rabbit2, etc) as you want.

If you ask why you might want to do this the answer lies in code modularity and reusability. As project code bases get bigger and more complex with more developers working on them, you'll want to create standards that can be followed and reused by everyone working on the project.

Phillip Berger
  • 2,317
  • 1
  • 11
  • 30
  • I believe I understand well what happens in the code, but this explanation baffles me. For starters, the fact that functions happen to actually be objects is irrelevant to all of this. If they shared no hierarchy, everything would work the same. And while, yes, there are prototypes to be considered (missing from Leo's answer above), this doesn't serve to explain them, and I think the OP should probably walk before running. – Scott Sauyet Aug 28 '16 at 01:44