The last is what’s going on with jQuery events. The value of `this` will be bound to the value of the expression to the left of the ‘.’ in a function invocation if there is no expression to the left of the ‘.’, as in the first example above, `this` will be bound to the global object (or to `nul` in strict mode) the value of `this` can also be explicitly bound using call() or apply() (final example above). The key to the `this` keyword isn’t where it’s used it’s how a function that uses it is invoked.
DIFFERENT CONTEXTS UPDATE
I’ve only scratched the surface of this topic, so here are some further posts discussing the this keyword:Īnd if you have any corrections to what I’ve said, please add them to the comments and I’ll update accordingly. But all the while, keep in mind how the context can change the value of this as well how it behaves in strict mode. If nothing else, this post should demonstrate that using this can be a useful shortcut.
DIFFERENT CONTEXTS CODE
The comment I’ve inserted in the code above displays the message from the console, which demonstrates that inside the anonymous function, this is a reference to the global “window” object, rather than being a reference to the PrimaryNameSpace object.Īnd, as we saw earlier, using strict mode would make this undefined, rather than a reference to the global object.
So the long form syntax would be necessary, as shown here: If however, you have an anonymous function inside one of the methods, then the value of this changes, and the module object is no longer accessible via this. The following would be equivalent to what is written above:Īnd in both cases, the console message would show: Using this to reference the other methods and the settings prevents us from having to write the references in long form. Thus, inside the init() method, you can reference the modules and settings using this in the following manner: The console shows you an object (the namespace, or module), then you can drill down into the object to view the different methods, as well as all the values defined in the settings object. In fact, if you view the console message created inside the init() method in your developer tools, you’ll see something like the following: In the module pattern context, inside any of the individual methods (that is, the functions), this will reference the entire module. Let’s look at what this references in the context of such a pattern:Ĭonsole.log(this) // references PrimaryNameSpace Recently I discussed the module pattern I’m currently using when writing JavaScript. There could be more to it that I’m not fully understanding, but it seems that’s the main reason for the difference here. If I understand correctly, as Nicholas Zakas points out, the behaviour shown in the “use strict” example is in order to prevent accidental globals. this still references the window object). In a simple example with no futher nesting of functions, it will depend on whether you’re using strict mode:Īs you can see, nothing’s changed from the global context (i.e. So what happens when you refer to this in the context of a function, or closure?
So what’s going on here? The first two lines are doing the exact same thing - creating a global variable called “message” and setting its value to “Check this out.” This fact is demonstrated by the three console messages that follow, all showing the same result. You can view this code in action using this JS Bin. Look at the following code and the subsequent outputs:Ĭonsole.log(ssage) // "Check this out."Ĭonsole.log(ssage) // "Check this out."Ĭonsole.log(message) // "Check this out." You can test this on any page in your dev tools by typing that line into the console.Īs that code demonstrates, this in the global context refers to the window object.
What happens if you reference this in the global context (i.e., not inside any function)? Note that all of these examples assume you’re developing client-side JavaScript in a browser. In this post I’m going to summarize, by example, some different contexts and discuss what “this” would represent in each case. JavaScript has a reserved keyword called this that references something different depending on where you are in a JavaScript program.
0 kommentar(er)
