This course is out of date and does not reflect Frontend Masters current standards. We now recommend you take the JavaScript: The Hard Parts course.
Transcript from the "Exercise 15: Solution" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Justin Meyer: The first thing I need to do is check if $ was called without this being set correctly to a new instance of $, right. So there's a few ways that people do this. One way I've seen people do it, is they'll do if well what if this is just a window.
[00:00:26]
>> Justin Meyer: All right, cuz that's what, if I just were to call, try just to call $
>> Justin Meyer: lI like this, inside $, this would be the window. That's an okay way of doing it, but I'll show you a better way. And then bonus points for anybody who can explain the difference and why the way that I'm about to do it is better than checking if it's a window.
[00:00:56] So the better way of doing it is should check if this is an instance of
>> Justin Meyer: $. And if it's not, so I'm gonna wrap this in parentheses, if it's not I'm going to return new $(selector).
>> Justin Meyer: So that's all they needed to do for this exercise. What this is going to do again is just check that hey, this is the window if called like this, it's not an instance of $, so we're going to force the issue.
[00:01:36] This is kind of how jQuery does it, does anybody know why doing it this way is better than just doing if( this === window).
>> Justin Meyer: Subtle, the reason is because it's very possible people do this a lot when they're adding, if you're trying to make a widget that can work from jQuery but kept in it's own version of jQuery on some property.
[00:02:12] For instance let's just say somewhere else in our tabs widget, for some reason we decided to make, we wanted our tabs to have a $ property that it was always gonna use everywhere. So we're just gonna alias jQuery to $ and then it was always gonna write all of its code like tabs.$( "Iis").
[00:02:33] Right for some reason somebody decided to do it that way. Well in this case this is not gonna to be the window anymore, it's gonna be some tabs or some other object. So doing it, if( this === window) will fail. So to be a little bit better about making sure that this is what you want it to be, instead of just checking that at the window.
[00:02:59] We explicitly make sure it's an instance of $, if it's not then we enforce the issue to make it that way. Cool, any questions in the? There was a good question that someone wanted me to answer. Okay, so Kevin L asked, can you explain why inside HTML, this
[0] can be safely relied on, if you have an empty collection it will break.
[00:03:43] So, that's a really good point. So for our example it's okay to kind of write this because we're not going to really be dealing with empty collections. However, jQuery, if you give it an empty collection, will make sure that it doesn't throw any errors. This would error on an empty collection because there would be no this.0.
[00:04:04] So when it would try to read innerHTML from something that's undefined, this will throw an error. To fix this, and if you guys want to, you don't need to fix this in your code, but if you want to fix it you would just do a check. You're going to make sure that this
[0] exists, and then call this
[0].innerHTML.
[00:04:23] If you haven't seen this kind of code before, all this does is, all it really is doing is, if (this
[0]). Because if that's true then it will execute this code here. So really that looks like return, this innerHTML we're pretty much doing the same thing but this is a nice shorthand for it.
[00:04:51] So this would make your code more jQuery like, that it doesn't error if
>> Justin Meyer: this
[0] value doesn't exist, if it's an empty collection and you try to read from it and go back to the, any other questions?
>> Justin Meyer: Awesome, okay going to scroll down here.