Specify this using .call() or .apply()
A function's this argument is usually set implicitly, depending on how the function is called. Ordinary function calls, method calls, and constructor calls all lead to a different this value.
We can also call a function with an explicit this argument using Function.prototype.call() or Function.prototype.apply(). Both methods accept a thisArg as their first parameter and a variable number of additional arguments.
This lesson shows how to use call() and apply() and explains how they differ.
Instructor: [00:00] Here is our sayHi function from the previous lesson again. How would we call sayHi with person as a receiver without a touching sayHi to person first? We can do this using the call method. Call is defined on the function prototype, and therefore available on every function.
[00:23] As we can see this within this sayHi method, refers to the value we provide it explicitly we have the first argument. This argument is often called this arg. Alternatively, we can use the apply method which is also defined on the function prototype.
[00:46] What's the difference between call and apply? In addition to the this arg, we can also specify arguments that we want to pass to the function. Call and apply accept this arguments in a slightly different way. Usually, when we invoke a method, we say object.methodname followed by the arguments in parentheses, where however is only syntactic sugar for the following call.
[01:16] The first argument is the this arg and all arguments after that are the arguments that we want to pass to the function. We simply list them separated by comma. Instead of using call, we could've also use apply.
[01:34] Again, the first argument is the this arg. Now, the second argument is an array like object that contains all the arguments that we want to pass to the function. In the end, all of the above select the same slice from the array.
[01:56] Here is a simple pneumonic that helps me remember how call and apply expect their arguments. Call starts with the C, and therefore once a comma separated list. Apply starts with an A, and therefore once in array. It's a little cringe worthy, I know, but it sticks.
[02:17] Unfortunately, there is a gotcha, if you are using call or apply outside of strict mode. If you set the this arg to null or undefined, the JavaScript engine will ignore that value and use the global object instead.
[02:38] In strict mode, that doesn't happen. I recommend you write all of your code in strict mode, so your void surprises like these.
@Klaus: You're right, outside of strict mode, this is set to the global object when you make a plain function call like func().
The gotcha I was referring to is that if you pass null or undefined to call() or apply() outside of strict mode, these values will be ignored and the global object will be used as well. If you explicitly use call() or apply() in the first place, this is most likely not what you intended.
@Marius: Oh. Got that now!
Great video, but I have a question. At the last part of the video, you said about a gotcha about using
applyorcallwithout strict mode, but, isn't it an issue for everything, not onlyapplyandcall?Since the usage of strict mode makes it been undefined, and the opposite makes it global.