What causes the `super` keyword property to return undefined within an ES6 class?

Question

What causes the `super` keyword property to return undefined within an ES6 class?

As a newcomer to ES6 classes, I am exploring how inheritance functions within it. To experiment with this concept, I have constructed a parent class named Modal and a child class called ChildModal. Below is the content of these classes:

class Modal {
    constructor(selector, document) {
        this.selector = selector;
        this.document = document;
    }

    get title() {
        return this._title;
    }

    set title(title) {
        if(!title) {
            throw new Error('Original title cannot be empty');
        }
        this._title = title;
    }

    defineNewTitle(newContent) {
        this.title = newContent + this.title;
    } 

    assignNewTitle() {
        $(this.selector).text(this.title);
    }
}

var modal = new Modal("#mainTitle");

modal.title = "Standards";

modal.defineNewTitle("JavaScript ");

modal.assignNewTitle();

class ChildModal extends Modal {
    constructor(selector, title) {
        super(selector, title);
    }

    defineChildTitle(title) {
        this.title = title + this.title;
    }

    assignChildTitle() {
        $(this.selector).text(this.title);
    }
}

var child = new ChildModal("#childTitle");
child.defineChildTitle("Wow ");
child.assignChildTitle();

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<title>Class test</title>
<h1 id="mainTitle">
Main title
</h1>
<h2 id="childTitle">
Child title
</head>
<body>
<script src="Modal.js"></script>
</body>
</html>

In my implementation, I anticipate the h2 tag to display 'Wow JavaScript Standards', yet it currently shows 'Wow undefined'. The issue lies in the defineChildTitle method where this.title is not being recognized. Despite inheriting from the Modal class in the constructor function of ChildModal, why does this.title not reflect as 'JavaScript Standard' as expected?

javascript class es6-modules

Answer 1

Answer №1

Each instance of a class has its own unique set of fields, such as title, selector, and document. This means that assigning a title to one variable does not affect any other instances or classes.

When the ChildModal class calls super(selector, title), it passes its title argument to the constructor of the Modal class. The title is then stored in the document field of the Modal class.

However, if you attempt to concatenate the title with itself using this.title = title + this.title;, the title field will be undefined. As a result, the final value of the title ends up being "Wow" + undefined, which equals "Wow undefined".

Answer 2

Each instance of a class has its own unique set of fields, such as title, selector, and document. This means that assigning a title to one variable does not affect any other instances or classes.

When the ChildModal class calls super(selector, title), it passes its title argument to the constructor of the Modal class. The title is then stored in the document field of the Modal class.

However, if you attempt to concatenate the title with itself using this.title = title + this.title;, the title field will be undefined. As a result, the final value of the title ends up being "Wow" + undefined, which equals "Wow undefined".

Answer 3

Answer №2

Make sure to set the _title variable in your constructor:

class Modal {
    constructor(selector, document) {
        this.selector = selector;
        this.document = document;
        this._title = ''
    }
}

var child = new ChildModal("#childTitle");
child.title = "JavaScript Standards"
child.defineChildTitle("Wow ");
child.assignChildTitle();

You are currently combining a string with undefined, which results in undefined.

Since you are creating two separate instances, they do not share the same data. Therefore, child.title is not equal to modal.title, resulting in different strings when concatenated together.

To resolve this issue, you must not only set the title using

modal.title = 'JavaScript Standards'

, but also ensure that

child.title = 'JavaScript Standards'

.

class Modal {
    constructor(selector, document) {
        this.selector = selector;
        this.document = document;
        this.title = ' '
    }

    get title() {
        return this._title;
    }

    set title(title) {
        if(!title) {
            throw new Error('Title cannot be empty');
        }
        this._title = title;
    }

    redefineTitle(newContent) {
        this.title = newContent + this.title;
    } 

    applyNewTitle() {
        $(this.selector).text(this.title);
    }
}

var modal = new Modal("#mainTitle");

modal.title = "Standards";

modal.redefineTitle("JavaScript ");

modal.applyNewTitle();

class ChildModal extends Modal {
    constructor(selector, title) {
        super(selector, title);
    }

    defineChildTitle(title) {
        this.title = title + this.title;
    }

    assignChildTitle() {
        $(this.selector).text(this.title);
    }
}

var child = new ChildModal("#childTitle");
child.title = "JavaScript Standards"
child.defineChildTitle("Wow ");
child.assignChildTitle();

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<title>Class test</title>
<h1 id="mainTitle">
Main title
</h1>
<h2 id="childTitle">
Child title
</head>
<body>
<script src="Modal.js"></script>
</body>
</html>

Answer 4

Make sure to set the _title variable in your constructor:

class Modal {
    constructor(selector, document) {
        this.selector = selector;
        this.document = document;
        this._title = ''
    }
}

var child = new ChildModal("#childTitle");
child.title = "JavaScript Standards"
child.defineChildTitle("Wow ");
child.assignChildTitle();

You are currently combining a string with undefined, which results in undefined.

Since you are creating two separate instances, they do not share the same data. Therefore, child.title is not equal to modal.title, resulting in different strings when concatenated together.

To resolve this issue, you must not only set the title using

modal.title = 'JavaScript Standards'

, but also ensure that

child.title = 'JavaScript Standards'

.

class Modal {
    constructor(selector, document) {
        this.selector = selector;
        this.document = document;
        this.title = ' '
    }

    get title() {
        return this._title;
    }

