JavaScript constructor function, prototype attach method, and 'this'

Question

I'm working through CodeAcademy JS excercises and have a question about this example:

//Animal class
function Animal(name) {
    this.name = name;
}

//Attach sayName method to Animal class
Animal.prototype.sayName = function() {
    console.log("Hi my name is " + this.name);
};

//create an animal object instance
var dog = new Animal('Barker');

//invoke a method attached to the prototype from the object instance
dog.sayName();

My understanding of this code is:

JS creates a new Animal object instance that var dog points to as a result of the use of the new keyword before the call to function Animal() - a function constructor
The prototype of the var dog object has the sayName() method attached to it in the line: Animal.prototype.sayName = function()
Because sayName() was attached to the class prototype, the method is now available to any objects created from the Animal class through use of the new Animal() function constructor

Is this a correct understanding of what is happening with this code?

Also, I'm trying to understand how this points to the Animal object in this.name:

Animal.prototype.sayName = function() {
    console.log("Hi my name is " + this.name);
};

Doesn't Animal.prototype point to an actual object: the prototype object of this Animal object instance? If so, shouldn't this in this.name point to Animal.prototype, since sayName() is actually being invoked from Animal.prototype?

My understanding of the context for this is that this always points to the object that invokes the function. However, in this case, when dog.sayName() is invoked, this points to Animal, which is how this.name equals 'Barker' when it is logged to the console. I'm guessing that either I am misunderstanding that Animal.prototype points to a prototype object, or that JS is doing something "behind the scenes" to associate dog.sayName() to this in the context of attaching a method to the prototype.

Multiple questions here in this little example, but getting a grasp on exactly what is happening here will really help my understanding of these fundamental concepts.

When a constructor function is invoked it assigns it's prototype to the created object's prototype so that dog have full access to the functions and properties of Animal.prototype. You may have a look at qr.ae/RO44Vn for a good read about the this of JS. — Redu
– Redu, Commented Apr 10, 2016 at 22:51

Alexander O'Mara · Accepted Answer · 2016-04-10 02:24:08Z

2

[points 1-3]

Is this a correct understanding of what is happening with this code?

Yes, sounds like you understand it.

Doesn't Animal.prototype point to an actual object: the prototype object of this Animal object instance?

Yes, the prototype object is an Object instance.

If so, shouldn't this in this.name point to Animal.prototype, since sayName() is actually being invoked from Animal.prototype?

No, because you called it as a method of dog.

dog.sayName();

If you called it like this, then yes, this would have referenced Animal.protoype.

Animal.protoype.sayName();

But that wouldn't be very useful.

My understanding of the context for this is that this always points to the object that invokes the function.

Not quite. For the most part this refers to the object the method was called on, not the object it is a property of. A method can actually be a property of multiple objects, so this dynamically points to the object it was called as a method of.

Of course, this can refer to other things in other contexts, such as when not called as a method, or in a bound function using .bind.

edited Apr 10, 2016 at 2:24

answered Apr 9, 2016 at 18:55

Alexander O'Mara

60.9k19 gold badges176 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lance-p Over a year ago

So sayName() is called from dog /Animal, however doesn't actually exist on dog. Instead it exists on its prototype object, and when dog invokes sayName() JS doesn't find it there but goes down the prototype chain and finds it on Animal.prototype. This is where the method actually exists. Now since dog invokes sayName() the 'this' reference points to dog so that new Animal('Barker') sets this.name='Barker'.

Alexander O'Mara Over a year ago

@lance.parish Yep, that's how the prototype chain works.

Oriol · Accepted Answer · 2016-04-09 18:55:02Z

1

You misunderstood this. The value of this is not set when you create the function, it's an additional argument. Each time you call a function, the this value can change.

In case of methods, the this value is set to the base object. For example,

dog.sayName(); // `this` is `dog`
({sayName: dog.sayName}).sayName(); // `this` is this new object
(0,dog.sayName)(); // `this` is undefined or the global object

answered Apr 9, 2016 at 18:55

Oriol

291k71 gold badges459 silver badges535 bronze badges

1 Comment

Paul S. Over a year ago

The last example, (foo, bar.baz)() is an important edge case which is not immediately obvious, nice!

user5536315 · Accepted Answer · 2016-04-10 08:56:05Z

this has two distinct characteristics in Javascript that cause a lot of confusion:

it's the only dynamically scoped built-in feature of the language
it's treated as an implicit parameter

Lexical scope

var i = 0;
const inc = () => i + 1;

const inc2 = x => {
  var i = x;
  return inc();
};

inc2(100); // 1

Dynamic scope

var o = {
  i: 0,
  inc: function () { return this.i + 1 }
};

var p = {
  i: 100,
  inc2: o.inc
};

p.inc2(); // 101

this is dynamically scoped, because it's set through the invocation context.

Implicit parameter

Instead of passing this explicitly as a formal parameter to methods, it's treated implicitly. Hence you need to use call/apply to set different values (namely objects) for this:

// Note that s and t are implicitly converted to objects

const split = (o, x) => o.split(x);
let s = "1,2,3", t = "4,5,6";

// objects are passed explicitly as normal arguments
split(s, ","); // ["1", "2", "3"]
split(t, ","); // ["4", "5", "6"]

// objects (or this) are provided implicitly
s.split(","); // ["1", "2", "3"]
s.split.call(t, ",") // ["4", "5", "6"]

Imagine this as the receiving object of a method, which must be passed as the first parameter.

Collectives™ on Stack Overflow

JavaScript constructor function, prototype attach method, and 'this'

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related