JavaScript's prototypical inheritance model allows objects to inherit properties and

Question

JavaScript's prototypical inheritance model allows objects to inherit properties and

Exploring javascript's prototypical inheritance and object-oriented programming is new to me. I attempted to create a base object called Account and then inherit the CheckingAccount from it. Below is my code snippet.

function Account(fName, lName) {
   this.firstName = fName;
   this.lastName = lName;

 }

 Account.prototype.balance = function() {
    console.log("This is the balance");
 }

 function CheckingAccount() {

    this.salary = 10000;
 }

 CheckingAccount.prototype = Object.create(Account.prototype);

 let account = new Account("John", "Doe");
 let checking = new CheckingAccount();
 CheckingAccount.balance();

Upon running this in Visual Studio, an error message pops up: "Uncaught TypeError: CheckingAccount.balance is not a function". Any guidance on resolving this issue would be highly appreciated.

javascript

Answer 1

Answer №1

It is advisable to call the method on the instance rather than the Class object (e.g., checking instead of CheckingAccount). Additionally, remember to modify the constructor accordingly. For more information, you can consult the MDN documentation.

You can view the changes implemented below:

function Account(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.salary = 0;
}

Account.prototype.balance = function() {
    return this.salary;    // you may need additional properties besides salary
}

function CheckingAccount() {
    this.salary = 10000;
}

CheckingAccount.prototype = Object.create(Account.prototype);
// Update the constructor
Object.defineProperty(CheckingAccount.prototype, 'constructor', {
    value: CheckingAccount,
    enumerable: false, // prevents it from appearing in 'for in' loop
    writable: true
});

let account = new Account("John", "Doe");
let checking = new CheckingAccount();

console.log('account balance:',      account.balance())
console.log('checking balance:',     checking.balance())
console.log('account constructor:',  account.constructor);
console.log('checking constructor:', checking.constructor);

Answer 2

It is advisable to call the method on the instance rather than the Class object (e.g., checking instead of CheckingAccount). Additionally, remember to modify the constructor accordingly. For more information, you can consult the MDN documentation.

You can view the changes implemented below:

function Account(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.salary = 0;
}

Account.prototype.balance = function() {
    return this.salary;    // you may need additional properties besides salary
}

function CheckingAccount() {
    this.salary = 10000;
}

CheckingAccount.prototype = Object.create(Account.prototype);
// Update the constructor
Object.defineProperty(CheckingAccount.prototype, 'constructor', {
    value: CheckingAccount,
    enumerable: false, // prevents it from appearing in 'for in' loop
    writable: true
});

let account = new Account("John", "Doe");
let checking = new CheckingAccount();

console.log('account balance:',      account.balance())
console.log('checking balance:',     checking.balance())
console.log('account constructor:',  account.constructor);
console.log('checking constructor:', checking.constructor);

Answer 3

Answer №2

To implement this functionality in ES6, use the `class` keyword properly. Below is an example showcasing two classes: Account and Chequing. The Account class contains properties like `balance`, `deposit`, and `showBook` functions, while the Chequing class extends the Account class and adds a `writeCheque` function. Despite being a child class, instances of Chequing can still access all parent class functions due to their inheritance from Account.

class Account {
  constructor(name) {
    this.name = name;
    this.amount = 0;
  }
  balance() {
    return this.amount
  }
  deposit(sum) {
    this.amount += sum;
  }
  showBook() {
    console.log("-------------------------");
    console.log("Account for",this.name);
    console.log(`Balance: $${this.amount}`);
  }
}

class Chequing extends Account {
  constructor(name) {
    super(name);
    this.cheques = [];
  }
  writeCheque(sum, to) {
    this.amount -= sum;
    this.cheques.push({number: this.cheques.length+1, recipient: to, amount: sum});
  }
  showBook() {
    super.showBook();
    if (this.cheques.length > 0) {
      console.log("Cheque activity:");
      for (const cheque of this.cheques) {
        console.log(`  ${cheque.number}: $${cheque.amount} paid to ${cheque.recipient}`);
      }
    }
    else console.log("No cheques have been written");
  }
}

