JavaScript - Prototype

mz4 — Thu, 10 Nov 2022 09:17:33 +0000

Every function in JavaScript has a prototype property..
Prototype is a property that allows us to share methods across all instances of a function.
When we create a new instance of an object, we inherit all properties and methods of that object.

Turns out that this:

class Animal {
  constructor(name, energy) {
    this.name = name
    this.energy = energy
  }
  eat(amount) {
    this.energy += amount
  }
  sleep(length) {
    this.energy += length
  }
  play(length) {
    this.energy -= length
  }
}

const leo = new Animal('Leo', 7)
const snoop = new Animal('Snoop', 10)

is syntactic sugar for this:

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

Animal.prototype.eat = function (amount) {
  this.energy += amount
}

Animal.prototype.sleep = function (length) {
  this.energy += length
}

Animal.prototype.play = function (length) {
  this.energy -= length
}

const leo = new Animal('Leo', 7)
const snoop = new Animal('Snoop', 10)

And if we want to list all methods of an Array for example, we just have to do:

console.log(Array.prototype);

JavaScript Engine, Heap, Call Stack, Web APIs, Event loop and Callback queue

mz4 — Sat, 05 Nov 2022 15:06:23 +0000

A Javascript engine is a program that executes JavaScript code, a popular one is Google V8 engine.

It is composed by two main components the heap and callstack.
The heap is used for memory allocation of variables and objects, at the top of the current scope, a process called hoisting.

During the phase of function execution, an execution context is created, which includes:

a global object window (in case of the browser)
a special object called 'this' and
a ref to the outer environement.

A callstack is a list that tracks functions that have been called during the execution of the code.
JavaScript it is single threaded and it has one CallStack.
If a function is called is pushed at the top of the call stack list, and when it is executed, it's removed from the list.

Asynchronous tasks are placed in a so called callback queue and executed only when the call stack is empty.
The job of the event loop is to check if the call stack is empty and in this case it executes tasks from the callback queue.
Web API calls are added from callstack to the web api container until an action is triggered (e.g. DOM, ajax call, button click).
Once an action is triggered, a callback function is added to the callback queue, and executed when the call stack is empty.

interactive demo

DEV Community: mz4

JavaScript - Prototype

JavaScript Engine, Heap, Call Stack, Web APIs, Event loop and Callback queue