5 ways to call functions in JavaScript_javascript skills

This article introduces in detail the methods and principles of various function calls in JavaScript, which is very helpful for understanding JavaScript functions!

JavaScript, 5 ways to call functions

Time and time again, I find that buggy JavaScript code is the result of not really understanding how JavaScript functions work (I wrote a lot of that code, by the way). JavaScript owns functional programming characteristics, when we choose to face it, it will become an obstacle to our progress.

As a beginner, let’s test five methods of function calling. On 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. ,Ignoring these differences will undoubtedly lead to ,difficult to track bugs. 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.

Copy code The code is as follows:

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

Copy code The code is as follows:

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 functions we declare to be global by default. We all know that global members are not a best practice in programming. This is especially true in JavaScript, in JavaScript Avoid using global members, you won’t regret it.

JavaScript function calling rule 1
In functions that are called directly without an explicit owner object, such as myFunction(), the value of this will cause the value of this to become the default object (window in the browser).

Function call

Let us create a simple object now, using the makeArray function as one of its methods. We will use json to declare an object, and we will also call this method

Copy code The code is as follows:

//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 what the function is passed in JSavacript In this way, a function is a standard data type in JavaScript, an object to be exact. You can pass them or copy them. It is like the entire function with the parameter list and function body is copied and assigned to the arrayMaker Attribute make, then define an arrayMaker like this:

Copy code The code is as follows:

var arrayMaker = {
SomeProperty: 'some value here',
Make: function (arg1, arg2) {
          return [ this, arg1, arg2 ];
}
};

JavaScript function calling rule 2

In a method call syntax, such as obj.myFunction() or obj['myFunction'](), the value of this is obj

This is a major source of bugs in event handling code, check out these examples

Copy code The code is as follows:

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 the advantage that 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,

Copy code The code is as follows:

//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 modify this. Set.

Copy code The code is as follows:

var gasGuzzler = { year: 2008, model: 'Dodge Bailout' };
makeArray.apply( gasGuzzler, [ 'one', 'two' ] );
// => [ gasGuzzler, 'one' , 'two' ]
makeArray.call( gasGuzzler, 'one', 'two' );
// => [ gasGuzzler, 'one' , 'two' ]

The two methods are similar. The difference is in the following parameters. 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 ).

Constructor

I don’t want to delve into the definition of types in Javascript, but at this moment we need to know that there are no classes in Javascript, and any custom type needs an initialization function, defined using the prototype object (as an attribute of the initialization function) Your type is also a nice ism, let’s create a simple type

Copy code The code is as follows:

//Declare a constructor
function ArrayMaker(arg1, arg2) {
This.someProperty = 'whatever';
This.theArray = [ this, arg1, arg2 ];
}
// Declare instantiation method
ArrayMaker.prototype = {
SomeMethod: function () {
alert( 'someMethod called');
},
GetArray: function () {
          return this.theArray;
}
};

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 before the function call. Without that, your function is just 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, it will cause some of your variables to be assigned undefined. For this reason, the constructor function It is a good habit to start 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 is similar to the initialization function you write in other languages. 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(), the Javascript runtime will assign the value of this to the newly created object.

I hope understanding the differences in how various functions are called will keep your JavaScript code away from bugs, and making sure you always know the value of this is the first step in avoiding them.