What is the reason for the base class constructor not being able to access the property values of the derived class

Question

What is the reason for the base class constructor not being able to access the property values of the derived class

Recently, I came across this scenario in my code:

class Base {
    // Default value
    myColor = 'blue';

    constructor() {
        console.log(this.myColor);
    }
}

class Derived extends Base {
     myColor = 'red'; 
}

// Prints "blue", expected "red"
const x = new Derived();

I was surprised to see that the derived class field initializer did not run before the base class constructor as I had expected. This led to the base class constructor outputting the wrong values for the myColor property.

Is this a bug in the code? What could be causing this behavior? Why does it happen this way? And most importantly, what should be the correct approach to achieving the desired outcome?

javascript typescript class ecmascript-next class-fields

Answer 1

Answer №1

A Feature, Not a Bug

Just to clarify, what you're experiencing is not a bug within TypeScript, Babel, or your JS runtime.

Understanding the Why

You may be wondering, "Why isn't this done correctly?" Let's delve into the specifics, focusing on TypeScript emit for different ECMAScript versions.

Downlevel Emit: ES3/ES5

When we inspect the emitted code for ES3 or ES5, it becomes apparent that the base class initialization precedes the constructor body in a logical sequence. This ensures that the fields are initialized before the constructor's execution, which is the desired behavior.

But what about the derived class?

No, the Order Matters

While some argue that the derived class initialization should occur first for various reasons, this approach is flawed. It disrupts the expected behavior and may lead to unintended consequences, especially in code like invoking base class methods relying on base class initializations.

Time Machine Required

Others propose a hypothetical solution involving informing the base class about derived class initializers. However, in a scenario where `Base` is in a separate file, this method isn't feasible for tools like TypeScript or Babel to implement.

Downlevel Emit: ES6

Classes are native to ES6, not TypeScript, and are transformed to ES6-compliant code. The sequence of super invocation and field initialization in derived classes follows a strict order due to language restrictions.

ES7+: Future Possibilities

The JavaScript committee is exploring options for field initializers in upcoming language versions, aiming to address these initialization challenges.

Object-Oriented Programming Principle Reminder

In OOP, a common guideline prohibits invoking virtual methods from constructors, extending to property initialization. This principle holds true across various languages, including JavaScript.

Potential Solutions

One recommended approach involves transforming field initialization into constructor parameters to ensure a predictable sequence of execution. Alternatively, an `init` pattern can be employed cautiously to avoid observing virtual behaviors during initialization.

Answer 2

A Feature, Not a Bug

Just to clarify, what you're experiencing is not a bug within TypeScript, Babel, or your JS runtime.

Understanding the Why

You may be wondering, "Why isn't this done correctly?" Let's delve into the specifics, focusing on TypeScript emit for different ECMAScript versions.

Downlevel Emit: ES3/ES5

When we inspect the emitted code for ES3 or ES5, it becomes apparent that the base class initialization precedes the constructor body in a logical sequence. This ensures that the fields are initialized before the constructor's execution, which is the desired behavior.

But what about the derived class?

No, the Order Matters

While some argue that the derived class initialization should occur first for various reasons, this approach is flawed. It disrupts the expected behavior and may lead to unintended consequences, especially in code like invoking base class methods relying on base class initializations.

Time Machine Required

Others propose a hypothetical solution involving informing the base class about derived class initializers. However, in a scenario where `Base` is in a separate file, this method isn't feasible for tools like TypeScript or Babel to implement.

Downlevel Emit: ES6

Classes are native to ES6, not TypeScript, and are transformed to ES6-compliant code. The sequence of super invocation and field initialization in derived classes follows a strict order due to language restrictions.

ES7+: Future Possibilities

The JavaScript committee is exploring options for field initializers in upcoming language versions, aiming to address these initialization challenges.

Object-Oriented Programming Principle Reminder

In OOP, a common guideline prohibits invoking virtual methods from constructors, extending to property initialization. This principle holds true across various languages, including JavaScript.

Potential Solutions

One recommended approach involves transforming field initialization into constructor parameters to ensure a predictable sequence of execution. Alternatively, an `init` pattern can be employed cautiously to avoid observing virtual behaviors during initialization.

Answer 3

Answer №2

In my opinion, there is a valid argument to classify this as a bug

When an unexpected action leads to undesired behavior, it disrupts the typical usage scenarios for class extensions. The ideal sequence of initialization steps to support your scenario would be as follows:

Base property initializers
Derived property initializers
Base constructor
Derived constructor

Challenges and Resolutions

- The TypeScript compiler currently includes property initializations in the constructor function

To address this issue, it is crucial to segregate property initializations from the invocation of constructor functions. A similar approach is adopted in C#, where base properties are initialized after derived properties, although this is deemed counterintuitive. One possible solution could involve the creation of helper classes, allowing the derived class to initialize the base class in any sequence.

class _Base {
    ctor() {
        console.log('base ctor color: ', this.myColor);
    }

    initProps() {
        this.myColor = 'blue';
    }
}
class _Derived extends _Base {
    constructor() {
        super();
    }

