In JavaScript, classes are a way to define blueprints for creating objects with similar properties and behaviors. They provide a syntax for creating objects based on a template or prototype. JavaScript classes were introduced in ECMAScript 2015 (ES6) and provide a more structured and familiar approach to object-oriented programming.

Objects In JavaScript:-

Objects can be used to represent complex entities and enable the creation of more advanced data structures in JavaScript. They are a cornerstone of the language and are widely used in web development and other JavaScript applications.

Here are the key properties of objects in JavaScript:

1. Key-Value Pairs: Objects in JavaScript store data using key-value pairs, where each key is a string (or Symbol) and each value can be any data type.

2. Object Literals: Objects can be created using object literals, which are enclosed in curly braces {}. The key-value pairs are defined within the curly braces, separated by commas.

3. Dot Notation: You can access object properties using dot notation, where the object name is followed by a dot (.) and the property name.

   For example: objectName.propertyName.

4. Bracket Notation: Object properties can also be accessed using bracket notation, where the property name is enclosed in square brackets [].

   For example: objectName["propertyName"].

5. Mutability: Objects in JavaScript are mutable, meaning you can add, modify, or delete properties even after the object is created.

6. Adding Properties: You can add new properties to an object by assigning a value to a new key.

   For example: objectName.newProperty = value.

7. Modifying Properties: Existing properties can be modified by assigning a new value to the corresponding key.

   For example: objectName.propertyName = newValue.

8. Deleting Properties: You can remove properties from an object using the delete keyword followed by the object name and the property name.

   For example: delete objectName.propertyName.

9. Object Methods: Objects can have methods, which are functions stored as properties of the object. These methods can be accessed and invoked using dot notation.

   For example: objectName.methodName().

10. Object Constructors: Objects can be created using constructor functions or classes, which provide a blueprint for creating multiple instances of objects with similar properties and behaviours.

11. Object Prototype: Objects in JavaScript inherit properties and methods from a prototype object, which allows for property sharing and method reuse.

12. Object Serialization: Objects can be converted to a string representation (serialization) using methods like JSON.stringify(), and can be parsed back into objects using JSON.parse()

Object creation:-

In JavaScript, objects can be created and manipulated in different ways. Three concepts related to object creation and manipulation are reference types and instantiation.

Reference Types:

In JavaScript, objects are reference types. This means that when you assign an object to a variable or pass it as a function argument, you're actually assigning a reference to the object rather than creating a new copy of it. This reference points to the object's location in memory.

For example:-

let obj1 = { value: 10 };
let obj2 = obj1; // obj2 references the same object as obj1
obj2.value = 20;
console.log(obj1.value); // Output: 20
//also 
[]===[] // Output : false

Context and Scope :

Context and scope are related concepts in JavaScript, as they both affect how variables and functions are accessed and behave within a program. While they are distinct concepts, they work together to determine the execution environment and the accessibility of variables and functions.

Here's how context and scope are related:

1. Scope Determines Variable Accessibility: Scope determines where variables and functions are defined and where they can be accessed within the code. Scopes are created by functions, blocks, and the global scope. The scope chain defines the hierarchy of scopes, allowing inner scopes to access variables and functions defined in outer scopes. So, the scope affects the visibility and availability of variables and functions within a specific context.

   • Global Scope: Variables and functions declared outside of any function or block have global scope. They are accessible throughout the entire JavaScript program.

   • Function Scope: Variables and functions declared inside a function are accessible only within that function and any nested functions.

   • Block Scope: Variables declared with let and const keywords inside a block (e.g., within an if statement or for loop) is limited to that block's scope and is not accessible outside of it.

Context Determines the Value of "this": The value of the this keyword in JavaScript is determined by the context, which represents the object on which a function is being called. The context determines the execution context for a function and affects how it can access and interact with variables and functions.

• Global Context: In the global context (outside any function), this refers to the global object (e.g., window in a web browser or global in Node.js).

