What is causing Typescript to execute an overridden child method from the parent class when child.listen() is called?

Question

What is causing Typescript to execute an overridden child method from the parent class when child.listen() is called?

class Base {

    serverSetup(){
        console.log("BaseClass")
    }

    listen() {
        this.serverSetup();
    }
}

class Child extends Base {

    serverSetup() {
        console.log("ChildClass")
    }
}

const child = new Child();
child.listen();

Why is the output ChildClass? It seems like this in the Base class should only access the serverSetup method in its own class. Is there a way to invoke the listen function from the child instance and have it first execute the Base class' serverSetup() method without using super.serverSetup() within the Child class?

javascript typescript class inheritance this

Answer 1

Answer №1

this within a function's context is determined by how it is invoked. In this scenario, since it is executed on the child instance, the setupServer method of the child will be invoked.

The reason why removing the setupServer method from the base class results in an error in TypeScript:

class Base {

    listen() {
        this.setupServer();
    }
}

class Child extends Base {

    setupServer() {
     console.log("ChildClass")
    }
}

const child = new Child();
child.listen();

The explanation is straightforward - if you were to create an object from the Base Class at any point, calling this.listen() would cause failure. TypeScript prevents this behavior even if the setupServer function is later defined in the child class.

Answer 2

this within a function's context is determined by how it is invoked. In this scenario, since it is executed on the child instance, the setupServer method of the child will be invoked.

The reason why removing the setupServer method from the base class results in an error in TypeScript:

class Base {

    listen() {
        this.setupServer();
    }
}

class Child extends Base {

    setupServer() {
     console.log("ChildClass")
    }
}

const child = new Child();
child.listen();

The explanation is straightforward - if you were to create an object from the Base Class at any point, calling this.listen() would cause failure. TypeScript prevents this behavior even if the setupServer function is later defined in the child class.

Answer 3

Answer №2

Even if you extend another class, each instance remains unique and maintains its identity even when interacting with methods from the superclass.

For instance, in the scenario you provided, when the execute method of the Parent class calls this.runTask(), the reference to this still points to child, which is an instance of Child. As a result, the search for the runTask method will start at the level of Child.

Answer 4

Even if you extend another class, each instance remains unique and maintains its identity even when interacting with methods from the superclass.

For instance, in the scenario you provided, when the execute method of the Parent class calls this.runTask(), the reference to this still points to child, which is an instance of Child. As a result, the search for the runTask method will start at the level of Child.

What is causing Typescript to execute an overridden child method from the parent class when child.listen() is called?

Answer №1

Answer №2

Similar questions

Occasionally, the former PHP session variable will be retrieved

Horizontally position the main word from the D3-WordCloud in the center

What is the best way to implement a Facebook share button using the Facebook Javascript SDK within an Ajax request?

Ways to Conceal/Deactivate Information in HTML

Is it possible to utilize html5mode with a Node server in AngularJS?

What is the best way to send multiple requests for the same file and retrieve the necessary response in PHP using jQuery AJAX?

When invoking mongoose .save() in Node.js, it experiences delays when dealing with three levels of nested subdocuments

use javascript to color the image based on a specified number or percentage

Navigational issues while incorporating path.join with __dirname in node.js

What could be causing Highchart to return the error message "Typeerror: undefined variable byte"?

Verification of input on ng-repeat table

Is it possible for bs.reload(*.html) to refresh all HTML files located within the app directory?

Unleashing the power of DOM events through jQuery observables

Is there a way to bring this specific function into a separate file?

Refreshing the page does not update the API requests

Unable to change the value of a variable in a function in AngularJS

In TypeScript, what specific type or class does a dynamically imported module belong to?

What steps do I need to take to set up an SSH CLI Endpoint on my NodeJS Server?

How can I enable editing for specific cells in Angular ag-grid?

Tips for incorporating the useContext hook into Next JS using .tsx files?