Similarities and differences between Class and Constructor Functions
In JavaScript, classes are similar to constructor functions in that they both provides ways to create objects with prototypal inheritance. Some claim that classes are essentially syntatic sugar for over constructor functions, but there are differences…
Classes differ from constructor functions in that
They are labelled by a special internal property called `[[IsClassConstructor]]
Class must be called with new
Class methods are non-enumerable, so we can’t use for..in to retrieve class methods (which we don’t usually want anyway)
Classes always use strict inside its construct
javascript
class User {
greet() {
return “Hello, there”
}
}
Class Expressions
Classes can be defined inside another expression, passed around, returned, assigned, etc.
javascript
// Class expression
let User = class {
greet() {
return “Heyo”;
}
}
Class expressions may also have a name:
`javascript
let User = class CoolClass {
greet() {
return CoolClass
}
}
new User().greet(); // Returns CoolClass definition
console.log(CoolClass) // error, not visible outside of the class
`
Class fields
Class fields is a feature that allows you to define properties directly on the class itself, instead of within the constructor method. It provides concise and readable code:
`javascript
class User {
name = “Joseph”;
surname = “Joestar”;
greet() {
console.log(Hello, this is ${this.name} ${this.surname})
}
}
const user = new User();
user.greet(); // Hello, this is Joseph Joestar
`
Add a # in front of the variable turns properties into private ones: #name.
You can also create static fields to define a property that is shared among all instances of the class.
`javascript
class User {
static type = “Admin”;
constructor(name) {
this.name = name;
}
greet() {
console.log(Hi, I am ${this.name} and I have ${this.type} permissions)
}
}
const user = new User(“Joseph”);
user.greet(); // Output: Hi, I am Joseph and I have Admin persmissions
`
Note: Class fields are a relatively new feature in JavaScript and may not be supported across all browsers and JavaScript environments. You may need to use polyfill or a transpiler like Babel to ensure compatibility with older environments.
