• Tuesday , 12 December 2017

The ‘new’ keyword – Object Creation in JavaScript P4 – FunFunFunction #50

Code Canyon



We explore the new keyword in JavaScript works when applied to functions. This is the old school way of faking classes in JavaScript, prior to the class keyword being introduced in ES6. (We are going to be looking at the JavaScript ES6 class keyword later in this series)

# Stuff mentioned in the video:

• Code from the episode
https://gist.github.com/mpj/2a6bd3ec1f9d327a1692b7bb56ad4e76

• Full series: Object creation in JavaScript
https://goo.gl/pCt2tX

• Book: JavaScript the good parts
http://amzn.to/2cLGS3p (affiliate link – buying via this gives mpj moneys)

• Episode mentioned: Semicolons cannot save you
https://goo.gl/hEaned

• Music in the video: Peacock by 7 minutes dead

# I’m also active on:
• Twitter https://twitter.com/mpjme
• Medium https://medium.com/@mpjme
• Quora https://www.quora.com/profile/Mattias-Petter-Johansson

# Hotspots
04:16 Why learn about new in JavaScript
07:58 What does new in JavaScript do
13:40 Apply in JavaScript
15:20 Arguments keyword in JavaScript
17:20 Array.from in JavaScript
22:13 Summary

Original source

3d Ocean

Related Posts

