33/33 Methods


#1

Here is my code, which was accepted:

function Circle (radius) {
this.radius = radius;
this.area = function () {
return Math.PI * this.radius * this.radius;

};
// define a perimeter method here
this.perimeter = function () { 
    return 2 * Math.PI * this.radius; 
};

};

My question: it doesn't seem to matter whether I type in "this.radius" or just "radius" by itself into the method. My guess is that the use of the word "this" serves as a placeholder so I can enter in different numerical values if I were to call the method at some point, whereas without the "this" I would be unable to do that?" Thanks, I know this is a basic question but wanted clarification.


#2

Don't know much/any JS, so somebody is going to have to check the correctness of this

By omitting this., your perimeter and area functions will remember the radius that was outside of them when they are defined. This is called a closure.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

So instead of looking at what radius the object has, the functions remember what radius was used when the object was created.

This should mean that changing the radius of the object will cause the functions to produce incorrect results.

my_circle = new Circle(1);
console.log(my_circle.area());
my_circle.radius = 1000;
console.log(my_circle.area());

I expect this is also how the methods are made aware of the object, this is kept in their closures.


#3

Here's a question(s) of my own:

Is the code below a more memory efficient way to create objects?

Will the closures in OP create a new function object for each object? Or is there some magic happening to make them share the function objects?

var Circle = function(radius) {
    this.radius = radius;
}

Circle.prototype.area = function() {
    return Math.PI * this.radius * this.radius;
}

Circle.prototype.perimeter = function() {
    return Math.PI * this.radius * 2;
}

#4

I'll just go ahead and answer myself.

http://stackoverflow.com/a/3564281

Which is saying that prototypes are preferred if closures are not needed.


#5

Yes, I read your link and that explains what I was thinking as well (just didn't know the term "closure"). Thanks!


#6

I'll be honest, I don't know anything about prototypes. This class in JavaScript is my first Codecademy class (I also know a little HTML and CSS from an online class I took a few months ago).


#7

Just keep in mind that closures are a language feature, the language has to recognize that the function uses that outside variable which has gone out of scope, and associate that function with that value. Doesn't happen on its own.

And I essentially doubled my knowledge about prototypes, using what I know of other languages to make qualified guesses. Learned that JS has closures too.

What I gather is that the prototype attribute of the constructor is what all objects of that constructor will use. So it's shared.

While with closures, nothing is shared, each object gets its own version.

You can do both as well, but again, if there's no special need for closures, then it should all just be in the prototype of the constructor.

Closures are quite fancy, but if we're not using any of that fanciness it's just .. bad.


#8

This is also mentioned in the MDN article. I really like the last example:

(function() {
    this.area = function() {
        return Math.PI * this.radius * this.radius;
    };
    this.perimeter = function() {
        return Math.PI * this.radius * 2;
    };
}).call(Circle.prototype);

#9

this represents the object instance. and takes its execution context from that instance. If we define this.radius and then refer to only radius in our methods, as @ionatan pointed out, the method only has the initial value given to the function. It cannot be changed. this.radius sits idle and never gets referred. Such an approach may have some uses, but doesn't serve the instance very well.


#10

You'll cover prototypes in detail (at an introductory level) in Objects II. For now, just consider it a list of attributes and methods that all instances of a class inherit from. One prototype, many object instances all drawing on the same resource.


#11

2 posts were merged into an existing topic: Change the JS Function Tutorials