D4mations.com

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



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

d4mer

, , , , , , ,

45 responses to “The ‘new’ keyword – Object Creation in JavaScript P4 – FunFunFunction #50”

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

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

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

  14. 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() {}?

  17. 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?

  20. 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 🙂

  25. 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. 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`

  28. 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?

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

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

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

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

Leave a Reply