Menu
I'm struggling to understand the difference between defining a property inside vs outside the constructor. In the below example both properties are accessible on the instance in the same way, what is the difference?
class Foo {
constructor() {
this.bar = 1;
}
baz = 1;
}
const foo = new Foo();
console.log(foo.bar, foo.baz); // 1 1
598
Simple example no error if you don't use a constructor in the class. Constructors require the use of the new operator to create a new instance, as such invoking a class without the new operator results in an error, as it's required for the class constructor to create a new instance.
Note: A class cannot have more than one constructor() method. This will throw a SyntaxError .
A JavaScript class is a blueprint for creating objects. A class encapsulates data and functions that manipulate data. Unlike other programming languages such as Java and C#, JavaScript classes are syntactic sugar over the prototypal inheritance. In other words, ES6 classes are just special functions.
Yes, it is possible, when your constructor function executes, the this value has already the [[Prototype]] internal property pointing to the ValidateFields.
The constructor () method is called automatically when a class is initiated, and it has to have the exact name "constructor", in fact, if you do not have a constructor method, JavaScript will add an invisible and empty constructor method. Note: A class cannot have more than one constructor () method. This will throw a SyntaxError.
The body of a class is executed in strict mode, i.e., code written here is subject to stricter syntax for increased performance, some otherwise silent errors will be thrown, and certain keywords are reserved for future versions of ECMAScript. The constructor method is a special method for creating and initializing an object created with a class.
If you don't provide your own constructor, then a default constructor will be supplied for you. If your class is a base class, the default constructor is empty: If your class is a derived class, the default constructor calls the parent constructor, passing along any arguments that were provided: That enables code like this to work:
Note: A class cannot have more than one constructor () method. This will throw a SyntaxError. You can use the super () method to call the constructor of a parent class (see "More Examples" below).
They do the same thing.
Defining the property outside the constructor is new class field syntax. If you need to support older browsers, either use the constructor method, or use Babel to transpile the code first down to older syntax.
Note that class fields run before the constructor finishes - either right after the super call, if there is one, or at the very beginning of the constructor.
class Foo {
prop = console.log('Class field running');
constructor() {
this.prop2 = console.log('Constructor running');
}
}
const foo = new Foo();Related: Private fields (also very new syntax) must be initialized outside of the constructor, so that the class can understand which fields are private at compile time:
class Foo {
constructor() {
this.bar = 1;
// Not OK:
// this.#foo = 1;
}
// OK:
#baz = 1;
}
const foo = new Foo();If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
