ES6: Use class Syntax to Define a Constructor Function Andrej

JavaScript
1 
class Vegetable {
  constructor (name) {
    this.name = name
  }
}

Why does “this.name” go here, I thought the property should go here for example “Vegetable”

It doesnt make sense, “this.name” = carrot so basically it is saying carrot = carrot?

2

No, it doesn’t actually make carrot = carrot. Using this on an object function means creating an object using the Vegetable. What it’s basically doing is just creating an object Vegetable.name. This particular code is called Class constructor method. This is basically creating a template that can be used. So using this will make it be able to receive an input and outputs something according to that input. That’s the main reason it uses this. So you can create a new variable. Here’s an example:


class Vegetable {
  constructor (name) {
    this.name = name
  }
};

/* I declared a variable called Carrots, and say it to create a new value
using the Vegetables template, and pass in the constructor "carrot". */
let Carrots = new Vegetables("carrot");

/* So when the constructor "carrot" is passed, as you can see on the 
Vegetables constructor, it is being assigned to a variable/parameter
called name. Then the method will create an object of Carrots.name
and have a value of the parameter name */
console.log(Carrots.name) //this will outputs carrot
3 Likes
4

Ok, thank you for clearing that up. Im just still a little confused so your basically saying this.name = Vegetable.name? The value of carrot does not get passed to this.name making it this.carrot?

What I am trying to say is that shouldn’t this.name = vegetable, because that would make sense that vegetable = carrot. Or this.Vegetable = carrot. Not this.name.

If there are multiple vegetables inputted, then this.name = carrot or this.name = celery. That doesnt make sense to me

Thanks,

Andrej

5
  • Something like that. What I meant is that the class and constructor methods is often times used as a template, so you can create a new variable that falls into the category. Ex:
class Vegetable {
  constructor (name) {
    this.name = name
  }
};

/*I'm declaring a variable that has a value that is using a template from 
the Vegetable template. So it literally made a new Vegetable with 
a value of "carrot"*/
let Carrots = new Vegetables("carrot");
/* So now, in the JS, there is 2 Constructor. Vegetables and Carrots.
The variable I declared just took the Vegetable method and made it 
themsleves */
//So BEHIND THE SCENES these methods that exsited. 
//There is the original Vegetable 
class Vegetable {
  constructor (name) {
    this.name = name;
  }
};
//and also a new Carrots variable that uses that template
class Carrots {
  consturctor(name) {
    this.name = name;
  }
};
  • So when I say this.name is just like Vegetables.name, it will always
    change everytime you create a new variable using that template
//so In this class
class Vegetable {
  constructor (name) {
    this.name = name; //this is just Vegetable.name
  }
};
//and on the Carrots class that you cannot see, but it's behind the scene
class Carrots {
  consturctor(name) {
    this.name = name; //this is Carrots.name but you can't see this
  }
};
  • So when you console.log(Vegetable.name) it will spit out Vegetable, because that’s is it’s name.
1 Like
7

So basically you can create an infinitely specific number of functions? Class Carrots then Class Carrot Color and so on…

Also what is the point of having carrot.name = name. That statement doesnt make sense because then wouldn’t that mean carrot.name = carrot?

8

Yeah, so you can pass in as many variables using that template as much as you want. So ex:

class Vegetable {
  constructor (name) {
    this.name = name;
  }
};


let Carrots = new Vegetables("carrots");
let Asparagus = new Vegetables("asparagus");
let Broccoli = new Vegetables("broccoli");
let Tomato = new Vegetables("tomato");

Behind the scenes, they will have their own classes with the same template as Vegetables just different values and names.

3 Likes