prototype and prototype chaining in javascript code example

Example 1: prototype inheritance javascript

function Animal (name, energy) {
  this.name = name
  this.energy = energy
}

Animal.prototype.eat = function (amount) {
  console.log(`${this.name} is eating.`)
  this.energy += amount
}

Animal.prototype.sleep = function (length) {
  console.log(`${this.name} is sleeping.`)
  this.energy += length
}

Animal.prototype.play = function (length) {
  console.log(`${this.name} is playing.`)
  this.energy -= length
}

function Dog (name, energy, breed) {
  Animal.call(this, name, energy)

  this.breed = breed
}

Dog.prototype = Object.create(Animal.prototype)

Dog.prototype.bark = function () {
  console.log('Woof Woof!')
  this.energy -= .1
}

const charlie = new Dog('Charlie', 10, 'Goldendoodle')
console.log(charlie.constructor)

Example 2: prototype chain in javascript

var o = {
  a: 2,
  m: function() {
    return this.a + 1;
  }
};

console.log(o.m()); // 3
// When calling o.m in this case, 'this' refers to o

var p = Object.create(o);
// p is an object that inherits from o

p.a = 4; // creates a property 'a' on p
console.log(p.m()); // 5
// when p.m is called, 'this' refers to p.
// So when p inherits the function m of o, 
// 'this.a' means p.a, the property 'a' of p

Example 3: prototype chain in javascript

{
    prop: "some value",
    __proto__: {
        foo: "bar",
        constructor: ƒ doSomething(),
        __proto__: {
            constructor: ƒ Object(),
            hasOwnProperty: ƒ hasOwnProperty(),
            isPrototypeOf: ƒ isPrototypeOf(),
            propertyIsEnumerable: ƒ propertyIsEnumerable(),
            toLocaleString: ƒ toLocaleString(),
            toString: ƒ toString(),
            valueOf: ƒ valueOf()
        }
    }
}

Example 4: javascript inherit function

function inherit(c, p) {
        Object.defineProperty(c, 'prototype', {
            value: Object.assign(c.prototype, p.prototype),
            writable: true,
            enumerable: false
        });

        Object.defineProperty(c.prototype, 'constructor', {
            value: c,
            writable: true,
            enumerable: false
        });
    }
// Or if you want multiple inheritance

function _inherit(c, ...p) {
        p.forEach(item => {
            Object.defineProperty(c, 'prototype', {
                value: Object.assign(c.prototype, item.prototype),
                writable: true,
                enumerable: false
            });
        })

        Object.defineProperty(c.prototype, 'constructor', {
            value: c,
            writable: true,
            enumerable: false
        });
    }

Tags:

Misc Example