I am having a problem with the class the alternative of the constructor function in ES6

JavaScript
1

Hey,

I understood that the class is a new syntax in new ES6 it is the alternative to the constructor function

this is the constructor function syntax

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

and this is how to generate objects from the constructor function

let employee = new User("Hamza", 25, 1000);

and here is the new syntax in ES6 using the class which as I understood just a new syntax with no differences under the hood, it is also used to generate objects

class User { 
    constructor(name, age, salary){
    this.name = name;
    this.age= age;
    this.salary = salary;     
   }
}

and to generate an object it is the same way as the constructor function

let employee = new User("Hamza", 25, 1000);

now when I get to learn new concepts like static properties and methods everything got a mess in my head how it is possible to add properties and methods out of the constructor isn’t the constructor that constructs the object so what about what is out of it

class User { 
    constructor(name, age, salary){
    this.name = name;
    this.age= age;
    this.salary = salary;     
   }

  static countMembers() {
    return `${this.age} years old`;
  }
}

Challenge: ES6 - Use class Syntax to Define a Constructor Function

Link to the challenge:

2

what do you mean?

method you can create outside of “constructor”, but why would you want to create new “properties” that is not already in “constructor” function?

3

The class itself is an object, that is User is an object so it can have methods or properties assigned to it.

Note that the static function will not have a “this” value because it is called in the context of the class and not an object of that class.

4

Static methods are ones that are attached directly to the object you create rather than the prototype, they don’t know anything about a specific instance and you don’t use new with them.

So this is a static method on Array:

You use it like:

Array.isArray([1,2,3]) // true
Array.isArray(4) // false

It’s just a function that takes a value and returns a value but that is attached to the Array object because it makes sense to put it there.

This is a prototype method on Array:

You use it like:

[1,2,3].indexOf(1) // 0
[1,2,3].indexOf(4) // -1

It acts on whatever this is (so, a specific instance of Array).

So this makes no sense:

[1,2,3].isArray(/* argument here */)

And neither does this:

Array.indexOf(1) // 1 what, what array?

Example:

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

User.prototype.describe = function() {
  return `This user is called ${this.name} and their age is ${this.age}!`;
}

User.describeType = function () {
  return "The 'User' object is used to store information about individual users";
}

const user1 = new User("Gary", 26);
const user2 = new User("Jen", 31);

user1.describe() // "This user is called Gary and their age is 26"
user2.describe() // "This user is called Jen and their age is 31"

User.describeType() // "The 'User' object is used to store information about individual users"

And using class, identical to above:

class User {
  static describeType() {
    return "The 'User' object is used to store information about individual users";
  }

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  describe() {
    return `This user is called ${this.name} and their age is ${this.age}!`;
  }
}
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.