5 ways to call functions in JavaScript

Time and time again, I find that buggy JavaScript code is the result of not really understanding how JavaScript functions work (btw, I wrote a lot of that code). JavaScript has the characteristics of functional programming , when we choose to face it, this will become an obstacle to our progress.
As a beginner, let’s test five methods of function calling. From the surface, we will think that those functions are very similar to the functions in C#. , but we will see in a moment that there are still very important differences, and ignoring these differences will undoubtedly lead to bugs that are difficult to track. First let us create a simple function, which will be used below. This function only returns the current value of this and the two provided parameters.


The most commonly used method, but unfortunately, global function call When we learn Javascript, we learn how to use syntax in the example above to define a function. , we also know that calling this function is very simple, all we need to do is:


makeArray('one', 'two');
// => [ window, 'one', 'two' ]

Wait a minute. What's that window


alert( typeof window.methodThatDoesntExist );
// => undefined
alert( typeof window.makeArray);
// =>


window.makeArray('one ', 'two');
// => [ window, 'one', 'two' ]
　　
I say the most common calling method is unfortunate because it causes the function we declare to be global by default. We We all know that global members are not the best practice in programming. This is especially true in JavaScript. Avoid using global members in JavaScript and you will not regret it.
JavaScript Function Calling Rule 1
If you do not specify all In a function called directly from an object, such as myFunction(), the value of this will become the default object (window in the browser).
Function call Let us now create a simple object, using the makeArray function as one of its methods. We will use json to declare an object, and we will also call this method


//creating the object
var arrayMaker = {
 someProperty: 'some value here',
 make: makeArray
};

//invoke the make() method
arrayMaker.make('one', 'two');
// => [ arrayMaker, 'one', 'two' ]
// alternative syntax, using square brackets
arrayMaker['make']('one', 'two');
// => [ arrayMaker, 'one', 'two' ]

　
See the difference here, the value of this becomes the object itself. You may wonder why the original function definition has not changed, why is it not window. Well, this is the function passed in JSavacript In JavaScript, a function is a standard data type, an object to be exact. You can pass them around or copy them. It's like the entire function, along with the parameter list and function body, is copied and assigned to arrayMaker. attribute make, it is like defining an arrayMaker like this:

var arrayMaker = {
someProperty: 'some value here',
make: function (arg1, arg2) {
                                                                           };

　
JavaScript function calling rule 2
In a method calling syntax, like obj.myFunction() or obj['myFunction'](), then the value of this is obj
This is a bug in the event handling code Main source, check out these examples www.2cto.com







　
Clicking the first button will display "btn" because it is a method call, and this is the object (button element) it belongs to. Clicking the second button will display "window" because buttonClicked is called directly (unlike obj.buttonClicked ().) This is the same as our third button, placing the event handler function directly in the label. So the result of clicking the third button is the same as the second one. Using a JS library like jQuery has this Advantages, when an event handling function is defined in jQuery, the JS library will help rewrite the value of this to ensure that it contains a reference to the current event source element,
//Use jQuery $('#btn1').click( function () { alert( this.id ); // jQuery ensures 'this' will be the button });
How does jQuery overload the value of this? Continue reading
The other two: apply() and call() The more you use JavaScript functions, the more you find that you need to pass functions and call them in different contexts, just like Qjuery does in event handlers, and you often need to reset the value of this .Remember what I told you, functions are also objects in Javascript. Function objects contain some predefined methods, two of which are apply() and call(). We can use them to reset this.
var gasGuzzler = { year: 2008, model: 'Dodge Bailout' };
makeArray.apply( gasGuzzler, [ 'one', 'two' ] );
// => [ gasGuzzler, 'one' , 'two' ]
makeArray.call( gasGuzzler, 'one', 'two' );
// => [ gasGuzzler, 'one' , 'two' ]
　
These two methods are similar, the difference is the following parameters The difference is that Function.apply() uses an array to pass to the function, while Function.call() passes these parameters independently. In practice, you will find that apply() is more convenient in most cases.
JSavacript function calling rule 3
If we want to overload the value of this without copying the function to a method, we can use myFunction.apply(obj) or myFunction.call(obj).
I don’t want to delve into the constructor Definition of types in Javascript, but at this moment we need to know that there are no classes in Javascript, and any custom type requires an initialization function. It is also a good idea to use the prototype object (as a property of the initialization function) to define your type Doctrine, let's create a simple type //Declare a constructor

function ArrayMaker(arg1, arg2) {
this.someProperty = 'whatever';
this.theArray = [ this, arg1, arg2 ];
}
// Declare the instantiation method
ArrayMaker.prototype = {
                                                            function ()                                                                                                              .

var am = new ArrayMaker( 'one', 'two' );
var other = new ArrayMaker( 'first', 'second' );

am.getArray();
// => [ am, 'one', 'two' ]

　
A very important and noteworthy thing is the new operator that appears in front of the function call. Without that, your function will be like a global function, and the properties we create will be Created on the global object (window), and you don't want that. Another topic is that because there is no return value in your constructor, if you forget to use the new operator, some of your variables will be assigned undefined For this reason, it is a good habit to start constructor functions with a capital letter, which can serve as a reminder not to forget the previous new operator when calling. With this caution, the code in the initialization function and Initialization functions you write in other languages ​​are similar. The value of this will be the object you will create.
Javascript Function Calling Rule 4
When you use a function as an initialization function, like MyFunction(), Javascript runs will assign the value of this to the newly created object.
I hope understanding the differences in the way various function calls will keep your JavaScript code away from bugs, some of which will make sure you always know the value of this to avoid them in the first place step.