Prototype problems?

[adam_curry91]

Hello everyone,

I’m hoping someone can help explain .prototype?

I keep seeing it appear with other other key words like pop push but I feel like I don’t understand what its doing.

kind regards

Adam

[DanCouper]

Every object has a property prototype. The value of prototype is an object, normally with some functions (methods) attached to it. A prototype of a given object is shared by all objects of that type, so they all get access to those functions.

It is how JavaScript implemenents inheritence.

It’s also special in that you don’t access it directly. When you look for a property on a specific instance of an object, JS is designed to check prototype first.

So for example.

On the prototype of the Object type of object, there is a function toString which converts the object to a string.

const myObject = { foo: 1 }
console.log(myObject.toString())
// Logs "[object Object]"

I didn’t define toString, it’s already attached to the prototype. And so when I’ve looked up the property toString, JS has looked on the prototype, seen there is a function toString, executed it.

On the prototype of the Array type of object, there is a function push which pushes a value into an array.

const myArray = [];
myArray.push(1);
console.log(myArray)
// Logs [1]

Again, I didn’t define push, it’s already attached to the prototype.

Array is a type of Object, it inherits from that, so it gets all of the functions on the Object prototype as well. But these can be overwritten:

console.log(myArray.toString())
// Logs "1"

I didn’t define toString, but in the case of the Array object it’s been overwritten to print the values in the array.

I can override the built-in prototype methods myself if I really want:

Array.prototype.toString = function () {
  return "I'm an array!";
}

Array.prototype.push = function (value) {
  console.log(`I saw you wanted to push ${value} to your array, but I'm not going to do that!`);
}

const myArray = [];
myArray.push(1);
// Logs "I saw you wanted to push 1 to your array, but I'm not going to do that!"
console.log(myArray.toString())
// Logs "I'm am array!"

I can create my own types of objects with their own prototype methods. You can create objects a few ways; here I’m using JS’ new keyword & defining a constructor function:

function User () {
  this.firstName = firstName;
  this.lastName = lastName;
}

User.prototype.toString = function () {
  return Object.entries(this).map(([key, value]) => `${key}: ${value}`).join(", ");
}
 
User.prototype.fullName = function () {
  return `${this.firstName} ${this.lastName}`;
}

const me = new User("Dan", "Couper");
console.log(me.toString());
// Logs "firstName: Dan, lastName: Couper"
console.log(me.fullName());
// Logs "Dan Couper"

class syntax does the same as the above. So

class User {
  constructor (firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  toString() {
    return Object.entries(this).map(([key, value]) => `${key}: ${value}`).join(", ");
  }
 
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

Note that the keyword this is really important when talking about objects/prototypes in JS. this is the calling context, whatever is to the left of the ..

const me = new User("Dan", "Couper");
console.log(me.fullName());
// Logs "Dan Couper"

• In the function fullName, it looks for this.firstName and this.lastName.
• The thing to the left of the . here is me.
• me is an object of the type User.
• That object has two properties, firstName and lastName, which have been set to Dan and Couper respectively.
• this is the object me. me.firstName is Dan, me.lastName is Couper

[adam_curry91]

Thank you Dan, this really helped me understand it better.