JavaScript 中的原型继承

Question

I am new to javascript's prototypical inheritance and js object-oriented programming. I was trying to create a base object, Account and then inherit the CheckingAccount from it. The following is my code.

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();

When I run it on Visual Studio, I am getting the following error: "Uncaught TypeError: CheckingAccount.balance is not a function"

Answer 1

You want to call the method on the instance and not the Class object (eg, checking not CheckingAccount ). Also, make sure to change the constructor. For further reading, refer to the MDN documentation .

You can see these changes here:

 function Account(fName, lName) { this.firstName = fName; this.lastName = lName; this.salary = 0; } Account.prototype.balance = function() { return this.salary; // you'll probably not use _only_ salary here } function CheckingAccount() { this.salary = 10000; } CheckingAccount.prototype = Object.create(Account.prototype); // Make sure to update the constructor Object.defineProperty(CheckingAccount.prototype, 'constructor', { value: CheckingAccount, enumerable: false, // so that it does not appear 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

You can do this using the proper class keyword in ES6. Here's an example of Account and Chequing which extends it. Here the Account class has a balance , deposit and showBook function, and only the child Chequing class has a writeCheque function. Yet the Chequing instance can still call all parent class functions since it's an 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 3

Account is class here. CheckingAccount is class too. the account and checking are instances.

if you want the CheckingAccount to inherit from Account class, you should, and did this:

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

This delegates CheckingAccount's prototype object to Accounts prototype object.

There is no balance property in CheckingAccount function ( functions are first-class objects in javascript ), there is only prototype property on it. Though the balance property, which is the function same time, resides on the object, where Account's prototype property points to (balance function is inside of Account.prototype object in short) .

The function balance() is accessible from:

• Account.prototype
• CheckingAccount.prototype (because of the Object.create function you used)
• From any instances of both these classes.