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

Поділитися
Вставка
  • Опубліковано 5 вер 2024
  • 💖 Support the show by becoming a Patreon
    / funfunfunction
    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
    / mpjme
    🔗 mpj on Whale 🐳 🐋 (iOS only as of Nov 2016)
    askwhale.com/a...
    🔗 Full series playlist (Object creation in JavaScript)
    • bind and this - Object...
    🔗 MPJ's Musings playlist
    • MPJ's Musings
    🔗 Music: Peacock by 7 minutes dead
    • 7 Minutes Dead - Peacock
    🔗 Music: Airglow by Laszlo
    • Video
    🔗 FIGHT by Tokyo Machine
    • Tokyo Machine - FIGHT ...
    💛 Follow on Twitch and support by becoming a Subscriber
    We record the show live Mondays 7 AM PT
    / funfunfunction
    💛 Fun Fun Forum
    Private discussion forum with other viewers in between shows. www.funfunforu.... Available to patron members, become one at / funfunfunction
    💛 mpj on Twitter
    / mpjme
    💛 CircleCI (Show sponsor)
    Robust and sleek Docker-based Continuous Integration as a service. I used CircleCI prior to them becoming a sponsor and I love that their free tier is powerful enough for small personal projects, even if they are private. Use this link when you sign up to let them know you came from here:
    circleci.funfu...
    💛 Quokka (Show sponsor)
    Wonder how MPJ evaluates JavaScript inline his editor. Quokka is the answer - use this link when you buy to let them know you came from here:
    quokka.funfunfu...
    💛 FUN FUN FUNCTION
    Since 2015, Fun Fun Function (FFF) is one of the longest running weekly UA-cam shows on programming 🏅 thanks to its consistency and quality reaching 200,000+ developers.
    🤦‍♂️ The Failing Together concept is what makes FFF unique. Most coding content out there focus on step-by-step tutorials. We think tutorials are too far removed from what everyday development is like. Instead, FFF has created a completely new learning environment where we grow from failure, by solving problems while intensively interacting with a live audience.
    Tutorials try to solve a problem. Failing Together makes you grow as a developer and coworker.
    📹 Each show is recorded live on Twitch in a 2-hour livestream on Mondays. The host, assisted by the audience, is tasked to complete a programming challenge by an expert guest. Like in the real world, we often fail, and learn from it. This, of course, reflects what the audience identifies with, and is one of the most praised aspects of the show.
    ⏯ On Fridays, an edited version of the show is adapted for and published on UA-cam.
    Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Team Collaboration, Software Development, Project Management

