Kevin Powell - Community•3mo ago

classes | constructor, super, get & set

Hey, i just want to double check some knowledge and ask some questions regarding these topics since i don't really understand them. 1) is constructor a way to pass external values when creating a new instance of a class to this. values? If so, when you don't need to do this, does it need to be added? 2) what does super do? the mdn docs say it allows you to access properties on an object literal or class's [[Prototype]], but what does this mean? Is it that it allows you to access this. values from the original class if another extends it? 3) the mdn docs say the get and set functions allow you to get and set this. values. Does get only allow you to return a value and set only allow you to change it or can other things be done within these? Thanks in advance.

32 Replies

ἔρως•3mo ago

1- a constructor is what initializes the class you can receive some parameters, but it isn't required. 2- super is the parent class that you're extending 3- get and set allow you to define functions that handle getting and setting a value these are known as "getters" and "setters"

dys 🐙•3mo ago

For example, I'm using a custom object in the React Context I'm creating to expose some information pulled from an online source to several child components. The object definition looks like:

export class ChaptersArray<T> extends Array {
  current = 0

  constructor(...items: Array<T>) {
    super()
    this.push(...items)
  }

  get active() {
    return this[this.current]
  }
}

export class ChaptersArray<T> extends Array {
  current = 0

  constructor(...items: Array<T>) {
    super()
    this.push(...items)
  }

  get active() {
    return this[this.current]
  }
}

A "ChaptersArray" is returned from the chapters property of a Book. Having current & active properties lets me write statements like book.chapters.current to represent the index of the active chapter and book.chapters.active (note the lack of parentheses when accessing a getter) to get the Chapter itself. A ChaptersArray extends Array, so it is an Array. The normal constructor for an Array takes a number and returns an Array with that number of elements. The constructor for a ChaptersArray takes a list of elements, calls the constructor of the "superclass" with no arguments, and then inserts all the elements passed into its constructor into itself.

ἔρως•3mo ago

something important about get and set - the name of the function is the name of the property taking on his example, if you access .active, you get a value, but you can't do .active = something as it doesn't have a set a way to have class constants is to have a static set CONSTANT_NAME() { return 1; } this allows it to be accessed from, E.g.: ChaptersArray.CONSTANT_NAME and it has all the properties of constants in other classes: read-only, accessible from the class itself and always have the same value (however, you can change the value if you want)

ἔρως•3mo ago

oh, and since classes are just syntax sugar on top of objects, setters and getters exist for objects, so, this is valid syntax for all modern browsers: let x = { get x() { return 5; } }

snxxwyyOP•3mo ago

awesome stuff, this is really useful info, thank you both. A couple questions: 1) so you only define super() when you extend another class? You say it's the parent class you're extending, but what does defining it do allow for? 2) What's the main differences between classes and objects if they're similar?

ἔρως•3mo ago

you don't define the super - it simply exists and it works like this - but you may need to run super() to initialize the constructor of the parent class the difference between classes and objects is that you have to implement EVERYTHING manually that the classes do and i mean EVERYTHING setters, getters, static variables and methods, constructor, private (static) variables and functions, static initialization blocks and much much much more oh, and extending another object isn't always fun

snxxwyyOP•3mo ago

so essentially super allows the extension to be possible and access parent class this values? ah does mdn have docs on doing that for objects? i can't seem to find them. And when you mention static variables, i assume being set like this, is that only something you can do inside the class, and what does it typically do?

ἔρως•3mo ago

it should have documentation about prototypes and constructors no, the extension is possible without super, but the constructor may not execute if it is a class with just static functions and properties, you don't need to do super() inside the constructor

snxxwyyOP•3mo ago

is it this? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor

MDN Web Docs

Object.prototype.constructor - JavaScript | MDN

The constructor data property of an Object instance returns a reference to the constructor function that created the instance object. Note that the value of this property is a reference to the function itself, not a string containing the function's name.

snxxwyyOP•3mo ago

oh okay i see, and the constructor as you say is the initator, so that's what allows the class to function?

ἔρως•3mo ago

it's what initializes he class the constructor is called when an instance is created yes, but as you can see, it's a huge huge fucking mess just stick to classes all you need to know is that prototypes exist

snxxwyyOP•3mo ago

oh right that makes sense yeah it looks wild, so do objects have any other use or should you mainly pick classes over them as you say? perhaps they could be used for a dictionary sort of layout or something

ἔρως•3mo ago

depending on your needs, a map may be more suitable but as a simple way to pass key-value pairs, objects (also known as "pojos" - "plain old javascript objects" or also called "json objects") are very useful

snxxwyyOP•3mo ago

oh i see, so like this?

const json = '{"result": true, "count": 42}';

const json = '{"result": true, "count": 42}';

and i assume you'd access them like this?

const obj = JSON.parse(json);

console.log(obj.count);
// Expected output: 42

const obj = JSON.parse(json);

console.log(obj.count);
// Expected output: 42

ἔρως•3mo ago

without the quotes just this: const json = {"result": true, "count": 42};

snxxwyyOP•3mo ago

oh right, i assume theres no need for json.parse either without the quotes then?

ἔρως•3mo ago

in 99.9% of cases, yes

snxxwyyOP•3mo ago

ah okay, i see, i appreciate all the help here, thanks

ἔρως•3mo ago

you're welcome people sometimes refer to those as "json objects", which is incorrect but it is a term that will show up sometimes

snxxwyyOP•3mo ago

i'll keep that in mind, thanks i assume they're most commonly refered to as "plain old javascript objects"?

ἔρως•3mo ago

no, they're refered as just "objects", most of the time

snxxwyyOP•3mo ago

oh okay so these are "objects" and objects are "objects" haha, lots to remember

ἔρως•3mo ago

but "plain old javascript objects" is a name used when you need to disambiguiate between a literal object (E.g.: let x = {}) and an object instance (E.g.: let x = new Image()) it's very confusing

snxxwyyOP•3mo ago

oh okay i see, thanks for clearing that up yeah js seems very broad, there's lots to every area

ἔρως•3mo ago

oh, yeah, there's A LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOT to remember just to cook your noodle a little, this is NOT an object, but a block of code with another scope:

let x = {};
{
  let x = [];
}

let x = {};
{
  let x = [];
}

this is perfectly valid, but it is invalid if you remove the { and the }

snxxwyyOP•3mo ago

That’s interesting. There’s so many little things to everything, I have a feeling I’ll be referring to the docs a lot haha

ἔρως•3mo ago

guess what everybody does

snxxwyyOP•3mo ago

Exactly that

ἔρως•3mo ago

you got it!

TOMUTO 🍅•3mo ago

i believer this is valid in mostly lang no?

ἔρως•3mo ago

not really. it isnt valid in php and i think it isnt valid in c# too

TOMUTO 🍅•3mo ago

i see ok

Gaming

Programming

classes | constructor, super, get & set

Did you find this page helpful?