JavaScript Prototype Pattern in ES6

Question

The prototype pattern is implemented in ES5 as follows:

var Shape = function (id, x, y) {
   this.id = id;
   this.move(x, y);
};
Shape.prototype.move = function (x, y) {
   this.x = x;
   this.y = y;
};

on the other hand it's ES6 equivalent is defined (in here) as:

class Shape {
  constructor (id, x, y) {
    this.id = id
    this.move(x, y)
  }
  move (x, y) {
    this.x = x
    this.y = y
  }
}

I am willing to use prototype pattern in order to avoid excessive memory usage and wondering if ES6 classes ensure that?

ES6 is just syntactic sugar, they produce the same result in memory. — Barmar
– Barmar, Commented Mar 19, 2019 at 7:58

arpit sharma · Accepted Answer · 2019-03-19 08:13:13Z

Your code will not be compiled exactly as prototype pattern because ES6 converters are functional hence what looks like this in ES6

class Shape {
constructor (id, x, y) {
this.id = id
this.move(x, y)
}
move (x, y) {
this.x = x
this.y = y
}
}

will look like this when converted you have createclass generic method which converts the object prototype using the inbuilt object methods

"use strict";

function _instanceof(left, right) {
if (
right != null &&
typeof Symbol !== "undefined" &&
right[Symbol.hasInstance]
) {
return right[Symbol.hasInstance](left);
} else {
return left instanceof right;
}
}

function _classCallCheck(instance, Constructor) {
if (!_instanceof(instance, Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}

function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}

function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}

var Shape =
/*#__PURE__*/
(function() {
 function Shape(id, x, y) {
  _classCallCheck(this, Shape);

  this.id = id;
  this.move(x, y);
}

_createClass(Shape, [
  {
    key: "move",
    value: function move(x, y) {
      this.x = x;
      this.y = y;
    }
  }
]);

return Shape;

})();

Anshuman Singh · Accepted Answer · 2019-03-19 09:27:37Z

-1

class and constructors are just syntactic sugar. they get compiled down to function and prototype internally. so you can use both but better to use in ES6 way. using class syntax makes your code looks cleaner and object-oriented. if any person from java/c++ etc (pure OOP background) comes and see the code he will understand what's really going on

edited Mar 19, 2019 at 9:27

answered Mar 19, 2019 at 8:03

Anshuman Singh

1,1621 gold badge14 silver badges21 bronze badges

2 Comments

KooiInc Over a year ago

"but better to use in ES6 way"=> why?

Enlico Over a year ago

Writing code in one language (e.g. JavaScript) targeting as audience programmers that are not familiar at all with it but with an entirely different programming language (e.g. C++) is the recipe for killing any advantage the former language might have on any other language.

Collectives™ on Stack Overflow

JavaScript Prototype Pattern in ES6

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related