JavaScript: prototype vs. class

Re:JavaScript: prototype vs. class by drinchev on Wednesday April 04, 2018 @10:25AM (#16754959)

When comparing ES2015 and how it was before. I usually take the babel playground [1] and see what the closest alternative would be.

For a simple es2015 it looks a bit more complicated than the prototype extension [2].

    class Dog {
      bark() { console.log( "Bark!" ); }
    }

Compiles to :

    "use strict";

    var _createClass = (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);
        }
      }
      return function(Constructor, protoProps, staticProps) {
        if (protoProps) defineProperties(Constructor.prototype, protoProps);
        if (staticProps) defineProperties(Constructor, staticProps);
        return Constructor;
      };
    })();

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

    var Dog = (function() {
      function Dog() {
        _classCallCheck(this, Dog);
      }

      _createClass(Dog, [
        {
          key: "bark",
          value: function bark() {
            console.log("Bark!");
          }
        }
      ]);

      return Dog;
    })();

1 : https://babeljs.io/repl/

2 : https://babeljs.io/repl/#?babili=false&browsers=&build=&buil...

[ Parent | on HN ]

Re:JavaScript: prototype vs. class by insin on Wednesday April 04, 2018 @11:06AM (#16755407)

It's worth using Babel's loose mode (es2015-loose in the online REPL) if you're more interested in the "old" way of doing it than in compatibility with the specs:

    "use strict";

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

    var Dog = (function() {
      function Dog() {
        _classCallCheck(this, Dog);
      }

      Dog.prototype.bark = function bark() {
        console.log("Bark!");
      };

      return Dog;
    })();

https://babeljs.io/repl/#?babili=false&browsers=&build=&buil...

[ Parent | on HN ]

Re:JavaScript: prototype vs. class by masklinn on Wednesday April 04, 2018 @11:23AM (#16755583)

> For a simple es2015 it looks a bit more complicated than the prototype extension [2].

That's because it provides somewhat different features and Babel apparently attempts to replicate them properly. For instance "class" methods are non-enumerable by default, whereas "prototype" methods — being bog-standard properties — are.

[ Parent | on HN ]

Re:JavaScript: prototype vs. class by Parsyval on Wednesday April 04, 2018 @10:34AM (#16755058)

Since I work with Typescript, I do the same with the TS playground, it's really usefull to learn that kind of stuff.

[ Parent | on HN ]

Re:JavaScript: prototype vs. class by drinchev on Wednesday April 04, 2018 @11:01AM (#16755348)

I sometimes see difference between TypeScript's compiler and babel.

For example in this case TypeScript doesn't care so much about `defineProperty`. I guess the rules are not so strict, since it assumes that the rest of your code will be passed through TypeScript itself.

Anyway in both cases, I prefer TypeScript's way of enhancing the class inheritance in JavaScript by introducing private / readonly and many more.

https://www.typescriptlang.org/play/index.html#src=class%20D...

[ Parent | on HN ]