This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Specify this using .call() or .apply()

    Marius SchulzMarius Schulz

    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.

    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss