Understanding "Everything is an Object" in JavaScript

Primitive types:

• string

• number

• boolean

• null

• undefined

• symbol

• bigint

These are not object but Javascript automatically applied Wrapper on the top of it Which is Object

like :

• String

• Number

• Boolean

• Symbol

• BigInt

These are Wrapper which cover primitive types so we can access the methods/properties which we do not add manually on code. It is provided by these inbuilt Javascript Objects

so we can There is saying that every thing is object in JS

But How We can access the properties / methods ?

Through prototype , prototype is simply objects with lots of built in methods which javascript provide in number, string, objects, arrays . it is property of functions including constructor function and classes which we can used by using new keyword. It is built in objects which can access by instance created using new keyword

proto

instances created from these constructors have a __proto__ property that points to their constructor's prototype object

const num1 = 1;

/**
 * num1.__proto__
Number {0, toExponential: ƒ, toFixed: ƒ, toPrecision: ƒ, toString: ƒ, …}
num1.__proto__.__proto__
{__defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, __lookupSetter__: ƒ, …}
num1.__proto__.__proto__
{__defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, __lookupSetter__: ƒ, …}
num1.__proto__.__proto__.__proto__
null
 */

// num1.__proto__ // Number.prototype
// num1.__proto__.__proto__ // Object.prototype
// num1.__proto__.__proto__.__proto__ // null

// Number.prototype.__proto__===Object.prototype // true

This is called prototype chain. Now In js inheritance is applied by using this technique of prototype which is called prototypal inheritance. The properties and methods which added to prototype objects only get inherited in child or instance created from that function or class

const user1 = {
  name: "John",
  age: 30,
  greet: function () {
    console.log(
      `Hello, my name is ${this.name} and I am ${this.age} years old`
    );
  },
};
const user2 = {
  name: "Jane",
  age: 25,
};

console.log("user1", user1);
console.log("user2", user2);

// there is repetation of code in both objects they have same properties and methods and this violates DRY principle and also take more memory
// so we can use prototype to solve this problem
user2.__proto__ = user1;

console.log(user2.greet());
// by prototypal chaining we can access greet methods

we can make modal of objects using constructor function here we go

function User(name, age) {
  this.name = name;
  this.age = age;

  //   this.greet = function () {
  //     console.log(
  //       `Hello, my name is ${this.name} and I am ${this.age} years old`
  //     );
  //   };
}

User.prototype.greet = function () {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old`);
};
const user3 = new User("John", 30);
const user4 = new User("Jane", 25);
console.log(user3.greet());
console.log(user4.greet());

console.log(user3);
console.log(user4);

Here on both instance greet function created which is not good so we can add this greet function in prototype of this function which can inherits on objects created using new . In this way we can inherits properties . and also some memory save because the greet is in prototype which is created once and can be shared as many times.

By using Class

class is syntactical sugar for constructor function and it is more easier to apply prototypal inheritance

class Vehicle {
  constructor(name, model) {
    this.name = name;
    this.model = model;
  }
  start() {
    return `Starting ${this.name} ${this.model}`;
  }
}

class Car extends Vehicle {
  constructor(name, model, wheel, color) {
    super(name, model); // calling parent constructor
    this.color = color;
    this.wheel = wheel;
  }
  start() {
    const vehicleStart = super.start();
    return `${vehicleStart} with ${this.wheel} wheels and color ${this.color}`;
  }
}

const vehicle1 = new Vehicle("Toyota", "Corolla");
const vehicle2 = new Vehicle("Honda", "Civic");

const car1 = new Car("BMW", "X5", 4, "Black");
const car2 = new Car("Audi", "A6", 4, "White");

console.log("vehicle1", vehicle1.start());
console.log("vehicle2", vehicle2.start());
console.log("car1", car1.start());
console.log("car2", car2.start());