Object.create() ES6

Question

Can you help me to understand ES6 and Object ?

class Contact{
       constructor(name,tel,mail)
       this.name=name;
       this.tel=tel;
       this.mail=mail; 

    method1(){
    //code
   }
}

If I want create a contact I can use

const me = new Contact('David','070809112','10 street of Paris')

But I'm not able to use Object.create() before ES6 I can use Object.create() with ES6 Ican't can you help me ?

BEFORE ES6

var Contact ={
   init:function('name','tel','mail')
   this.name=name;
   this.tel=tel;
   this.mail=mail; 

method1 : function(){
  //code
 }
}
 var me = Object.create(Contact);
 me.init('David','070809112','10 street of Paris');

In this case How use Object.create() ? for create a new contact. Thanks

Are you trying to do Object.create(Contact) in ES6 where Contact is defined as a class? — itdoesntwork
– itdoesntwork, Commented Sep 23, 2018 at 16:38
The comparison you make is broken: your last code example has no constructor, but an init method which is called separately: this you can also do with ES6 class and Object.create. The thing is that you introduce a constructor in the ES6 example, which for some reason you did not choose to use in the ES5 code. So the comparison really does not work. — trincot
– trincot, Commented Sep 23, 2018 at 16:53

T.J. Crowder · Accepted Answer · 2018-09-23 16:53:25Z

4

You can keep doing exactly what you were doing and not use class.

If you're using class, you typically don't use Object.create. The use cases for Object.create are largely unrelated to class (it's usually used in direct prototypical inheritance, rather than using constructor functions).

If you want to use class but don't want to use new for some reason, you can use Reflect.construct (rather than Object.create):

class Contact {
    constructor(name, tel, mail) {
        this.name=name;
        this.tel=tel;
        this.mail=mail; 
    }
    method1(){
     //code
    }
}

const c = Reflect.construct(Contact, ["name", "tel", "mail"]);
console.log(c.name);

It is possible to use Object.create with your class Contact, like this:

// NOT A GOOD IDEA, see below
const c = Object.create(Contact.prototype);

That creates an object using Contact.prototype as its prototype. But it doesn't call the constructor, and you can't call the constructor afterward (Contact.call(c, "name", "tel", "email") would fail). And you couldn't be sure that not calling the constructor didn't cause a problem, since class code assumes the constructor (and super constructors if any) are called.

edited Sep 23, 2018 at 16:53

answered Sep 23, 2018 at 16:43

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

4 Comments

Parad0xJ Over a year ago

I understand with class Ican't use Object.create() in this case thanks

T.J. Crowder Over a year ago

@Parad0xJ - Well, you can: const c = Object.create(Contact.prototype); will create an object using the prototype from Contact. But it doesn't run the constructor and you can't run it separately (doing Contact.call(c, "name", "tel", "mail") would fail).

Parad0xJ Over a year ago

T.J.Crowder thanks for all your explanations I understand well my mistake

Stefan Over a year ago

I have a class Foo that inherits from HTMLElement. In order to avoid illegal constructor issues with new Foo() ( same for Reflect.construct(Foo,[]) ) I use Object.create(Foo.prototype). => With ES6 classes there is still a (limited) use case for Object.create. Also see stackoverflow.com/questions/57478484/…

whizboy · Accepted Answer · 2021-04-04 07:17:47Z

T.J Crowder answer is the best thing i have ever seen. yeap Reflect.construct() works as expected this has saved my day of hours searching because i had a problem i wanted to call a function with an instance together with other variables off the back in laravel blade, however adding a space in between made the dumb thing break so i could not use the new keyword. javascript flexibility saved the day. Learnt a totally new thing and thank you for being oblivious of why one would not want to use new keyword and focusing on answering the question. i wish i could comment on his answer but low rep.

i had this onclick={{$var1.".method( new MyClass(this.id,'".$var2."','".$var3."') )"}}

another reason i at times hate templating engines, they can be limiting

Collectives™ on Stack Overflow

Object.create() ES6

BEFORE ES6

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

BEFORE ES6

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related