Prototypes

Question 1

How is the following possible?

let pizza = {};
console.log(pizza.taste); // "pineapple"

Answer 1

Prototypes!

Question 2

How do you add a prototype to an object?

Answer 2

You can use __proto__ like so:

let human = {
  teeth: 32
}

let gwen = {
__proto__: human,
age: 19
}

console.log(gwen.teeth) // 32

Question 3

What is a good mental model for the __proto__ property?

Answer 3

Think of it as a special wire which creates a chain of objects of X length.

By specifying __proto__ (also known as our object’s prototype), we instruct JavaScript to continue looking for missing properties on that object instead.

You ask the object for something and it goes ‘I don’t know but x might know!’

A prototype is like a relationship.

Question 4

What is a good mental model for expressions?

Answer 4

They’re questions to our JavaScript universe.

Question 5

When do we get undefined for an object property?

Answer 5

We would only get undefined if we ran out of prototypes and still hadn’t found our property.

This is similar to saying, “I don’t know, but Alice might know.” Then Alice might say, “Actually, I don’t know either—ask Bob.” Eventually, you will either arrive at the answer or run out of people to ask!

Question 6

What do we call a series of objects linked by prototype?

Answer 6

This sequence of objects is known as our object’s prototype chain.

Question 7

Can prototype chains be circular?

Answer 7

Unlike a chain you might wear, prototype chains can’t be circular!

Question 8

What would the following give you?

let human = {
  teeth: 32
}

let gwen = {
  \_\_proto\_\_: human,
  // This object has its own teeth property:
  teeth: 31
}

console. log(human.teeth)
console. log(gwen.teeth)

and why?

Answer 8

// 32
// 31

If gwen didn’t have its own teeth property, we would look at the prototype. But because the object that gwen points to has its own teeth property, we don’t need to keep searching for the answer.

In other words, once we find our property, we stop the search.

Question 9

How do you check for a property while avoiding looking up the prototype chain?

Answer 9

You can call a built-in function called hasOwnProperty.

Example: human.hasOwnProperty(‘teeth’)

It returns true for “own” properties, and does not look at the prototypes.

Question 10

What does the following give you?

let human = {
  teeth: 32
}

let gwen = {
  \_\_proto\_\_: human,
  // Note: no own teeth property
}

gwen.teeth = 31

console. log(human.teeth); // ?
console. log(gwen.teeth); // ?

Answer 10

// 32
// 31

gwen.teeth = 31 creates a new own property called teeth on the object that gwen points to. It doesn’t have any effect on the prototype.

Question 11

What’s a simple rule of thumb for assignment relative to prototypes?

Answer 11

When we read a property that doesn’t exist on our object, we’ll keep looking for it on the prototype chain. If we don’t find it, we get undefined.

But when we write a property that doesn’t exist on our object, that creates the property on our object. Generally speaking, prototypes will not play a role.

Question 12

Do brand new objects have null __proto__? I.e.

let obj = {}
console.log(obj.\_\_proto\_\_)

Answer 12

Nope! The prototype for any plain new object is The Object Prototype.

This includes all standard object properties and methods such as hasOwnProperty and toString.

All this time, we were thinking {} created an “empty” object, but it’s not so empty after all! It has a hidden __proto__ wire that points to the Object Prototype by default. This explains why JavaScript objects seem to have “built-in” properties.

Question 13

What is the prototype of The Object Prototype?

Answer 13

// null

It is an object which truly doesn’t have a prototype at all.

Question 14

Can you create an object with no prototype?

Answer 14

Yes:

let weirdo = {
  \_\_proto\_\_: null
}

but y u do that?

Question 15

Why is adding things to, say, the object prototype generally considered bad practice?

Answer 15

1. fragile (if many libraries did this, they might override each other)
2. makes it hard to add new features - i.e. if jquery had a .reduce function adding an ES6 implementation which has a different API might cause a ruckus

Question 16

What’s the difference between the __proto__ and prototype properties?

Answer 16

The story around this is confusing. Before JavaScript added classes, it was common to write them as functions that produce objects.

Adding a .prototype onto one such ‘class’ function would set all new objects to have that designated ‘__proto__’:

function Donut() {
  return { shape: 'round' }
}

Donut.prototype = {
  eat() {
    console.log('Nom nom nom')
  }
}

let donut1 = new Donut() // \_\_proto\_\_: Donut.prototype
let donut2 = new Donut() // \_\_proto\_\_: Donut.prototype

To conclude, a function’s prototype specifies the __proto__ of the objects created by calling that function with a new keyword.

Question 17

Is __proto__ an accepted approach for changing prototype?

Answer 17

Nope! It’s actually deprecated due to some shift as complexities in JS language definition.

Question 18

What should we use instead of proto if we really wanted to manage prototypes?

Answer 18

1. Use Object.getPrototypeOf() to get the prototype of an object.
2. Use Object.create() to create a new object with a given prototype. Avoid Object.setPrototypeOf(). If you change the prototype of an existing object, it can become slower.
3. You can use __proto__ as an operator in an object literal. It is useful for demonstrating prototypal inheritance and for creating dict objects. However, there are complexities and caveats: https://2ality.com/2015/09/proto-es6.html

Question 19

What are prototypes typically used for in modern JS?

Answer 19

• people often use prototypes to create a traditional “class inheritance” model that’s popular in other programming languages. This became so common that JavaScript added a class syntax as a convention that “hides” prototypes out of sight.

Question 20

What’s a simple example of looking up the prototype chain?

Answer 20

When reading obj.something, if obj doesn’t have a something property, JavaScript will look for obj.__proto__.something. Then it will look for obj.__proto__.__proto__.something, and so on, until it either finds our property or reaches the end of the prototype chain.