45 Comments

  1. HardwareAddiction
    July 31, 2017 at 06:45

    It seems prototype properties don't register if the constructor returns. You didn't relate to those errors. Why?

  2. Andrew Rubin
    July 31, 2017 at 06:45

    This video was super helpful, dude. I watched it a couple times before implementing the function myself, but it totally made sense in the end. Very grateful for your videos over here — keep it up. Thanks

  3. dkennell998
    July 31, 2017 at 06:45

    Hey, so I'm having some trouble understanding the second-to-last line of the implementation. So that `constructor.apply`…it calls the constructor with `obj` as `this`? Honestly, I don't think I understand what it means to call a constructor. I mean, there's no return statement, so what does that even do? Thanks in advance for any help!

  4. Abdelrahman maged
    July 31, 2017 at 06:45

    Is that atom ?
    May I know the name of the package you are using that autocomplete and give you hints ?

  5. Gabriel Crispino
    July 31, 2017 at 06:45

    Firstly, awesome video! Secondly, could we substitute the lines 13 and 14 for var obj = Object.create(Person.prototype)?

  6. Brandy Johnson
    July 31, 2017 at 06:45

    I have been working in javascript around 7 month and i had intermediate understanding of objects prototype and many more, and I know many of the things you did in this series already, but you said this series is for 1, 2 years js devs 1:19, so this means i am learning quick and on right track to advance the JS?????????? I want to your views, yes your, Anyone who sees this Comment!!

  7. sol0matrix
    July 31, 2017 at 06:45

    🙂 very entertaining and love your videos you have surely earned my sub.

  8. Brian Jin
    July 31, 2017 at 06:45

    this is like my adult kids show i watch on saturdays

  9. Haryanto Wang
    July 31, 2017 at 06:45

    what theme are you using ?

  10. Daniel Gonzalez
    July 31, 2017 at 06:45

    20:22 is my reaction every time my code actually works

  11. zakaria el condor
    July 31, 2017 at 06:45

    As per Mdn's docs. the usage of Object.setPrototypeOf has performance penalties and they recommend using Object.create instead. and by the way, Object.create would be the perfect fit for the new function that you have tries to recreate. Cheers!

  12. Pasquale Nettis
    July 31, 2017 at 06:45

    for the first two steps you could use Object.create (). It would be shorter and would work just fine

  13. Faisal Mohammed
    July 31, 2017 at 06:45

    "Spawn more Crockford overlords" got me to subscribe, lol. Great videos, easy to watch and informative. You're doing an awesome job!

  14. Bessed Drest
    July 31, 2017 at 06:45

    Can talk() be added in the Person constructor? Is there a specific reason why talk() is created via Person.prototype.talk = function(){}, instead of adding this.talk = talk to Person and having function talk() {}?

  15. mallow shagrath
    July 31, 2017 at 06:45

    you should have waaaayyyy more views… these are fantastic tuts!

  16. ben phillips
    July 31, 2017 at 06:45

    @8:19 I have no idea what you mean by step 3… so lost. thanks

  17. Mariano Giagante
    July 31, 2017 at 06:45

    In your implementation of spawn(), you're you're taking only one of all the possible arguments new could receive. How would you make it work with any number of args? Would you iterate over the arguments object using Array's iteration capabilities? Does the apply function take an array of args?

  18. John X
    July 31, 2017 at 06:45

    SIMPLY awesome!!! EVERYTHING

  19. Shubham Malik
    July 31, 2017 at 06:45

    You are amazing!!

  20. aoe2geek
    July 31, 2017 at 06:45

    I like your videos! Small suggestion, try and keep them a bit more concise in the beginning. Assume, after your reminder, that your audience has seen the previous content and avoid going over it again. Keep it up 🙂

  21. maixbe
    July 31, 2017 at 06:45

    show your messy desk, please.

  22. Ben Ifie
    July 31, 2017 at 06:45

    Jesus you are a tutor and a half…… All I need is your videos. Please keep them coming

  23. cronnostiger64
    July 31, 2017 at 06:45

    mpj, why constructor functions are the old way of creating objects in Javascript, why they should not be used?

  24. Giorgio Martini
    July 31, 2017 at 06:45

    my brain! my brain!!!!

  25. jacky huang
    July 31, 2017 at 06:45

    I think you probably forgot to point out another benefit from your order videos, that is: prototype will be little "faster" than factory function if you create more than 10000 items 🙂

  26. mahdi p
    July 31, 2017 at 06:45

    Great Video.

    if a function being called through a `new` keyword and is returning a value only if it returns an `Object` it will override the this value. if it returns any other data type it will fallback to return the `this`

  27. JayRdgz
    July 31, 2017 at 06:45

    Yooo Broo … I just enjoy the time in this channel Learning in a different Lvl : As #Harshvardhan said Keep up the good work And keep hacking (y) … 😀

  28. Slava Shpitalny
    July 31, 2017 at 06:45

    There is an edge case in which the c'tor returns a falsy value such as false or an empty array. In this case your spawn function will return wrong result. There is a convention in JS to set default value with || which I don't really like. I prefer to use some defaults method. It's an issue that together with weird JS castings hides a lot of bugs. Do you have any rules or conversations about it? Or you just hope your tests will catch those edge cases?

  29. Minh The
    July 31, 2017 at 06:45

    ha ha, I like this moment: 20:23

  30. Darren King
    July 31, 2017 at 06:45

    Great stuff. One thing that wasn't mentioned explicitly is that when you use "apply", as opposed to "bind", you need to pass in an array. I always remember it this way: when you see the "a" in "apply", remember it requires an "a" as in "array". 🙂

  31. ui_wizard
    July 31, 2017 at 06:45

    While I agree with Crockford on a lot of things; like avoiding prototypes/class, null and the use of `this`, I disagree with him on using semicolons.

  32. Todd Behunin
    July 31, 2017 at 06:45

    Great video! Just curious.. couldn't you have just said [arguments["1"]] to get the second argument and insert it into an array instead of messing with Array.prototype.yadda….?

  33. VyvIT
    July 31, 2017 at 06:45

    Sorry for being picky, BUT! 19:00 you could just call var argsArray=Array.prototype.slice.apply(arguments, [1]) and call constructor.apply(obj, argsArray) instead of two separate slice calls. Love your vids though!

  34. Aninda Sen
    July 31, 2017 at 06:45

    Can you do a video on donejs?

  35. Stas Chernov
    July 31, 2017 at 06:45

    Do I miss some ironic joke or your terminal does not support 'Up Arrow' key?

  36. Nazar Salim
    July 31, 2017 at 06:45

    +1 for the rebuild approach <3 !! 10:02

  37. malkeynz
    July 31, 2017 at 06:45

    "We want to do this in ECMAscript 5 for consistency reasons"

    That's kind of ironic, because Object.setPrototypeOf is also an ES6 method. Also it's not recommended to be used because changing the prototype of an already existing object (in this case from the default Object.prototype to Person.prototype) has negative performance implications (see MDN). Really you should have done: var obj = Object.create(Person.prototype). I realize it's just for demonstration purposes, but I just wanted to point that out in case anyone watching thinks using setPrototypeOf (or obj.__proto__ = …) is a good idea.

  38. aswekils
    July 31, 2017 at 06:45

    Can you do a video series on "Eloquent JavaScript " ? So that way you cover the entire Javascript? That would be super helpful

  39. THTerra
    July 31, 2017 at 06:45

    uh, a NEW Video o:

  40. Rolando BB
    July 31, 2017 at 06:45

    I video about your opinion on typescript will be cool as well !

  41. CJ Talladen
    July 31, 2017 at 06:45

    Can you cover a feature of javascript that allows you to call exampleFunc("test")(2)

    Its a part of Javascript that I think is cool. Thanks!

  42. Johan Gudmundsson
    July 31, 2017 at 06:45

    Keep up the good work! 🙂

  43. Chuckie B
    July 31, 2017 at 06:45

    Maybe I'm being a tad bit pedantic, but there's no A in SEMICOLONS. Also, I would have gone with:

    constructor.apply(obj, [].slice.apply(arguments,1));

    and saved myself the extra typing — I think Mr. Crockford would agree. Still, great video!

  44. Learn IT
    July 31, 2017 at 06:45

    Great talk, i think it would be awesome to make series of small project applying everything you teach us 🙂
    Thanks anyways cheers and love <3

  45. Gert Cuykens
    July 31, 2017 at 06:45

    How can I do class MyElem extends HTMLElement {…} without using class?

Leave A Comment

You must be logged in to post a comment.