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, Sep 23 '18 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, Sep 23 '18 at 16:53

T.J. Crowder · Accepted Answer · 2018-09-23T16:53:25.273

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 '18 at 16:53

answered Sep 23 '18 at 16:43

T.J. Crowder

1,031,962
187
1,923
1,875

I understand with class Ican't use Object.create() in this case thanks – Parad0xJ Sep 23 '18 at 16:48
@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). – T.J. Crowder Sep 23 '18 at 16:51
1

T.J.Crowder thanks for all your explanations I understand well my mistake – Parad0xJ Sep 23 '18 at 17:00
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 https://stackoverflow.com/questions/57478484/how-to-test-custom-web-component-with-jest/ – Stefan Aug 15 '19 at 12:18

score 0 · Answer 2 · answered Apr 04 '21 at 07:17

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

Object.create() ES6

BEFORE ES6

2 Answers2