    set title(title) {
        if(!title) {
            throw new Error('Title cannot be empty');
        }
        this._title = title;
    }

    redefineTitle(newContent) {
        this.title = newContent + this.title;
    } 

    applyNewTitle() {
        $(this.selector).text(this.title);
    }
}

var modal = new Modal("#mainTitle");

modal.title = "Standards";

modal.redefineTitle("JavaScript ");

modal.applyNewTitle();

class ChildModal extends Modal {
    constructor(selector, title) {
        super(selector, title);
    }

    defineChildTitle(title) {
        this.title = title + this.title;
    }

    assignChildTitle() {
        $(this.selector).text(this.title);
    }
}

var child = new ChildModal("#childTitle");
child.title = "JavaScript Standards"
child.defineChildTitle("Wow ");
child.assignChildTitle();

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<title>Class test</title>
<h1 id="mainTitle">
Main title
</h1>
<h2 id="childTitle">
Child title
</head>
<body>
<script src="Modal.js"></script>
</body>
</html>

Answer 5

Answer №3

When it comes to ES5 classes, they still rely on prototype.

An alternative approach could involve changing modal.title = "Standards"; to

Modal.prototype.title = "Standards";

.

By doing this, you are not modifying the property in the instance directly, but rather altering the value in the prototype (which is essentially the class definition):

class Modal {
    constructor(selector, document) {
        this.selector = selector;
        this.document = document;
    }

    get title() {
        return this._title;
    }

    set title(title) {
        if(!title) {
            throw new Error('Original title cannot be empty');
        }
        this._title = title;
    }

    defineNewTitle(newContent) {
        this.title = newContent + this.title;
    } 

    assignNewTitle() {
        $(this.selector).text(this.title);
    }
}

var modal = new Modal("#mainTitle");

Modal.prototype.title = "Standards";

modal.defineNewTitle("JavaScript ");

modal.assignNewTitle();

class ChildModal extends Modal {
    constructor(selector, title) {
        super(selector, title);
    }

    defineChildTitle(title) {
        this.title = title + this.title;
    }

    assignChildTitle() {
        $(this.selector).text(this.title);
    }
}

var child = new ChildModal("#childTitle");
child.defineChildTitle("Wow ");
child.assignChildTitle();

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<title>Class test</title>
<h1 id="mainTitle">
Main title
</h1>
<h2 id="childTitle">
Child title
</head>
<body>
<script src="Modal.js"></script>
</body>
</html>

Answer 6

When it comes to ES5 classes, they still rely on prototype.

An alternative approach could involve changing modal.title = "Standards"; to

Modal.prototype.title = "Standards";

.

By doing this, you are not modifying the property in the instance directly, but rather altering the value in the prototype (which is essentially the class definition):

class Modal {
    constructor(selector, document) {
        this.selector = selector;
        this.document = document;
    }

    get title() {
        return this._title;
    }

    set title(title) {
        if(!title) {
            throw new Error('Original title cannot be empty');
        }
        this._title = title;
    }

    defineNewTitle(newContent) {
        this.title = newContent + this.title;
    } 

    assignNewTitle() {
        $(this.selector).text(this.title);
    }
}

var modal = new Modal("#mainTitle");

Modal.prototype.title = "Standards";

modal.defineNewTitle("JavaScript ");

modal.assignNewTitle();

class ChildModal extends Modal {
    constructor(selector, title) {
        super(selector, title);
    }

    defineChildTitle(title) {
        this.title = title + this.title;
    }

    assignChildTitle() {
        $(this.selector).text(this.title);
    }
}

var child = new ChildModal("#childTitle");
child.defineChildTitle("Wow ");
child.assignChildTitle();

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<title>Class test</title>
<h1 id="mainTitle">
Main title
</h1>
<h2 id="childTitle">
Child title
</head>
<body>
<script src="Modal.js"></script>
</body>
</html>

What causes the `super` keyword property to return undefined within an ES6 class?

Answer №1

Answer №2

Answer №3

Similar questions

What is preventing the item from utilizing the custom texture I created?

Optimizing AngularJS ui-router to maintain state in the background

Whenever I execute my code, the browser consistently crashes

What is the method for determining the height of a div element when it is set to 'height=auto'?

Javascript code for populating multiple objects with new items using a nested for loop

JavaScript and jQuery are lightning fast, especially when the page is reloaded

Having trouble passing multiple associative array values from JavaScript/AJAX to PHP

Discovering access to this.$i18n.locales from store getter in Nuxt, i18n, and Vuex

Searching for a JavaScript button via aria-label and interacting with it using Python Selenium

What is the most effective method for displaying an error code when a JavaScript error occurs?

Is there a way to ajax just specific HTML table rows instead of transmitting all the form inputs?

Discover an Easy Way to Scroll to the Bottom of Modal Content with Bootstrap 5 on Your Razor Page

Implementing Text Box Control Validation within a Gridview using UpdatePanel in c# ASP.Net

Yii is interpreting the URL to point to a specific controller and action instead of directly running the script

updating dropdown options based on user input with PHP

Utilizing encoding and decoding techniques in PHP and JavaScript with robust data attribute validation

Looking for a substitute for iframes when using jQuery UI tabs?

It seems that there is a null value being returned in the midst of the

Undefined Response Error when Utilizing Dropzone for File Upload in Express

"Encountering a hiccup with the Firebase service worker in Messaging and Firebase