Adding methods to prototype objects in JavaScript

Question

I'm making my way through Murach’s JavaScript and jQuery (3rd Edition) and I've encountered a compiler error with code from the book. I've triple checked my syntax against the book's syntax and I think I can rule it out. I also looked at the errata page and I don't find a reference to the page I'm on.

I also looked at this question, but I didn't find anything applicable to my issue.

Here is my object constructor:

var Invoice = function(subtotal, taxRate) {
    this.subtotal = subtotal;
    this.taxRate = taxRate;
};

I run into trouble when attempting to add methods to the prototype object:

// The getTaxAmount method is added to the Invoice prototype
Invoice.prototype.getTaxAmount: function() {
// Compiler whines right here ^ and     ^
    return (subtotal * this.taxRate);
};

// The getInvoiceTotal method is added to the Invoice prototype
Invoice.prototype.getInvoiceTotal: function() {
// Compiler whines right here ^ and     ^
    return subtotal + this.getTaxAmount(this.subtotal);
};

I'm using Visual Studio Code with Debugger for Chrome. The prompt in VS Code says it wants a ; at the first spot it complains and [js] identifier expected at the second spot it complains.

Thank you for reading. I welcome your suggestions.

Jorg · Accepted Answer · 2018-02-08T04:26:44.220

2

The syntax is either

Invoice.prototype.getInvoiceTotal = function() {}

This is because prototype itself is an object.

edited Feb 08 '18 at 04:26

answered Feb 08 '18 at 04:18

Jorg

7,219
3
44
65

Brilliant! Thank you for the quick assist on this. That's the first error I've found in the book after getting ~500 pages deep :) I'll accept when the timer goes off. – Adrian Feb 08 '18 at 04:21
1

@Adrian `subtotal` should be `this.subtotal` too, I guess. – Jorg Feb 08 '18 at 04:27

score 1 · Answer 2 · answered Feb 08 '18 at 04:21

Yes, that's a syntax error. You rather use an assignment operator, =, for such work:

// The getTaxAmount method is added to the Invoice prototype
Invoice.prototype.getTaxAmount = function() {
    return (subtotal * this.taxRate);
};

// The getInvoiceTotal method is added to the Invoice prototype
Invoice.prototype.getInvoiceTotal = function() {
    return subtotal + this.getTaxAmount(this.subtotal);
};

In addition to that, you could use Object.assign to assign properties to an object, like this:

Object.assign(Invoice.prototype, {
    getTaxAmount: function() {
        return (subtotal * this.taxRate);
    },
    getInvoiceTotal: function() {
        return subtotal + this.getTaxAmount(this.subtotal);
    }
});

Notice that you don't use a semicolon at the end of the function when using the latter.

Thank you for your help on this. Jorg beat you by a few mins. — Adrian, Feb 08 '18 at 04:31

score 0 · Answer 3 · answered Feb 08 '18 at 04:19

According to w3Schools, the correct way to add a function to a prototype would be as follows:

Invoice.prototype.getInvoiceTotal = function(){ **your fx here** };

From the look of things, you are using a : instead of a =, this may be what is causing you grief.

score 0 · Answer 4 · answered Feb 08 '18 at 04:21

0

Try using an equal sign. Colon is for variable values for JSON.

Invoice.prototype.getInvoiceTotal = function() {
// Compiler whines right here ^ and     ^
    return subtotal + this.getTaxAmount(this.subtotal);
};

answered Feb 08 '18 at 04:21

TheLiquor

71
7

score 0 · Answer 5 · edited Jun 20 '20 at 09:12

All JavaScript objects inherit properties and methods from a prototype.

The JavaScript prototype property also allows you to add new methods objects constructors:

ie : Date objects inherit from Date.prototype. Array objects inherit from Array.prototype. Person objects inherit from Person.prototype.

<script>
  var Invoice = function(subtotal, taxRate) {
  this.subtotal = subtotal;
  this.taxRate = taxRate;
};

Invoice.prototype.getTaxAmount = function() {
    return (subtotal * this.taxRate);
};

var myTax= new Invoice(10,5);
document.getElementById("demo").innerHTML =
"My tax amount is " + myTax.getTaxAmount (); 
</script>

Adding methods to prototype objects in JavaScript

5 Answers5