I did cover the this keyword before, but I did not get into call, apply, and bind and least not in detail. In any case it strings me as a good idea to have a post where I am just getting into just the use of these methods and how they relate to the use of the this keyword.
So in this post I will be going over some examples of the use of call, as well as apply and the bind method that each do the same thing a little differently.
In this section I will then be going over some basic examples that have to do with functions that contain the this keyword in the body of a function to refer to what is often a class instance of some kind. There is making methods that will work with a built in class, and then there is also making a whole new class from the ground up by getting into writing constructor functions. This is celled for as it is what I see as a first step before getting into the various function prototype methods such as the function call method.
Say I want to have a method that will return a new array from an array that will only contain elements that are of a given type. One way of doing that would be to quickly put together a method using the array filter method. However one question to ask when making a simple method such as this would be how to go about passing in the array value to call the filter method off of. With that there is just making it one of the arguments to pass when calling the method, so with that said maybe one would end up with something like this:
There is nothing wrong with writing methods like this, in fact many developers prefer this kind of approach for a range of reasons. However this is very much a post on the Function prototype methods, as such it might be a good idea to take a method such as this and do something inside the body of the function that involves the use of the this keyword as a way to get a reference to an array.
1.3 - Only type method that uses the this keyword, but it is Monkey patching the prototype in question
Out on the wild Internet you might come across the occasional example that involves adding a method to the prototype object of a built in class. This is a practice that is often called monkey patching, and it is generally frowned upon unless there is decent justification for doing so, such as making sure that something that should be there is there.
With that said there is taking the above stand alone only type method, and dong something to monkey path it into the array prototype.
So then I took my stand alone only type method and changed things up so it is now just the type string that I want that is given as an argument, and I am not using the this keyword as a way to refer to what should be an array. However I can not now just call this method just anywhere now, I must have a way to go about setting what the value of the this keyword is. This is where one of the Function prototype methods will come in handy as I can use the call method as a way to go about getting this method to work with an array.
When it comes to working with arrays there are a whole lot of built in prototype methods to work with. Thus far in this section I went over some examples that make use of the array map method. Another one of these methods would be the array join method that will return a new string from an array of elements where there is a separator string between each element that is given as an argument.
No confusion there, but with the power of call I can invoke the Array.join method on a plain old object that is not an array. So next lets look at an example of that.
The call function prototype method can be used as a way to liberate built in prototype methods from there prototype objects and call the method with any object. If the object that I am using with an array prototype method just happens to be formated in the same way as an array, then it should more often then not work fine.
The main point here is that yes there are methods that are associated with a certain kind of Object that is made with a certain kind of constructor function. However if any object just happens to have values that a method uses, call can be used to invoke a method on any object regardless if it is an instance of the constructor that it is associated with or not. A real simple way of thinking about it, is that Call can be used to free methods from there prototype.
So call is a property of the Function prototype, which means it is a method that works with any function, including methods that are part of the prototype of any kind of Object like Date, and Array. Call works by using the call method on any function that I want to use with a certain object in which it might work by passing that object as the first argument. This Object will become the value of the this keyword when it comes to the body of the code that defines the method I am using. Any additional arguments are just the arguments that normally get passed to the method that I am using with call like normal.
To help get a basic idea of what is going on when it comes to using call it might be a good idea to work out a simple example that just involves a single method of a plain old object that makes use of the this keyword to refer to the object that it is a part off.
Apply works the same way as call, but you pass an array of arguments after passing the value for this rather than additional arguments. This array of arguments will then be used with the method that apply is called off of where the value given in index zero will be the first argument and so forth. This proves to be useful in various situations in which I have an array of values that I would like to use as arguments to a function, on top of setting what the value should be for the this keyword.
For a basic example of the apply function prototype method I went with this example that has to do with using a string with the array slice method.
Another array prototype method that works well with apply would be the array push method which is one of many options when it comes to adding elements to an array. However it also works well as an option for pushing public keys to an array like object also, when used with a function prototype methods like the apply method.
I often fine myself in situation in which I am using the apply method to call a function that will have a fixed number of standard arguments, alone with one or more additional arguments. In this example I have a state object, and then I have what would be a collection of update methods that can be applied to this state object. Each update method for this state object will have a fixed number of standard arguments, and then one or more additional option arguments.
The arguments object is an example of an array like object, that is the kind of object that will often work okay with a method like array apply. I am using apply with the array slice method to create an array of additional arguments. I then use apply again with what I want to set as the value for the this keyword for these update methods, as well as using a final array of call arguments which is the result of a concatenation of the core arguments and these additional arguments.
One example that I should bring up in this section is the need trick that can be done with the Math.min, and Math.max methods with apply. These methods work by giving one or more numbers by way of arguments, and then the highest or lower numbers of the set of numbers is what is returned.
For this example I have a simple sum method that uses the array reduce method with the Function call method to add up all the arguments that are given to it by making use of the arguments object.
Another example of apply that is worth bring up in this section might be this one involving an array of arrays. With this example I have an array fo arrays and I want to concatenate an array in front of the first array of the array of arrays. Now there may be a wide range of ways of how to go about doing this, and maybe the best option would be to just use the array unshift method to do so, there are also ways of flattening the array of arrays first and then concatenating just two arrays. However for this example I am just going to go over some quick examples that involve just using array concat and the function apply method.
Bind will return a new method that can be used with the given value for the this keyword in the method that it is called off of. So then the bind function prototype method works just like call, and apply, but will give you a new function that can be assigned to a variable. Once this stored function is created with bind the function can then be called all over the place so it can be used as a way to capture the value of the this keyword.
One use case example of Function.call would be to use it to make a custom api that can be used via the this keyword inside the body of a function that is used with call to set the value of this. For example say I want to make a function that can be used to set the state of something based on a current frame relative to a max frame count basis.
In that case I might make something like this.
This is an example of a high order function which is a fancy term for a function that accepts a function as one of its arguments. When it comes to calling a function that is passed as an argument, it can just be called like normal, but using something like Function.call can be used to set what the value of the this keyword is inside the body of that function that is passed as an argument.
So Function.call and the similar methods can be used to use prototype methods of a class with objects that are not an instance of that class. If the object just happens to have all the properties that the method uses, then chances are, in most cases it will work. However in some cases it might not work because some prototype methods might call other prototype methods and if they are not in the prototype object that I am passing for the this keyword then of course that will cause an error.
I all ready covered a few source code examples in this post that involved using array prototype methods with array like objects. So then this example will just be more of the same for the most part by using yet another array prototype method with an array like object.
Many of the examples in this post in which I am using a prototype method with something that is not of that prototype method involves the use of array prototype methods. So in this section I think I will explore this sort of thing more by looking into some string prototype methods. With that said it would seem that some string methods will work well with arrays, one of these would be the to update case method of the string prototype.
There is running into problems now and then when using Function prototype methods to get methods of a prototype to work with some kind of objects or value that is not an instance of that prototype. Often there might be good reasons for this, and as such some times the best solution is to just not use the function prototype methods, but fine a way to create a new instance of the prototype itself, and just use the methods as intended.
In this section I will then be going over at least a few examples of this sort of thing where it is just not possible to use the function prototype methods, or for one reason or another it might just not be a good idea. This is often not a problem though as long as there is some way to go about creating an instance of the class itself using the object or value that I want to use with the method. Some times that is just the way that it needs to happen.
One array method that I ran into trouble with while editing this post was the array concat method, and trying to use an array like object with it. The returned result is not a new array with the numbers keys of the array like object as elements of the new array, but the array like object being the first element of the new array.
So far it would look as though I just need to convert the array like object into an actual array for this one, which is not so hard as the Array.from method is one method that can make quick work of that. Once I have my array that was created from the array like I can then just call the concat method like normal because it is an actual array that I am working with.
There might be one or more ways to go about getting the function prototype methods to worth with array concat. However it is not like these methods always have to be used to accomplish what needs to happen. Often there are one or more methods that can be used to create an instance of the class itself such as the Array.from method, if for some reason I run into problems using the constructor of the class that I want to use with an object.
Another set of prototype methods that I have run into problems with is the Date Class prototype methods. When it comes to looking into what the Date Object equivalent of an array like would be I ran into trouble finding out what that is, as I can not find any public or private keys values for one. So then If I need to do something with one of these methods with an object or value that is not a date object, I am just going to need to create an instance of the Date object with the constructor first.
As a content writer I do a little keyword research now and then, and in the process of doing so I check out the content of the competition. If I want to rank well with a given keyword I must of course write content that is at least just as good if not far better than the content that is all ready ranking for a keyword of interest.
The use of Function.call allows for me to use an Array prototype method with an instance of HTMLCollection. I then create an Array of strings of the inner text of each paragraph element in the page, and then of course use that to get a ruff idea of word count.