JS 1.9 Prototype inheritance

Table of contents

• Prototype
• Inheritance/arv
  • Object.prototype

Prototype

Protoype är som en dold property som finns i alla JavaScript objekt som innehåller olika typer av bas-funktionalitet. Den används när vi gör arv (inheritance).

const person = {
  name: 'Fred'
};
console.log(person.__proto__);

console.dir(person)

Object
  name: "Fred"
  [[Prototype]]: Object
    constructor: ƒ Object()
    hasOwnProperty: ƒ hasOwnProperty()
    isPrototypeOf: ƒ isPrototypeOf()
    propertyIsEnumerable: ƒ propertyIsEnumerable()
    toLocaleString: ƒ toLocaleString()
    toString: ƒ toString()
    valueOf: ƒ valueOf()
    __defineGetter__: ƒ __defineGetter__()
    __defineSetter__: ƒ __defineSetter__()
    __lookupGetter__: ƒ __lookupGetter__()
    __lookupSetter__: ƒ __lookupSetter__()
    __proto__: (...)
    get __proto__: ƒ __proto__()
    set __proto__: ƒ __proto__()

Inheritance/arv

Vi gör två classer, varav den andra extendar den första.

class Animal {
  eats = true;

  canEat() {
    console.log(this.eats);
  }
}

class Dog extends Animal {
  name = 'Fred';
}

Vi gör en instans av den extendade classen Dog och tittar på dess property.

const dog = new Dog();
console.dir(dog);

Vi kan se att den har ärvt eats, men vi kan också se att i Dog-protoype så finns också Animal-prototype.

Dog
  ├─ eats: true
  ├─ name: "Fred"
  └─ Dog-prototype
      └─ Animal-prototype

Dog har alltså också ärvt metoden canEat() från Animal.

console.log(dog.canEat); // true

Object.prototype

Alla JavaScript objekt har en objekt-prototyp som ärvs från Object, men det sker automatiskt och behöver inte skrivas ut.

Exempel

const myObject = {
  a: 1,
  b: 2,
  c: 3
};

För att kolla om myObject innehåller propertyn a, så kan vi kalla myObject.hasOwnProperty('a'), trots att hasOwnProperty inte är definierat i myObject. Detta beror på att myObject (och alla andra eventuella objekt vi gör i JavaScript) har ärvt funktionalitet från prototypen Object.prototype, som har hasOwnProperty definierad (se ovan).