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

What is the process for assigning a function and its arguments as a callback in programming?

The expansion animation for the Nextjs/React accordion box did not work as expected when utilizing tailwindcss

By utilizing the HTML element ID to retrieve the input value, it is possible that the object in Typescript may be null

Despite reaching a video readystate of 4 in HTML5, the video still hangs and does not play smoothly

Challenges with Angular 4 service initialization

Learn how to effectively declare data as global within Angular2 or Typescript

Creating intricate JavaScript objects for JSON API integration can be accomplished by following these steps:

Real-time updates for UI data in Next.js Firestore are not being reflected

Getting unique results from a knex.js INNER JOIN operation

"Trouble arises with the match() function in relation to email regex validation

utilizing ajax to submit data with checkbox option

A more efficient method for creating a nested array of distinct values using JavaScript

The way an event can be outrun or vanish due to another event

Sending data using formData across multiple levels of a model in Angular

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

IE11 experiences frequent crashes when running a web application utilizing the Kendo framework and JavaScript

Dynamic autocomplete feature with AJAX integration for filtering in Flask

Steps for showing personalized validation error messages in Angular 7

Sending a request from JavaScript to C# methods using AJAX, with no expected response, within an ASP.NET MVC framework

Having difficulty maintaining trailing zeroes in decimals after converting to float in Angular