const ch1 = new Chequing("Mary Jones");
ch1.deposit(1000);
ch1.showBook();
ch1.writeCheque(95, "Bob Smith");
ch1.writeCheque(485, "Ritz Hotel");
ch1.showBook();

Answer 4

To implement this functionality in ES6, use the `class` keyword properly. Below is an example showcasing two classes: Account and Chequing. The Account class contains properties like `balance`, `deposit`, and `showBook` functions, while the Chequing class extends the Account class and adds a `writeCheque` function. Despite being a child class, instances of Chequing can still access all parent class functions due to their inheritance from Account.

class Account {
  constructor(name) {
    this.name = name;
    this.amount = 0;
  }
  balance() {
    return this.amount
  }
  deposit(sum) {
    this.amount += sum;
  }
  showBook() {
    console.log("-------------------------");
    console.log("Account for",this.name);
    console.log(`Balance: $${this.amount}`);
  }
}

class Chequing extends Account {
  constructor(name) {
    super(name);
    this.cheques = [];
  }
  writeCheque(sum, to) {
    this.amount -= sum;
    this.cheques.push({number: this.cheques.length+1, recipient: to, amount: sum});
  }
  showBook() {
    super.showBook();
    if (this.cheques.length > 0) {
      console.log("Cheque activity:");
      for (const cheque of this.cheques) {
        console.log(`  ${cheque.number}: $${cheque.amount} paid to ${cheque.recipient}`);
      }
    }
    else console.log("No cheques have been written");
  }
}

const ch1 = new Chequing("Mary Jones");
ch1.deposit(1000);
ch1.showBook();
ch1.writeCheque(95, "Bob Smith");
ch1.writeCheque(485, "Ritz Hotel");
ch1.showBook();

Answer 5

Answer №3

Account and CheckingAccount are both classes. Instances of these classes are referred to as the account and checking.

If you want the CheckingAccount class to inherit from the Account class, you should do the following:

CheckingAccount.prototype = Object.create(Account.prototype);

This action assigns CheckingAccount's prototype object to Accounts' prototype object.

The CheckingAccount function does not have a balance property (note: functions are first-class objects in JavaScript); only a prototype property is present. However, the balance property, which is also a function, can be found within the object that Account's prototype property points to.

The balance() function can be accessed from:

The Account.prototype
The CheckingAccount.prototype (due to your use of the Object.create function)
Any instances created from both of these classes.

Answer 6

Account and CheckingAccount are both classes. Instances of these classes are referred to as the account and checking.

If you want the CheckingAccount class to inherit from the Account class, you should do the following:

CheckingAccount.prototype = Object.create(Account.prototype);

This action assigns CheckingAccount's prototype object to Accounts' prototype object.

The CheckingAccount function does not have a balance property (note: functions are first-class objects in JavaScript); only a prototype property is present. However, the balance property, which is also a function, can be found within the object that Account's prototype property points to.

The balance() function can be accessed from:

The Account.prototype
The CheckingAccount.prototype (due to your use of the Object.create function)
Any instances created from both of these classes.

JavaScript's prototypical inheritance model allows objects to inherit properties and

Answer №1

Answer №2

Answer №3

Similar questions

Contrasting the disparities between creating a new RegExp object using the RegExp constructor function and testing a regular

Bootstrap4 does not support the <button> element

Vue function that inserts <br> tags for addresses

Change the value of the material slide toggle according to the user's response to the JavaScript 'confirm' dialogue

The function is defined, but it cannot be set to null

After the ajax request is made in React JS, the column vanishes from the screen

Finding the source of the err.kind expression in the MERN stack: Unraveling the mystery

Making a Zoom effect using p5.js

Django: Error - < found where unexpected

How to toggle classes on specific items generated with Vue JS's v-for directive

Failure to specify the variable type can lead to the creation of automatic global variables

Tips on adjusting a position that shifts with changes in window size

Issue with styled-components not being exported

Is there a way for me to come back after all child http requests have finished within a parent http request?

How to retrieve the ID of the inserted record in Knex.js

Utilize the search bar within a JavaScript function

Navigating a parameter within an AngularJS directive

The issue with the full postback in the updatepanel is triggered by utilizing JavaScript on the button's onclick event within

The seamless flow of web design

Clear the modal form in Codeigniter and AJAX upon closing the edit modal