    ctor() {
        super.ctor();
        console.log('derived ctor color: ', this.myColor);
    }

    initProps() {
        super.initProps();
        this.myColor = 'red';
    }
}

class Base {
    constructor() {
        const _class = new _Base();
        _class.initProps();
        _class.ctor();
        return _class;
    }
}
class Derived {
    constructor() {
        const _class = new _Derived();
        _class.initProps();
        _class.ctor();
        return _class;
    }
}

// Outputs:
// "base ctor color: red"
// "derived ctor color: red"
const d = new Derived();

- Will the base constructor encounter issues when utilizing properties from the derived class?

Any functionality that fails within the base constructor can be transferred to a method that can be overridden in the derived class. Since derived methods are initialized before the base constructor is invoked, this approach will function correctly. For instance:

class Base {
    protected numThings = 5;

    constructor() {
        console.log('math result: ', this.doMath())
    }

    protected doMath() {
        return 10/this.numThings;
    }
}

class Derived extends Base {
    // Overrides. Would lead to division by 0 in base without overriding doMath
    protected numThings = 0;

    protected doMath() {
        return 100 + this.numThings;
    }
}

// Should display "math result: 100"
const x = new Derived();

Answer 4

In my opinion, there is a valid argument to classify this as a bug

When an unexpected action leads to undesired behavior, it disrupts the typical usage scenarios for class extensions. The ideal sequence of initialization steps to support your scenario would be as follows:

Base property initializers
Derived property initializers
Base constructor
Derived constructor

Challenges and Resolutions

- The TypeScript compiler currently includes property initializations in the constructor function

To address this issue, it is crucial to segregate property initializations from the invocation of constructor functions. A similar approach is adopted in C#, where base properties are initialized after derived properties, although this is deemed counterintuitive. One possible solution could involve the creation of helper classes, allowing the derived class to initialize the base class in any sequence.

class _Base {
    ctor() {
        console.log('base ctor color: ', this.myColor);
    }

    initProps() {
        this.myColor = 'blue';
    }
}
class _Derived extends _Base {
    constructor() {
        super();
    }

    ctor() {
        super.ctor();
        console.log('derived ctor color: ', this.myColor);
    }

    initProps() {
        super.initProps();
        this.myColor = 'red';
    }
}

class Base {
    constructor() {
        const _class = new _Base();
        _class.initProps();
        _class.ctor();
        return _class;
    }
}
class Derived {
    constructor() {
        const _class = new _Derived();
        _class.initProps();
        _class.ctor();
        return _class;
    }
}

// Outputs:
// "base ctor color: red"
// "derived ctor color: red"
const d = new Derived();

- Will the base constructor encounter issues when utilizing properties from the derived class?

Any functionality that fails within the base constructor can be transferred to a method that can be overridden in the derived class. Since derived methods are initialized before the base constructor is invoked, this approach will function correctly. For instance:

class Base {
    protected numThings = 5;

    constructor() {
        console.log('math result: ', this.doMath())
    }

    protected doMath() {
        return 10/this.numThings;
    }
}

class Derived extends Base {
    // Overrides. Would lead to division by 0 in base without overriding doMath
    protected numThings = 0;

    protected doMath() {
        return 100 + this.numThings;
    }
}

// Should display "math result: 100"
const x = new Derived();

What is the reason for the base class constructor not being able to access the property values of the derived class

Answer №1

A Feature, Not a Bug

Understanding the Why

Downlevel Emit: ES3/ES5

No, the Order Matters

Time Machine Required

Downlevel Emit: ES6

ES7+: Future Possibilities

Object-Oriented Programming Principle Reminder

Potential Solutions

Answer №2

In my opinion, there is a valid argument to classify this as a bug

Challenges and Resolutions

Similar questions

Incorporating an else statement into a function that handles AJAX calls upon receiving a response

What process is involved in implementing TCO (Tail Call Optimization) for a recursive anonymous function in ES5?

Filtering records by a joined association in Rails using Ajax

Php/JavaScript Error: Identifier Not Found

Ways to customize decoration in Material UI TextField

Updating the MLM binary tree system

The interactions and functionalities of jQuery sortable and draggable elements

When anchor is set programmatically, the focus outline is not displayed

Issue: React build script does not support conversion from 'BigInt' to 'number' error

Limit input to numbers only in Semantic UI React Form Field

Obtain additional information to address concerns related to onZoom and onPan issues on the line

Updating the user interface in react-apollo following a delete mutation

"Encountering an error: invalid CSRF token in Node.js csurf

Retrieve the content from paginated pages using ajax, apply a filter to it, and then add it to the existing page

I possess a certain input and am seeking a new and distinct output

Having difficulty updating the parent for all PortfolioItem/Feature that were copied for a specific PortfolioItem/MMF

The PHP file on the server is missing the mandatory "event" parameter for the EventSource

Automatic Clicks in the Chrome Console

Disable, Hide, or Remove Specific Options in a Single Dropdown Selection

Modify the CSS properties of the asp:AutoCompleteExtender using JavaScript