|

Create or Edit festival Post

Title

Post name[used as URL tag]

Keywords

Price

Quota

<h3>Introduction</h3><p>Classes in JavaScript provide a cleaner, more expressive syntax for object-oriented programming. They let you define blueprints for objects, support inheritance, and define static (class-level) methods. In this post you will learn:</p><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>How to define a class</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>How to use inheritance with extends</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>How to use and define static methods and properties</li></ol><h2><br></h2><h2>1. Defining a Class</h2><p>You can define a class in JavaScript using the class keyword. A class encapsulates a constructor and methods.</p><p>Syntax:</p><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain"><br></div><div class="ql-code-block" data-language="plain">class Person {</div><div class="ql-code-block" data-language="plain">  constructor(name, age) {</div><div class="ql-code-block" data-language="plain">    this.name = name;</div><div class="ql-code-block" data-language="plain">    this.age = age;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br></div><div class="ql-code-block" data-language="plain">  greet() {</div><div class="ql-code-block" data-language="plain">    return `Hi, I am ${this.name}, aged ${this.age}`;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain">}</div></div><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>constructor(...) is a special method used when creating a new instance</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Methods defined in the class (like greet) become part of the prototype and are shared across instances</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>You instantiate with new:</li></ol><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain"><br></div><div class="ql-code-block" data-language="plain">const alice = new Person("Alice", 30);</div><div class="ql-code-block" data-language="plain">console.log(alice.greet());</div></div><h2><br></h2><h2>2. Class Inheritance</h2><p>Inheritance allows one class to extend another, inheriting its methods and properties, while adding or overriding functionality.</p><p>Syntax:</p><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain"><br></div><div class="ql-code-block" data-language="plain">class Employee extends Person {</div><div class="ql-code-block" data-language="plain">  constructor(name, age, role) {</div><div class="ql-code-block" data-language="plain">    super(name, age);   // call parent constructor</div><div class="ql-code-block" data-language="plain">    this.role = role;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br></div><div class="ql-code-block" data-language="plain">  describeRole() {</div><div class="ql-code-block" data-language="plain">    return `I am a ${this.role}`;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain">}</div></div><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>extends sets up the prototype chain</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>super(...) calls the parent class constructor (must be used before accessing this)</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Subclasses inherit methods from the parent:</li></ol><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain"><br></div><div class="ql-code-block" data-language="plain">const bob = new Employee("Bob", 25, "Developer");</div><div class="ql-code-block" data-language="plain">console.log(bob.greet());        // From Person</div><div class="ql-code-block" data-language="plain">console.log(bob.describeRole()); // From Employee</div></div><p>You can also override parent methods:</p><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain"><br></div><div class="ql-code-block" data-language="plain">class Employee extends Person {</div><div class="ql-code-block" data-language="plain">  greet() {</div><div class="ql-code-block" data-language="plain">    const base = super.greet();</div><div class="ql-code-block" data-language="plain">    return `${base}. My role is ${this.role}`;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain">}</div></div><p>Here super.greet() calls the parent’s greet method within the child.</p><h2><br></h2><h2>3. Static Methods & Properties</h2><p>Static methods are defined on the class itself, not on instances. They’re useful for utility operations that don’t depend on instance data.</p><p>Definition:</p><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain"><br></div><div class="ql-code-block" data-language="plain">class MathUtil {</div><div class="ql-code-block" data-language="plain">  static add(a, b) {</div><div class="ql-code-block" data-language="plain">    return a + b;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br></div><div class="ql-code-block" data-language="plain">  static description = "Utility class for math operations";</div><div class="ql-code-block" data-language="plain">}</div></div><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Call static methods via the class, not an instance:</li></ol><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain"><br></div><div class="ql-code-block" data-language="plain">console.log(MathUtil.add(4, 5));            // 9</div><div class="ql-code-block" data-language="plain">console.log(MathUtil.description);          // "Utility class for math operations"</div></div><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Static methods cannot access this in the context of an instance—they’re detached from instances</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Static methods are often used for factory methods, helper functions, or operations on class-wide data</li></ol><p>You can also define static properties using the static keyword (supported in newer JavaScript versions).</p><h2><br></h2><h2>Conclusion</h2><p>JavaScript’s class syntax provides a more intuitive way to write object-oriented code. With classes, you can:</p><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Define reusable blueprints (constructors and methods)</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Extend behavior via inheritance</li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Use static methods and properties for class-level logic</li></ol><p><br></p>

Refer to image as [image1] or [image2] or so on in the text.

Image 1

Image 2

Image 3

Image 4

I Agree with the Terms and Conditions

Type the number that you see in image.

Delete this post

Create or Edit festival Post

Member's Sites: