Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Equivalent of Prototype in ES6

I am starting out in ES6 with background in JavaScript. I have a question. I have an ES6 class like the following:

class User{
 constructor(){
 }

 doSomething(){
 }
}

My questions is does doSomething method get created each time we instantiate this object? In previous JS, we could take out doSomething and create it with "prototype" to ensure that doSomething is created once, not every time we instantiate the object. However, I am note sure about the correct way to achieve the same effect in ES6. Any help would be appreciated.

like image 457
fur866 Avatar asked Dec 17 '16 02:12

fur866


People also ask

Is prototype used in ES6?

The prototype property allows you to add properties and methods to any object (Number, Boolean, String and Date, etc.). Note − Prototype is a global property which is available with almost all the objects. Use the following syntax to create a Boolean prototype.

Do we still use prototype in JavaScript?

A prototype is an existing inbuilt functionality in JavaScript. Whenever we create a JavaScript function, JavaScript adds a prototype property to that function. A prototype is an object, where it can add new variables and methods to the existing object.

Is prototype the same as inheritance?

In JavaScript, an object can inherit properties of another object. The object from where the properties are inherited is called the prototype. In short, objects can inherit properties from other objects — the prototypes.

What is difference between __ proto __ and prototype?

prototype is a property of a Function object. It is the prototype of objects constructed by that function. __proto__ is an internal property of an object, pointing to its prototype.


2 Answers

My questions is does "doSomething" method get created each time we instantiate this object?

No. The class syntax is more or less just syntactic sugar for constructor function + prototype. I.e. the result is (almost) equivalent to:

function User() {}
User.prototype.doSomething = function() { };

Look at the result Chrome produces:

enter image description here

However, I am note sure about the correct way to achieve the same effect in ES6.

As said, class does that for you. The whole point of introducing class is to make creating constructor functions and setting methods on prototype easier (hence syntactic sugar).


If you want to learn more, have a look at

  • MDN - Classes

    JavaScript classes introduced in ECMAScript 6 are syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance.

  • YDKJS - ES6 & Beyond

like image 77
Felix Kling Avatar answered Oct 18 '22 04:10

Felix Kling


Absolutely not. It seems no more binding method to prototype manually in ES6, but the fact is ES6 helps us to do that in background.
As MDN says:

JavaScript classes introduced in ECMAScript 6 are syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance.

like image 3
markjiang Avatar answered Oct 18 '22 04:10

markjiang