• Function Context: Within a function, this is determined dynamically at runtime, depending on how the function is called. It can refer to different objects based on the context of the function call.

• Object Method Context: When a function is called as a method of an object, this refers to the object itself. It allows the function to access and operate on the object's properties and methods.

By combining scope and context, you can control the visibility and accessibility of variables and functions within different execution contexts.

Instantiation

Instantiation in JavaScript refers to the process of creating an instance or object based on a blueprint or template. It involves creating a new object that inherits properties and methods from a class or constructor function. There are several distinct fundamental ways to instantiate objects in Javascript:

1. Constructor Functions:

   Constructor functions are traditional functions that are used with the new keyword to create objects. They define the structure and behaviour of the objects. Inside the constructor function, properties and methods are assigned to this keyword, which refers to the newly created instance.

    function Player(name, age) {
      this.nameOfThePlayer = name;
      this.ageOfThePlayer = age;
      this.greet = function() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
      }
    }
   
    const person = new Person('John', 25);
    person.greet(); // Output: Hello, my name is John and I'm 25 years old.
   

2. Classes (new keyword ):

   ES6 introduced the class syntax, which provides a more convenient and intuitive way to define objects and their behaviour. Classes act as blueprints for creating objects, and instances are created using the new keyword. Classes have constructors that are used to initialize object properties.

    class player {
      constructor(name, type) {
        this.playerName = name;
        this.playerType = type;
      }
   
      introduce() {
        console.log(`hi im ${this.playerName} , im a ${this.playerType}`);
      }
    }
   
    const wizard = new player("shahima", "High priestess");
   
    wizard.introduce(); // Output: hi im shahima , im a High prientess
   

   Object Literal Notation:

   Object literal notation is a simple and concise way to create objects directly. It involves defining an object using curly braces {} and specifying the properties and methods within the object declaration.

    const person = {
      name: 'John',
      age: 25,
      greet: function() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
      }
    };
   
    person.greet(); // Output: Hello, my name is John and I'm 25 years old.
   

3. Factory Functions: Factory functions are functions that create and return objects. They encapsulate the object creation process and can customize the object's properties and behaviour before returning it.

4. Object.create():

   The Object.create() method allows you to create a new object with a specified prototype object. It creates a new object and sets the specified object as its prototype, allowing for prototypal inheritance.

    const personPrototype = {
      greet: function() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
      }
    };
   
    const person = Object.create(personPrototype);
    person.name = 'John';
    person.age = 25;
    person.greet(); // Output: Hello, my name is John and I'm 25 years old.
   

Each of these ways of instantiation has its own syntax and use cases. The choice of which method to use depends on the specific requirements of your code and your coding style preferences.

We will discuss the use of constructors in Class along with inheritance (using ES6 Class Syntax ) for instantiation. This is the latest ES6 method of creating object instances for a class

Inheritance

Inheritance in JavaScript is a mechanism that allows objects to inherit properties and methods from other objects. It provides a way to create a hierarchy of objects where a child object can inherit the characteristics of its parent object.

There are multiple ways to implement inheritance in JavaScript, including:

1. Prototype Chain Inheritance

2. Constructor Inheritance

3. Object.create()

4. ES6 Class Syntax:

   The introduction of ES6 (ECMAScript 2015) introduced a class syntax to JavaScript that simplifies the implementation of inheritance. You can define classes using the class keyword, use the extends keyword to specify the parent class, and utilize the super keyword to call the parent's constructor and access its methods.

    class ParentClass {
      constructor() {
        // parent class constructor
      }
   
      parentMethod() {
        // parent class method
      }
    }
   
    class ChildClass extends ParentClass {
      constructor() {
        super(); // calling parent class constructor
        // child class constructor
      }
   
      childMethod() {
        // child class method
      }
    }
   

Using all of the above concepts

The code demonstrates the use of classes, inheritance, constructors, and method calls in JavaScript. It creates objects of different types (wizard and fighter) that inherit properties and methods from the player class, allowing for specific behaviors and functionality unique to each type of player.

