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 http://qr.ae/RO44Vn for a good read about the `this` of JS. — Redu, Apr 10 '16 at 22:51

Alexander O'Mara · Accepted Answer · 2016-04-10T02:24:08.687

[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.

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'. — lance-p, Apr 10 '16 at 02:47

score 1 · Answer 2 · answered Apr 09 '16 at 18:55

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 09 '16 at 18:55

Oriol

274,082
63
437
513

The last example, `(foo, bar.baz)()` is an important edge case which is not immediately obvious, nice! – Paul S. Apr 10 '16 at 09:06

score 1 · Answer 3 · answered Apr 10 '16 at 08:56

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.

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

3 Answers3