КОМЕНТАРІ • 330

  • @Reinisable
    @Reinisable 7 років тому +27

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

    • @funfunfunction
      @funfunfunction  7 років тому +258

      Avoiding something that you understand it fully, but disagree with, is wisdom. Avoiding the same thing without understanding it is blind following and/or ignorance. :)

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3 7 років тому +18

      Sounds very Buddha. :)

    • @lordsambhav
      @lordsambhav 6 років тому +2

      Just like Religion, lol sorry

    • @kensleylewis
      @kensleylewis 6 років тому +4

      sounds like...yoda

    • @shivangchaturvedi237
      @shivangchaturvedi237 3 роки тому +1

      @@funfunfunction That's some heavy 'baby Yoda' wisdom there :P

  • @sgraham234
    @sgraham234 7 років тому +116

    The lunchtime break is a great addition - It's good to hear your opinions and see a bit of life in Sweden as an interlude. I love the idea that all Swedes go to Ikea for lunch :)

    • @funfunfunction
      @funfunfunction  7 років тому +25

      Glad you liked the break, I was very happy with it myself.

    • @Oxxygen_io
      @Oxxygen_io 7 років тому +6

      :) Noo! we do not all go to IKEA for lunch, but it's dirt cheap for sure. You should see the place a rainy weekend after a pay day, its CRAZY!

    • @whiskey4609
      @whiskey4609 7 років тому +1

      looked like a long walk how far? no driving? I guess the walk is welcome.

    • @victornaut
      @victornaut 7 років тому

      You look like Onision.

    • @marijanavou8860
      @marijanavou8860 Рік тому +1

      Love being 6 years late to the party, even tho I loved that lunchtime break more. The answer broadened my perspective. I wondered how many people learn to code because it would be an outlet for them to carry out at least some out of many intrusive ideas they have. Probably more than I thought.

  • @quailman
    @quailman 7 років тому +5

    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.

  • @freeflowme
    @freeflowme Рік тому

    I love that you leave your typing, deleting, thinking, re-typing, mistakes and corrections in here. It actually makes the process more understandable.

  • @blackdeckbox
    @blackdeckbox 7 років тому +8

    Yay finally! I always read blogs of people recommending Object.create over new; but I dont know why.

  • @dylanking000archive
    @dylanking000archive 2 роки тому

    I'm like 7 hours into a study session and lemme tell you that break to go to ikea was so appreciated. You have a gift for creating videos. Thank you.

    • @dylanking000archive
      @dylanking000archive 2 роки тому

      One question - in case anybody sees this before I figure it out. If Object.create() itself calls Object.setPrototypeOf() itself, how does it save on performance? I know I must be misunderstanding something fundamental.

  • @KamelJabber1
    @KamelJabber1 7 років тому +4

    One comment to rule them all:
    I been watching a lot of your vids and it's finally time for me to say....GREAT JOB
    Really enjoying and appreciate the approach!

    • @funfunfunction
      @funfunfunction  7 років тому +3

      Hej Kamel! Thanks for your one comment, and glad to have you following the channel!

  • @saelfaer
    @saelfaer 7 років тому +17

    Just to remove confusion on the very end chaining remark, adding the `return this` did nothing for the actual lines you chained, returning this from the init function would allow you to call makeSound in a chained way, but you left that unchained.
    but thats a small remark, i loved the clear explanation, and the way you always try to implement it yourself. that alone makes us understand things way better.

    • @funfunfunction
      @funfunfunction  7 років тому +5

      This is perfectly on point. I'm eagerly awaiting UA-cams new comment system that will allow me to feature comments.

    • @sheriffderek5333
      @sheriffderek5333 7 років тому +1

      A temporary solution could be to include notes like this in the description.

    • @gasjack
      @gasjack 7 років тому +4

      >Well, if he hadn't returned this from init, then mark would be undefined and mark.makeSound() would throw an error.

    • @datsonyan3499
      @datsonyan3499 7 років тому

      thanks for sharing!

    • @BananaKimchiPie
      @BananaKimchiPie 7 років тому

      what did @Sander mean? I took out "return this" and it returned a TypeError. What does adding a return have to do with chaining?

  • @DisfigurmentOfUs
    @DisfigurmentOfUs 7 років тому +36

    Hello, mpj! Object.create is a method on Object constructor, not on prototype, as said at 0:29

    • @funfunfunction
      @funfunfunction  7 років тому +16

      Oh, great point!

    • @januszjanusz1103
      @januszjanusz1103 5 років тому +2

      ​@@funfunfunction Hi. If you agree that there is a mistake here why you haven't add a proper annotation to the video to avoid misleading?

  • @johnswanson217
    @johnswanson217 2 роки тому +2

    I love concept of constructor function and prototype based OOP inheritance.
    Much intuitive than forcing to use classes everywhere like Java.
    And also first-class functions and ES modules really make me like Javascript.

  • @archiewells3955
    @archiewells3955 6 років тому +1

    Liked, Shared, Still Subscribed. Don't know what online JS training would be like without FunFunFunctions.

  • @vitaliisashyn7490
    @vitaliisashyn7490 7 років тому +4

    Thank's for the switching to the question block in lunch time :) It's first time when I see it, and today's question is really actual :)

    • @funfunfunction
      @funfunfunction  7 років тому +3

      Thank you, it's the first time I do it intentionally - glad you liked it!

    • @fredasigurdsson7063
      @fredasigurdsson7063 4 роки тому

      Has anyone really been far even as decided to use even go want to do look more like?

  • @sterlingarcher6232
    @sterlingarcher6232 7 років тому +4

    Could've done an entire video on the lunch time break question! That was great, as I see myself facing that same dilemma all the time

  • @jyotikharoud6704
    @jyotikharoud6704 7 років тому

    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 ..!!!!

  • @IhsanMujdeci
    @IhsanMujdeci 7 років тому +19

    Love the music.

  • @codedrian
    @codedrian Рік тому

    This video was recommended in The Odin Project Full Stack JavaScript course, great supplement indeed to understand JavaScript Objects!

  • @florianreuschel2951
    @florianreuschel2951 7 років тому

    "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.

  • @thornebrandt
    @thornebrandt 7 років тому

    You attitude about the abundance of time is inspiring.

  • @MsBijay007
    @MsBijay007 7 років тому +5

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

  • @rockallnight
    @rockallnight Рік тому

    "House of Leaves" up on the shelf! Props! Thanks for the video and great explanation. :)

  • @johnnyLikeVideo
    @johnnyLikeVideo 7 років тому

    That middle part about software dev is maturity. You are counting the cost.

  • @reginaldojaccosantidade4364
    @reginaldojaccosantidade4364 3 роки тому

    Thanks for your time, I am learning a lot with tue video lessons

  • @hasratsabit7116
    @hasratsabit7116 7 років тому

    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!

  • @lucysour
    @lucysour 7 років тому

    Your video quality is so good it's almost unnerving. It's like you're here in the room.

    • @funfunfunction
      @funfunfunction  7 років тому

      thank you! I spend a lot of effort to make it so, glad that it is appreciated!

  • @omarfetooh2657
    @omarfetooh2657 6 місяців тому

    I really liked your way of teaching , it is really funny and unexpected

  • @jesselinthorst7446
    @jesselinthorst7446 7 років тому

    Nice video again! Didn't see all your episode yet so I need to do some catching up. Really like your approach of explaining JavaScript topics in a simple non-boring matter. Hopefully you'll spend some time in a episode about the properties options of Object.create. A while ago I was fiddling with Object.create and couldn't figure out why Object.keys wasn't giving back the keys of the just created object (should have read further on MDN ;). So I found out all the properties are by default properties not writable, -> enumerable

  •  7 років тому

    No! You broke my routine! Where is "Goood Monday mornig? I'm MPJ and you are watching..."? Is it muted? Hahaha! Amazing one as always. Thanks!

    • @funfunfunction
      @funfunfunction  7 років тому

      There seems to have been an error during rendering. :) It takes hours for the computer do it so I couldn't re-do it without missing the deadline. It will be back next week!

  • @AB-ut3ce
    @AB-ut3ce 7 років тому

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

  • @AxeKharkiv
    @AxeKharkiv 7 років тому +2

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

  • @sammypresents
    @sammypresents 6 років тому

    Subscribed. Grumpy grandfather of JavaScript. lol

  • @user-yo1tq2um3x
    @user-yo1tq2um3x 7 років тому

    I like how educational javascript video accidentally turns out into an Ikea lunch vlog

  • @DouglasWright
    @DouglasWright 7 років тому

    Just. Love. The lunch break. Gimme more.

  • @hal7mar
    @hal7mar 7 років тому +2

    node filename without the .js ext will work as well:) great content!

    • @funfunfunction
      @funfunfunction  7 років тому +1

      +hal7mar great point, I had completely forgotten that!

  • @HardwareAddiction
    @HardwareAddiction 5 років тому

    Hmm, key point I noticed here, which isn't explained explicitly. It's implied that `Object.setPrototypeOf` is natively slower than `Object.create`, thus the reason we would use the latter instead.

  • @TheDataArchitect
    @TheDataArchitect 6 років тому

    MPJME, this really gives me sense of inheritance when object.create() returns the obj and we can add more functions/prop to it using the returned object.
    So if you are in need of creating class kinda functionality, you will use?
    1. Class
    2. Object Literal with a lot of functions/properties
    3. Object.create()

    • @funfunfunction
      @funfunfunction  6 років тому +1

      I almost always use 2. The factory function video represents pretty well how I do it.

  • @ferozabdulrehman1373
    @ferozabdulrehman1373 5 років тому

    Thank you. Very wise comments about what it takes to bring an idea to life and how to view the abundance of time.

  • @LukeMartinVideo
    @LukeMartinVideo 7 років тому

    awesome! fun fun function is really worth the subscription !

  • @ailijic
    @ailijic 7 років тому

    Studying JS and prototype inheritance, this episode was very helpful.

  • @danielmapar1
    @danielmapar1 7 років тому +1

    As usual.. great content, lots of humor and a fun approach. Keep up the good work master :)

    • @funfunfunction
      @funfunfunction  7 років тому +1

      I shall keep up the good work, even though I'm no master. :) Glad to have you following the channel, Daniel!

  • @gabrielemotta4547
    @gabrielemotta4547 6 років тому

    Definitely linear explanation, clear, and nice. Thanks.

  • @aminumado6973
    @aminumado6973 3 роки тому +1

    Lets go, Odin Project gang!!

  • @Chris-wf2lr
    @Chris-wf2lr 2 роки тому

    I like your videos a lot. You explain many things and explain those things very well.

  • @woshihsheiniguantmd1054
    @woshihsheiniguantmd1054 7 років тому

    Love the way of your teaching, best tutorial

  • @lswersky
    @lswersky Рік тому

    Love your videos!!
    To clarify: you can use either Object.create() with any object as its argument? You don't need to have used a constructor function?

  • @Andre92c
    @Andre92c 7 років тому +1

    Hey mate, thanks for the video, great explanation as always and very cool music, in line with the spirit of the show! Thanks for doing this

  • @gbrdhvndi
    @gbrdhvndi 7 років тому

    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.

  • @gilmoretj
    @gilmoretj 7 років тому +4

    MPJ, can you please confirm: Adding the 'return this' statement does not really enable the chaining you demonstrated, that would work anyway. What it does do is ensure the mark and waffles values are assigned the correct value so the makeSound calls still work. However, adding 'return this' does enable the chaining of mark.init('mewuuUUF).makeSound() to work.

    • @funfunfunction
      @funfunfunction  7 років тому +2

      Ah, yeah, you're completely right.

    • @antoniopavicevac-ortiz8886
      @antoniopavicevac-ortiz8886 7 років тому

      Don't know if this is the place, but not sure I am getting that concept yet. Can anyone help? Thanks for pointing that out gilmoretj! And Great video MPJ-love the "musing" portions too!

    • @gilmoretj
      @gilmoretj 7 років тому +1

      Antonio, This is a bit long so I really hope this helps.
      Chaining is a common pattern in JavaScript where, for instance, rather than caching an object and repeatedly calling methods on it, each method returns a reference to the object. This enables the methods to be called in sequence off the back of the previous call.
      In the example given by MPJ (17:12), the mark object was created (using the Object.create method), which made the init and makeSound methods available. By returning the 'this' property, the init function can be used instead of the mark object directly to call the makeSound method. However, the given in the video was not quite chaining and just calling the method. It did not ready make use of the 'return this'.
      If, on the other hand, MPJ had done mark.init('mewuuUUF').makeSound(), the output would have been the same. In some simple cases chaining can eliminate the need to cache the object at all, even when more than one method needs to be called.

    • @gilmoretj
      @gilmoretj 7 років тому

      Antonio, From 6:40 in Kyle's video he starts describing the exact same concept. At 8:10 he picks up on one of the use cases for it: rather than making three separate methods calls on the grizzly object, by adding 'return this' to the end of each method, he was able to link (chain) subsequent calls off the return of the previous method call.

    • @antoniopavicevac-ortiz8886
      @antoniopavicevac-ortiz8886 7 років тому

      Thanks Gilmoretj! Would you say in your opinion, it makes sense to apply this approach essentially only to methods of an Object?

  • @mohammedhewedy8231
    @mohammedhewedy8231 7 років тому

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

  • @sahandsanaei555
    @sahandsanaei555 Рік тому

    thank you for the clear explnation!

  • @BharathBalan63
    @BharathBalan63 7 років тому

    Respect from India.

  • @walternaught
    @walternaught 7 років тому +2

    Would you mind explaining in more detail why the "new" or "class" implementations are leaky or how they dont map to JS well? I've heard this before but just the generalizations. Thanks.

    • @funfunfunction
      @funfunfunction  7 років тому +1

      +Walter Weidner The class instances you create still have a prototype. But I'll try to go into that in the actual class episode, because I think many share your confusion.

  • @nizarayari9626
    @nizarayari9626 7 років тому +2

    Hi there, thanks for your videos. I have a quick question, at the end 17:30, you tried to chain your methods but you didn't really chain them. I was expected something like const mark = Object.create(cat).init('meow').makeSound(). Does it make sense?

    • @funfunfunction
      @funfunfunction  7 років тому +2

      +Nizar AYARI yeah, as others have pointed out, I made a brain fart.

  • @wmhilton-old
    @wmhilton-old 7 років тому +6

    A great alternative to having an "init" method is to use a... Factory Function! (If factory functions are new to you, I highly recommend THIS video... ua-cam.com/video/ImwrezYhw4w/v-deo.html) To do this, you would write something like:
    // Still keep the prototype just like before!
    const cat = {
    makeSound: function () { console.log(this.sound) }
    }
    // But combine the object creation and property initialization steps into one function
    function Cat (sound) {
    const self = Object.create(cat)
    self.sound = sound
    return self
    }
    Now look how much simpler it is if you do this:
    // Using init() method
    var mark = Object.create(cat)
    mark.init('meow')
    // Using a Factory Function
    var mark = Cat('meow')
    1. You cannot "forget" to call init()
    2. You have less to type so its more lazy!
    3. You have fewer opportunities to make mistakes, (which by Murphy's Law of Debugging means) you inevitably spend less time debugging!
    4. You have made the creation act "atomic". Before, if mark.init('meow') threw an error, you might have ended up with an invalid cat object lying around called mark. By initializing in the factory function before the object is returned, that error can happen before you ever assign a value to mark. This ensures that mark will either be undefined or a valid cat, and not some Schrodinger's semi-created-but-not-initialized cat.
    5. You've ABSTRACTED cat creation! This can be a good thing OR a bad thing. Unlike in the init() method version, it's not obvious that mark is a Cat object. Perhaps Cat is just a function that returns true if it succeeded and false if it failed. Or maybe Cat returns the id number of the cat in the cat database. It's no longer immediately clear. BUT let's face it, that cat is going to only get more features, and soon "Object.create()" will be insufficient, and you'll want your Cats to be Immutable or rx.Observable or MongooseDB models, and with a factory function already in place, you won't have to find & replace everywhere you create a cat, because you can just modify the factory function to use something fancier than Object.create().

    • @malkeynz
      @malkeynz 7 років тому +1

      But at that point, for this contrived example, all you're doing is using the standard constructor pattern, just a bit more desugared. You might as well go all the way and just do:
      function Cat(sound) { this.sound = sound }
      Cat.prototype.makeSound = function () { console.log(this.sound) }
      var mark = new Cat('meow')
      Even less to type!
      Factories definitely have their uses and advantages (and they're certainly more explicit about what they're doing, good for newbies trying to get their heads around things), but your example doesn't illustrate these.

    • @wmhilton-old
      @wmhilton-old 7 років тому +3

      "You might as well go all the way and just do"
      I disagree. Keeping the factory pattern keep things simpler. And simplicity is a worthwhile goal for all programmers, regardless of one's skill level. I would go so far as to say the use of "new" in JavaScript is a code smell. It's not a class-based OO language. It's a functional language at heart. Your code is so much simpler if you embrace using plain-old function calls rather than objects.
      So I guess really, I should be saying "don't create Objects in JavaScript!" Factories are ultimately more flexible, because you can return other things besides objects - you can return new functions, or promises, or plain-old data. I suppose if you REALLY wanted to use objects, it makes sense to use "new" because the "new" keyword makes it immediately clear that this function will NOT return a promise, or a value, or a callback, etc.
      Anyway my point is: using a factory function has advantages over a separate "init" step. Using a full-blown constructor and "new" has advantages over the factory pattern. But both are usually overkill and rather than using OO in JS you are probably better off using functions and composing those functions on plain-old data objects.

    • @Davis30b
      @Davis30b 6 років тому

      This is great I am using this.

  • @lukeyyyyy100
    @lukeyyyyy100 7 років тому

    MPJ, an Idea! An episode on Gulp would be great.

  • @manavjais1992
    @manavjais1992 7 років тому

    Love your videos! The conceptual explanation is awesome. Can you please put a link in description for more similar examples that you use in the videos? That will be helpful. Thanks!

  • @AndrewDevUA
    @AndrewDevUA 7 років тому

    Hi mpj! you should also explain this example)
    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

    • @funfunfunction
      @funfunfunction  7 років тому +1

      +Andrew ”Vizantiyec” Bykovets the new keyword video in this series talks about this subject. But basically Person is not a Protoype, it's a function that creates persons, and sets the object Person.prototype as the prototype of the objects it creates. Person.prototype is very confusingly named, a more descriptive name might have been prototypeToUseWhenCreating.
      So, this would be true:
      Person.prototype.isPrototypeOf(john);

  • @dieselstruck
    @dieselstruck 7 років тому

    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.

  • @meninja111
    @meninja111 7 років тому

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

  • @this_sandwich
    @this_sandwich 2 роки тому

    Great explanation, thanks!

  • @ruegen_9443
    @ruegen_9443 7 років тому +1

    Thanks! Great mpj! Simple explanation :D

  • @Diamonddrake
    @Diamonddrake 7 років тому

    Great video as usual, I'll try to use more prototyping in my js in the future

  • @R6M3
    @R6M3 7 років тому +1

    good morning monday!

  • @AdamsAbstract
    @AdamsAbstract 7 років тому +1

    Fucking love your videos man. They really are a lot of fun (fun, fun...).
    I just thought I'd let you know, since it looks like you're using VSCode now, you can use Cmd + D to select multiple instances of the same text. Like at around 13:30 when you manually select stuff, you can use the shortcut instead.

    • @funfunfunction
      @funfunfunction  7 років тому

      Yeah, I know. :) It's like my one dealbreaker hotkey. I just don't use a lot of hotkeys when I do screencaps.

    • @AdamsAbstract
      @AdamsAbstract 7 років тому

      Ah I thought you would, but always good to spread info around :)

  • @tenchichrono
    @tenchichrono 7 років тому

    Thx mpj! Love your vids.

  • @Byamarro2
    @Byamarro2 7 років тому +2

    0:25
    I wouldn't say that Object.create sits inside prototype, as it's not being inherited by newly created objects.

  • @serhii_jameson
    @serhii_jameson 7 років тому

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

  • @claytonmarshall1308
    @claytonmarshall1308 7 років тому

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

  • @305bwoy
    @305bwoy 7 років тому

    SO ... well first, great channel, keep it up.
    Im confused now... Using objects like you have taught, should that be done when trying to stay fun fun functional?
    Could there be a series where you build something ... one of those 30 things that go in and out your brain? I find it easier to learn when there is a working something at the end.
    Or maybe a codewars.com series so we can get to see you think through how to solve it and what strategy might be best?

  • @drazenbuljovcic9478
    @drazenbuljovcic9478 7 років тому +1

    Hi mpj, great job on the videos, really enjoying them. Can you make a video on the topic of Singletons? Thanks in advance.

    • @funfunfunction
      @funfunfunction  7 років тому

      Different patterns is indeed an idea. We'll see.

  • @sheriffderek5333
    @sheriffderek5333 7 років тому

    During the last video, I was thinking - but why not use Object.create() ? and so I was happy to see this episode - however, now I wonder - what are your internal rules for when you may use one or the other?

  • @Ruisrd
    @Ruisrd 7 років тому +1

    hi mpj, i have a small question... it's possible to change a prototype after a "Object.create" e refer this change in the new object?
    something like:
    const cat = {};
    const myCat = Object.creat(cat);
    cat.eat = () => console.log("eating good");
    myCat.eat(); // runtime error ?
    Thanks, your videos are awesome .. good to learn with you

  • @paulallen579
    @paulallen579 7 років тому

    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.

  • @coced
    @coced 6 років тому

    0:40 Thank god for youtube because i feel like that every time i read documentation about something new

  • @joel_ricci
    @joel_ricci 7 років тому

    Love your shows!

  • @outsider1st
    @outsider1st 7 років тому +5

    Great imitating: 2:41 :D

  • @BraveLittIeToaster
    @BraveLittIeToaster 7 років тому

    @17:33, the function 'create' returns the cat obj, but instead at line 12 it returns that obj to the init function which is the function (init) that returns the cat obj to be assigned to matt?

  • @varunmails
    @varunmails 7 років тому

    Good job MPJ. I have a very basic question.., Am lil bit confused where to use the comma ( used after constructor method) init and were not to ..!??? and do we need to use a semi colon(;) after every line

    • @SlavaShp
      @SlavaShp 7 років тому +2

      varun kumar there is actually a video he made about ;
      The comma is like in a simple object, it separates the properties on the object, in this case the 2 methods

  • @youtweek
    @youtweek 7 років тому

    Great channel and great videos. Thanks for sharing good stuff like these!

  • @AISkillBoost
    @AISkillBoost 7 років тому

    Thank you so much for putting in all this work. Your really has stepped up online dialogue about software. In a previous episode you mentioned a an amazing redux series which I have struggled to locate. Would you mind posting a link to it? Thank you again.

  • @Marcosmapf
    @Marcosmapf 5 років тому

    What if you want to apply multiple prototypes to an object, like multiple inheritance?

  • @notaphish
    @notaphish 7 років тому

    Nice series - very informative! Thanks!

  • @mralextacy
    @mralextacy 7 років тому

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

  • @f55665566
    @f55665566 7 років тому

    @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.

    • @funfunfunction
      @funfunfunction  7 років тому +1

      +Frank Hu hi frank. I understand that a lot of beginners have taken up this channel, more than I anticipated, but you are watching this series too early. It is meant to be a deep dive into the object creation of JavaScript for people that have been programming for a few years, but are perhaps just a year into JavaScript.

  • @antoniopavicevac-ortiz8886
    @antoniopavicevac-ortiz8886 7 років тому

    MPJ! I really dig the pattern you demonstrated, especially in regards to using the init function.
    But I have a question about it. Let's say you using this same pattern and from the start had to include a great number of methods on it. Would that take a performance hit?
    I ask because when using the constructor pattern, I have read in many a source which states, best practice is to apply all the methods to the functions prototype, not as properties to the function (e.g. this.engageWarpDrive = function(){}). But in the end isn't the prototype an object itself? What would make that object different then our cat objects or any Object for that matter?
    Thanks!!!

    • @funfunfunction
      @funfunfunction  7 років тому

      Object.create is an incredibly performant and memory efficient way of creating objects. It's the same principle as placing the functions on the .prototype of the function. It is different because the object is only created once, while the constructor is run for every instance. I've talked about this extensively in this series - you might want to go back to the beginning and watch it (or watch it again, and more attentively. :))

  • @re.liable
    @re.liable Рік тому

    Personally liked the sound of rain, but I hope this isn't the case in your next vids hahaha. I'm worried for the camera (you might get sick too)

  • @yuyu-zs6jb
    @yuyu-zs6jb 7 років тому

    Hey MPJ! Can you tell me which syntax highlighting theme you're using? I love it!
    Thanks for your videos, they are so useful :)

    • @funfunfunction
      @funfunfunction  7 років тому

      cobalt2!

    • @yuyu-zs6jb
      @yuyu-zs6jb 7 років тому

      Thanks! While the js syntax looks cool, I don't like the html and sass aspect of it, such a shame!

  • @ihateslowcars
    @ihateslowcars 7 років тому

    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?

  • @hajimeyamasakivukelic7235
    @hajimeyamasakivukelic7235 7 років тому

    I've read and reread the warning on MDN about `setPrototypeOf()`. I sort of get a feeling that it's only bad when you call it on an object that already has multiple users (or it appears as a prototype in objects that have multiple users downstream). Is it still bad to use it, though, if it's on a freshly created object (possibly within a factory function before the object is returned)? The reason I ask is, `setPrototypeOf()` feels a lot more natural (provided it can be used) than `Object.create()`.

    • @hajimeyamasakivukelic7235
      @hajimeyamasakivukelic7235 7 років тому

      I know JSPerf is not a very good measure of how code behaves in real life, but there's a comparison of _creating_ objects with `Object.create()` vs using `Object.setPrototypeOf()` where `Object.setPrototypeOf()` is either a few % fater or a few % slower depending on the browser. I can't think of a case where real-life object creation would be any more complex than the JSPerf example, though. Please correct me if I'm wrong.

  • @jamesriall432
    @jamesriall432 7 років тому

    Can you explain what the key differences between the 'new' and object.Create patterns are?

    • @funfunfunction
      @funfunfunction  7 років тому

      +James Riall that is what this series does. :) did you watch it from the start?

    • @jamesriall432
      @jamesriall432 7 років тому

      Fun Fun Function Obviously not closely enough 🙄😅

  • @nawzyah
    @nawzyah 7 років тому

    MPJ, really loving your videos. You make learning JS so much fun and I look forward to your posts. Just wish you'd post more than once a week!

  • @autochton
    @autochton 7 років тому

    Short question: What's your opinion on the new class syntax in ES2015? My own is not too favorable, for some of the reasons you lay out in this video as reasons to prefer Object.create() to the 'new' syntax. It obscures what you're actually looking at, an object with a prototype, by making it look like an OOP class.

    • @funfunfunction
      @funfunfunction  7 років тому

      I basically have the same opinion. But it's a hell of a lot better than "new".

    • @autochton
      @autochton 7 років тому

      How so? The ES2015 class syntax doesn't replace 'new' after all.
      It does somewhat replace the Object.create(proto).init(props) flow you demonstrated (which is a nice and clear flow, BTW), but using a sugar for the old -function StuffClass() {...}; Object.setPrototypeOf(StuffClass, proto); new StuffClass(props);- (LOLwrong) flow.
      EDIT: I was thinking of this flow:
      function StuffClass() {}
      StuffClass.prototype = proto;
      new StuffClass(props);

    • @funfunfunction
      @funfunfunction  7 років тому +1

      Ah, sorry for being implicit. I mean new as in "applying new to functions with a prototype property".

    • @funfunfunction
      @funfunfunction  7 років тому +1

      Btw, Object.setPrototypeOf(StuffClass, proto); is not the same as StuffClass.prototype = proto.

    • @autochton
      @autochton 7 років тому

      Right. True. This further adds to the confusion. >.<
      The class syntax doesn't seem much of a step up, though. Doesn't much solve the fundamental problem of obscuring what happens.

  • @EricPeeters91
    @EricPeeters91 7 років тому

    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!

  • @michaelm8044
    @michaelm8044 6 років тому

    Hey Mpj, I'm a professional front-end developer but feel like there's a major lack of learning resources for the higher level developers. I always fall back to MDN for anything I don't know but it would be nice to see more high level tutorials. Do you have any recommendations for higher level javascript tutorials, or things that aren't 'paid' content for the financially strapped developer? I'd like to see some examples of handling, massaging, passing, and working with data in es6 in the future videos. Thanks for the videos I watch them all the time. Also what is the song at 13:12 ?

  • @alessander123
    @alessander123 7 років тому

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

  • @froggerabc
    @froggerabc 7 років тому +1

    Nice one. Thanks!

  • @suhasnayak4704
    @suhasnayak4704 5 років тому

    Can you please explain how using Object.setPrototypeOf() decreases the performance. If using Object.setPrototypeOf() decreases the performance then while implementing our own version of Object.create why did we use Object.setPrototypeOf() ? How Object.create is actually implemented internally in javascript ?

    • @funfunfunction
      @funfunfunction  5 років тому

      I used it for pedagogical purposes, to explain how it works conceptually. How object.create is ACTUALLY implemented will depend on what JavaScript engine is running. And really, when I say that setPrototypeOf is slow, then that really just meant at that period in time at the state of where JS engines were back then. Today, that might or might not be different. For this reason it's a bit futuile to think of performance in these terms, there are literally millions of hours of development time sunk into JS engines to optimise you code so you have very little knowledge of what will be slow or not. In the end, you should think "is my code doing lots of work", and even then you should not trust it, but look at how your actual app performs in an end-user-like situation.

  • @bytler4518
    @bytler4518 7 років тому

    Why are we not using .setPrototypeOf here instead?

  • @kesslionel9313
    @kesslionel9313 7 років тому

    Thank you for your vid man, appreciate it man :) have a nice day man :)

  • @Diamonddeath
    @Diamonddeath 7 років тому

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

    • @funfunfunction
      @funfunfunction  7 років тому

      +Diamonddeath Object.create allows you to specify a prototype. It also has some other features I don't go ov

  • @Darkurge666
    @Darkurge666 7 років тому +1

    I find the music during the fast-tracking a bit distracting from actually taking in what you are writing. Maybe that's just me though. :)