JavaScript ES6 prototype function

Question

I would like to make the getArea() function a prototype, and am not sure if this ES6 (?) format is automatically doing this for me, or do I still need to declare a prototype in a separate Object.prototype.method = function() {} construct?

class Polygon {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    getArea() {
        return this.height * this.width;
    }
}

Is there a reason you wouldn't just check for yourself? console.log(Polygon.prototype.getarea) — user8897421
– user8897421, Commented Dec 11, 2017 at 15:45

samanime · Accepted Answer · 2017-12-11 15:30:59Z

6

It is.

The ES6 class format basically translates to something like this:

function Polygon(height, width) {
  this.height = height;
  this.width = width;
}

Polygon.prototype.getArea = function() {
    return this.height * this.width;
};

answered Dec 11, 2017 at 15:30

samanime

26.8k17 gold badges99 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Joe Clay Over a year ago

Further confirmation - I just compiled the code from the question using TypeScript and Babel and this is pretty much exactly the code that gets output.

user8897421 Over a year ago

An important distinction would be that the method would be non-enumerable.

samanime Over a year ago

I'm not sure how ES6 or ES5 syntax would really differ in that regard.

user8897421 Over a year ago

The ES5 syntax you're using makes it so getArea will show up when enumerating the properties of an instance. for (var x in new Polygon()) { console.log(x) }. But in ES6, because it's non-enumerable, getArea won't show up in the loop. To get that behavior in ES5 browsers, you'd use Object.defineProperty to add the method to the prototype.

samanime Over a year ago

Ah, good point. I don't think I realized that myself. Just tested it myself and that is definitely the case.

Collectives™ on Stack Overflow

JavaScript ES6 prototype function

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related