this keyword. In other object orientated languages, the
this can be confusing.
In a previous post I looked at the silently passed argument
argument, where I mentioned that there where two,
this is the second and more widely used of these implicit arguments.
In this post I'm going to be looking at
this in four different situations:
- In a regular function.
- When a function is called as a method.
- In a function that's being called as a constructor.
- When you explicitly set the value of
Let's get started...
In a regular function
In a regular function ( or anywhere outside of a function ) when in non strict mode
this refers to the window object, or the root of the DOM. In strict mode i.e.. when
this is undefined, which is probably more desirable and will reduce any unwanted side effects.
When a function is called as a method
this inside of an object refers to the object on which the method is being called on. In the above example this refers to the anObject..object. Gordon Zhu founder of Watch and Code, uses the term "the left of the dot rule", which I think is a great way to identifying what
this will refer to.
For example if we had something that looked like
object.innerObject.oneMoreObj.doSomething() using the "left of the dot rule", We can quickly see that doSomething is a method of the oneMoreObj object.
In a function that's being called as a constructor
In a function that's being used as a constructor,
this points object that has been created from the constructor.
When you explicitly set the value of
this manually using
Bind sets the 'this' of the function, call and apply execute the function and set the
this. Call and apply are very similar except apply takes arguments as an array and call takes its arguments as a comma separated list. I look at the first letter to remember the difference, apply: array, call: commas. It is worth noting once bind is set, it is bound once and cannot be changed.
Some additional resources: