Prototype Properties in the New Class Syntax in JavaScript

in technology •  7 years ago  (edited)

A few weeks ago, I wrote a post about using the new class syntax in JavaScript. As I explained there, the new class syntax, introduced in ECMAScript 2015 (ES6), is just a syntactical sugar for the extant prototypical inheritance in JavaScript. The new syntax, together with the extends keyword, has obvious advantages, which make the code easier to write and understand.

However, one disadvantage of the new approach is that it does not allow you to define "prototype properties," i.e. properties that reside on the prototype object, not on the class instances. In fact, it does allow you to define accessor properties, but defining data properties on the prototype is not possible in the new class syntax. The usual approach is to instantiate an object in the class constructor with the required properties. Still, there may be cases that you want a property to reside on the prototype object. These are different from static properties that reside on the constructor function itself, because those properties are not subject to inheritance and are not modifiable on instance objects.

I guess there is a rationale for this decision, but I don't know what is. The following code snippet shows an accessor property, which is defined on the property object. As I said, you cannot define a data property with this syntax.

    class Test {
        constructor() {}
        get name() {
            return "Ali";
        }
    }
    var a = new Test();
    console.log(a.name); // Ali
    console.log(a.hasOwnProperty("name")); // false
    console.log(a.constructor.prototype.hasOwnProperty("name")); // true

Maybe I have missed something. I know that the properties could be instantiated on the instance object, but I’d like to know why it is not possible to define prototype "data" properties with the new class syntax.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

To be honest I don't know what was the motivation of TC39 for adding class syntax to ECMAScript. Perhaps for easier transition of object oriented people (Java/C++) into JavaScript? Any way, as you mentioned, delegation pattern (I prefer this name over prototypical inheritance) gives more flexibility. And I think we should use it, always.
Firstly, it has better performance against object-oriented approach. If you do not want to copy common set of properties to large number of objects, you just use Object.create(commonProperties) to create new object based on the object containing common set of properties. Within class approach it's not possible, you must create set of common properties for each object instance, which might have greater memory consumption impact.
What's more, class inheritance by design leads to tight coupling. Imagine you want to model tesla car in your application. Probably first thought is to define ElectricCar which extends Car class. Then we need some gas-based car, let's say ford. So you define GasCar which also extends Car class. But what happen, when we want another car, let's say steem, which have both electric car and gas-based car capabilities? Which class should we instantiate, both of them? Object composition is more flexible: we might just call const steem = Object.extend({}, electricCarCapabilities, gasCarCapabilities) where objects have functions and properties describing specific set of capabilities.
JavaScript is so powerful tool, it does not need object-oriented paradigm to be part of the specification. I think functional programming is more fun. Strongly encourage you to make some shift in way of thinking and check it yourself. I did so.
Nice article by the way!

To be honest I don't know what was the motivation of TC39 for adding class syntax to ECMAScript. Perhaps for easier transition of object oriented people (Java/C++) into JavaScript?

Yeah this was it. People coming from more traditional OOP languages were confused by prototypes and the fact that there seemed to be different ways to do OO in JS, so they added some syntactic sugar to make it easier for people moving to JS. They saw familiar looking class structures and it made them feel more comfortable.

Wow, your comment is much more informative that my post. Thank you!

Multiple inheritance is really necessary for a decent object-oriented system, but it is left to mixins and is not part of the class syntax. I just want to know the reason data properties were left out. Another oddity is that the methods in class syntax are not separated by commas as is the usual syntax in object literals.

Thanks! According to reason of data properties were left out. I think it's more by design. Class is a blueprint, general shape of object and only instances are supplied with data. It's common for object-oriented programming like Java/C#. Defining prototype properties for classes might be tricky, as it's a try of mixing two extremely different approaches.

Yes, I guess that's right. Anyway, both syntax options are available and can be used according to the needs.

Hi sir in which context it is useful, please clear how can a general one can be benefitted from using this.

Thank you for your efforts.

This can be useful for JavaScript programmers only. Since this post addresses a very specific subject, it will not be useful for people who are not familiar with JavaScript and ECMAScript.

awsome way of teaching. your services are appreciable.

you have knowledge of programming language too....you are talented ..i thought you teach english...

Thank you for following my posts. I have almost three decades of experience in programming, but I have been programming for my own projects only. I am not a professional developer.

thats very good ..nothing is better than doing work by own...and you need skill to do this kind of work....

Some thing new..... Wow great to read it.

@ghasemkiani
Dear sir, Can you tell me how i improve my programming skill? I'm Computer Science & Engineering (CSE) Student.

I really don't know. I am myself interested in algorithms and design patterns. I think basic computer science knowledge is important, but you also need to do a lot of hands-on practice.

Yeah i strongly agree with you sir. Practice is the best way to improve programming skill. Thanks for your opinion.

I'm learning new language java, thanks sharing helpfull post

Programming knowledge is need to people who interested on make solution on a different way..thsnks for sharing.

persian class good one going great ... thank you for sharing

English idioms great one 😉😉 class going great ..m

very good post friend,i like your post

great contant friend,,,thanks

i think you are a perfect man.
thanks for sharing

well done

This post has received gratitude of 8.44 % from @appreciator thanks to: @ghasemkiani.