// INSTANTIATION

// involves a number of concepts 1. Constructors  2. inheritence 3.Principal class and derived Class

class player {
  constructor(nam, type) {
    console.log("player", this);
    this.playerName = nam;
    this.playerType = type;
  }

  introduce() {
    console.log(`hi im ${this.playerName} , im a ${this.playerType}`);
  }
}

// using inheritance

class wizard extends player {
  constructor(spell, powers, nam, type) {
    // console.log("wiz", this); never use the derived class before "super" it will give error
    super(nam, type);
    this.spellWiz = spell;
    this.powersWiz = powers;
    console.log("wiz", this);
  }

  castSpell() {
    console.log(
      `I ${this.playerName} posses the power of ${this.powersWiz} , and I now cast a spell ${this.spellWiz}`
    );
  }
}

class fighter extends player {
  constructor(killCapacity, killTime, nam, type) {
    super(nam, type);
    this.killfig = killCapacity;
    this.killtim = killTime;
  }

  fightBugs() {
    console.log(
      `I ${this.playerName} posses the kill capacity of ${this.killfig} , and I can kill for ${this.killtim}`
    );
  }
}

// now instantly creating new players(Objects) of different kinds(wizards and fighters) using main class(player) and derived class(fighters and wizards)

const wiz = new wizard(
  "Abra cadabra ",
  "Turning readers in coding wizards",
  "Shahima",
  " HighPriestess"
);
const Bugkiller = new fighter("1000", "0.1 seconds", "Khushi", "cyberQueen");

//
wiz.introduce();
wiz.castSpell();

Bugkiller.introduce();
Bugkiller.fightBugs();

// Out put

// player wizard {}
// wiz wizard {
//   playerName: 'Shahima',
//   playerType: ' HighPriestess',
//   spellWiz: 'Abra cadabra ',
//   powersWiz: 'Turning readers in coding wizards'
// }
// player fighter {}
// hi im Shahima , im a  HighPriestess
// I Shahima posses the power of Turning readers in coding wizards , and I now cast a spell Abra cadabra 
// hi im Khushi , im a cyberQueen
// I Khushi posses the kill capacity of 1000 , and I can kill for 0.1 seconds

Explination:-

1. Class Definitions:

   • The player class is defined with a constructor that takes nam and type parameters. It initializes the playerName and playerType properties.

   • The player class also has an introduce method that logs a message to the console, displaying the player's name and type.

   • The wizard class extends the player class using the extends keyword. It has a constructor that takes additional parameters spell, powers, nam, and type. It calls the parent class constructor using the super keyword and initializes the spellWiz and powersWiz properties.

   • The wizard class also has a castSpell method that logs a message to the console, displaying the player's name, powers, and the spell being cast.

   • The fighter class also extends the player class. It has a constructor that takes additional parameters killCapacity, killTime, nam, and type. It calls the parent class constructor using super and initializes the killfig and killtim properties.

   • The fighter class also has a fightBugs method that logs a message to the console, displaying the player's name, kill capacity, and kill time.

2. Instantiation:

   • Two instances are created: wiz of the wizard class and Bugkiller of the fighter class. They are initialized with specific values for the constructor parameters.

3. Method Calls:

   • The introduce and castSpell methods are called on the wiz object, logging the corresponding messages to the console.

   • The introduce and fightBugs methods are called on the Bugkiller object, logging the respective messages to the console.

4. Output:

   • The output shows the console logs from the constructors and method calls.

   • Initially, the constructors of the wizard and fighter classes log their respective objects, showing the initial values of the properties.

   • The introduce method of wiz displays the player's name and type.

   • The castSpell method of wiz displays the player's name, powers, and the spell being cast.

   • The introduce method of Bugkiller displays the player's name and type.

   • The fightBugs method of Bugkiller displays the player's name, kill capacity, and kill time.

Entire example at glance