• Saturday , 19 August 2017

Object.create – Object Creation in JavaScript P6 – FunFunFunction #57

Code Canyon



The Object.create() method in JavaScript creates a new object with the specified prototype object and properties. I walk through what it is, why Object.create exists in JavaScript, and how to use Object.create.

⏯ Highlights
00:20 What is Object.create in JavaScript
06:32 Why does JavaScript have Object.create
09:54 Lunch walk with musing on focus and side projects
12:44 How to use Object.create in JavaScript
15:33 Object.create and initializers (instead of constructors)

🔗 mpj on Twitter

🔗 mpj on Whale 🐳 🐋 (iOS only as of Nov 2016)
https://askwhale.com/add/mpjme

🔗 Full series playlist (Object creation in JavaScript)

🔗 MPJ’s Musings playlist

🔗 Music: Peacock by 7 minutes dead

🔗 Music: Airglow by Laszlo

🔗 FIGHT by Tokyo Machine


Original source

3d Ocean

Related Posts

48 Comments

  1. Reinisable
    July 6, 2017 at 05:55

    I'm not entirely sure, why you're making videos about inheritance if you think it should never be used 🙂

  2. Niranjan Sharma
    July 6, 2017 at 05:55

    please make a video on constructor property and why it is required. thanks

  3. Boomer
    July 6, 2017 at 05:55

    Hi MPJ, is the below a good pattern to use?

    const model = (id) => {

    this._id = id;

    return Object.defineProperties({}, {
    "id": {
    get: () => {
    return this._id;
    },
    set: (value) => {
    if (typeof value !== 'string') {
    throw new Error("ID provided is not valid");
    }

    this._id = value;
    },
    enumerable: true
    }
    });
    };

    const scan = Object.create(model(id));

    It provides the functionality I want but if I log scan, I see

    Object {
    id: (. . .)
    }

    Seems I can't view the object without invoking the getters for each property. Do you know a way around this? I'm wanting to use this pattern as a model but I need to be able to return the object.

  4. Ttches
    July 6, 2017 at 05:55

    Oh man, I really like your videos but you should think about using a keyboard that you're more comfortable with for these.

  5. Ali Beigi
    July 6, 2017 at 05:55

    goddammit mpj ! allllll the way down to say "forget about prototypes" ?iii know the reason u did this and i accept that! but if you didnt make ur videos as fun as it is right now ! i would curse you for the rest of my life 😀

  6. JSNode
    July 6, 2017 at 05:55

    What is the colorful theme name in that editor?

  7. Clayton Marshall
    July 6, 2017 at 05:55

    How does the actual implementation of Object.create work if it doesn't use Object.setPrototypeOf?
    Great Video!

  8. Pontus Ekholm
    July 6, 2017 at 05:55

    My eyes could be playing tricks, but it looks like it's the IKEA in Kållered, just south of Gothenburg. I grew up in Lindome, very close by.

  9. Šimon Hrabec
    July 6, 2017 at 05:55

    Why 50 and not 60 FPS? 😛

  10. Florian Reuschel
    July 6, 2017 at 05:55

    "You can think of Douglas Crockford as the grumpy grandfather of JavaScript."
    If this video was a Medium article, that would definitely be the top highlight.

  11. Albert Patterson
    July 6, 2017 at 05:55

    I like this.

  12. Anton Krinitsyn
    July 6, 2017 at 05:55

    why do everything in js like setPrototype, isPrototypeOf tempt to say that it deals with prototype, but in reality, after setprototype function we get obj.prototyp is undefined, instead we have obj.__proto__ is value that we used within setprototype function. did I miss something?

  13. Yuching Lee
    July 6, 2017 at 05:55

    benchmarking of Object.create() and Object.setPrototypeOf() seems equal ?
    https://jsperf.com/object-create-vs-object-setprototypeof

  14. Сергей Липко
    July 6, 2017 at 05:55

    I love this guy very much! Thank you for awesome and very useful videos!

  15. Al Ex
    July 6, 2017 at 05:55

    I could tell you were Swedish from the way you pronounce "just" 🙂

    Great channel, love your videos! Will be promoting them amongst my junior colleagues.

  16. Jdms 8911
    July 6, 2017 at 05:55

    Shouldn't it be Object.create() – creates a new Object with the _proto_ set to to a certain object.

  17. b1tc0de
    July 6, 2017 at 05:55

    i was watching this video a bit ago when it was beyond me….and i am rewatching because the time has come to apply it! thanks!

  18. Rahul Goma Phulore
    July 6, 2017 at 05:55

    You might have talked about this before, but is there a reason you do not use semicolons at the end of statements?

  19. theConfusedGuy
    July 6, 2017 at 05:55

    Isn't Object.create() much slower than prototype? You suggested that unless there is a solid reason, don't use prototype. If inheritance has to be used for performance reason, then prototype inheritance should be used instead of Object.create, right?

  20. andrew meikle
    July 6, 2017 at 05:55

    Nice series – very informative! Thanks!

  21. Yevgeny
    July 6, 2017 at 05:55

    I've never thought I'd ask this to anyone, but here I go, what's the theme?

  22. Mohammed Hewedy
    July 6, 2017 at 05:55

    Very great series, thanks. hope you add new great episodes to this series as well.

  23. Dani El
    July 6, 2017 at 05:55

    Annnnd @ 10:48 starts why I never finish anything too. I had a business before, and when people tell me, "you should do a business around that" they don't really know what a business encompasses.

  24. JohnMichael Bell
    July 6, 2017 at 05:55

    Object.create() seems like something that should have just been in the language from day 1, and it deserves it's own special syntax. Instead, we have the new operator and the .prototype field, which is a total hack to make things look more like Java.

  25. Douglas Wright
    July 6, 2017 at 05:55

    Just. Love. The lunch break. Gimme more.

  26. Carlos Abdalla
    July 6, 2017 at 05:55

    Hey MPJ.. what is the difference between new and object.create? Thx

  27. rumi khan
    July 6, 2017 at 05:55

    what is the use of ''+ in javascript???
    i am including the line below where i found this thing

    var loopTimer=setTimeout('fadeOut(''+element+'')',50);
    please respond

  28. Diamonddeath
    July 6, 2017 at 05:55

    What's the difference between object.create and Object Literal? The syntax looks the same to me. Am I missing something?

  29. Marcus
    July 6, 2017 at 05:55

    I'm not sure I understand how returning this in the init function allows you to chain methods together… If Object.create returns a new object with the specified prototype as its new prototype, shouldn't you just be able to chain the init call onto the Object.create call regardless of what init returns?

  30. Alex Tal
    July 6, 2017 at 05:55

    how can you create some sort of factory function to create multiple objects of a certain blueprint?

  31. quailman
    July 6, 2017 at 05:55

    I've been programming for nearly a decade. It is extremely rare to find tutorials that are actually this entertaining. I sat through several episodes on subjects I already knew simply for the entertainment factor, as though I were watching any other youtuber I follow. You sir, are very much appreciated. Thank you.

  32. Cristian Ramirez
    July 6, 2017 at 05:55

    Very good explanation, and series too, learned a lot with your videos, also i think this article could be a good complementary https://medium.com/@cramirez92/s-o-l-i-d-the-first-5-priciples-of-object-oriented-design-with-javascript-790f6ac9b9fa?source=linkShare-25ca4e29d4c4-1484427553

  33. Dana Ng
    July 6, 2017 at 05:55

    Thanks so much, I just realized after watching this video and using ES6 in another project what I hadn't thought about. It was the fact you cannot use arrow functions if you are going to use Object.create( ), a great explanation for reasons why not I found here: https://rainsoft.io/when-not-to-use-arrow-functions-in-javascript/ >_< Ha ha, it was like an epiphany!

  34. Diamonddeath
    July 6, 2017 at 05:55

    I checked out your videos on "this" and am still confused on why something like mark.makeSound() is looking into const cat

  35. Frank Hu
    July 6, 2017 at 05:55

    @15:30 you mentioned Performance is why we use Prototype, what's that means?Is it because that Object.create is a function already built so we don't need to write our own Objectcreate in browser or what?
    It's hard to tell which "performance" is good for a newbie >///< and thanks for this great series. <3

  36. Alessander França Queiroz
    July 6, 2017 at 05:55

    Mpj can you do a video explaning the difference between object.create and object.assign?

  37. Vlad Borg
    July 6, 2017 at 05:55

    Thanx for episode.

    Please go further and explain second argument propertiesObject of Object.create(). What is ownProperties/writable/configurable/getter/setter/etc.

  38. Otto Nascarella
    July 6, 2017 at 05:55

    Using "new" is much faster than Object.create when creating large numbers of objects.

    http://jsbin.com/wigobovomu

  39. Eric Peeters
    July 6, 2017 at 05:55

    Hi!

    Great episode once again, I've been watching some of your episodes for a while now and always love your content.

    Quick note, you chained the wrong methods at the end. Sure you can chain the construction of the object and the first method call which you did. But I think you meant to chain init() and makeSound(), otherwise the return this statement does not do an awful lot for the example.

    But besides that great stuff, thanks!

  40. Andrew Bykovets
    July 6, 2017 at 05:55

    Hi mpj! you should also explain this example)
    <pre>
    function Person(name, age){
    this.name = name;
    this.age = age;
    }

    Person.prototype.sayHi = function(){
    console.log('Hi my name is '+ this.name);
    }

    const john = new Person('John', 28);
    john.sayHi();

    console.log(Person.isPrototypeOf(john)); //false
    console.log(john instanceof Person); //true
    </pre>

  41. Nicole Rose
    July 6, 2017 at 05:55

    I'd like to implement a similar format for my development work day.

  42. Adam Baszak
    July 6, 2017 at 05:55

    One more video of yours I'm gonna watch and I'll setup a backspace hit counter. Love the videos by the way!

  43. Sagar Routh
    July 6, 2017 at 05:55

    I am completely addicted to your channel, Kudos!!
    Will you be adding more videos to 'Object Creation' playlist or that's all of it?

  44. Bijay Timilsina
    July 6, 2017 at 05:55

    man you are so cool and funny…makes learning less tedious and less anxious…keep doing these good stuffs (double thumbs up) 😀

  45. Rolando BB
    July 6, 2017 at 05:55

    Shit it looks cold man

  46. Ryan Johnson
    July 6, 2017 at 05:55

    Cool, got like 70%. gonna have to watch the series again to square up with the remainder.. but thank you for the series!!!!

  47. Hasrat Sabit
    July 6, 2017 at 05:55

    Wow man! I probably watched like 15 tutorials on your channel so far. And this whole time I was thinking you are living in Bay area California. The lunch break was a good addition. I really liked it!

  48. jyoti Kharoud
    July 6, 2017 at 05:55

    Earlier, it was hard for me to understand what is object creation and how and when we use it.. and your videos were like 20mins .whooopp.. i was like whoooppp..GOD!! but i really enjoyed it.. its funny and cute when ur trying to explain something and u also got confused wt you are saying.. ANYWAYS main thing is Your videos were quite amazing and intersting and now i get it. and i really love your videos now… THANK YOU ..!!!!

Leave A Comment

You must be logged in to post a comment.