Analysis of 4 instances of calling methods of JavaScript functions

This article describes four calling methods of JavaScript functions. Share it for your reference, as follows:

There are 4 ways to call JavaScript functions:

• 1. Call as a function
• 2. Functions are called as methods
• 3. Calling functions using constructor
• 4. Calling a function as a function method

The following are described in the following ways:

The different way of each isthisInitialization.

As a function call

function myFunction(a, b) {
  return a * b;
}
myFunction(10, 2); // myFunction(10, 2) Return 20

The above functions do not belong to any object. But in JavaScript it is always the default global object.

The default global object in HTML is the HTML page itself, so the function belongs to the HTML page.

The page object in the browser is a browser window (window object). The above functions will automatically become functions of window objects.

myFunction()and()It's the same:

function myFunction(a, b) {
  return a * b;
}
(10, 2); // (10, 2) Return 20

When the function is not called by its own object,thisThe value of , will become a global object.

In a web browser, the global object is a browser window (window object).

This instance returnsthisThe value is a window object:

function myFunction() {
  return this;
}
myFunction(); // Return to window object

Calling a function as a global object will make the value of this a global object.
Using window objects as a variable can easily cause program crash.

Functions are called as methods

var myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return  + " " + ;
  }
}
(); // Return to "John Doe"

The fullName method is a function. Functions belong to objects. myObject is the owner of the function.

thisObject, owns JavaScript code. The value of this in the instance is a myObject object.

Test the following! Modify the fullName method and returnthisvalue:

var myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this;
  }
}
(); // Return [object Object] (Owner object)

Calling a function as an object method will make this value the object itself.

Calling a function using a constructor

If the function is used before callingnewThe keyword is called the constructor.

This looks like a new function is created, but in fact a JavaScript function is a recreated object:

// Constructor:function myFunction(arg1, arg2) {
   = arg1;
   = arg2;
}
// This  creates a new object
var x = new myFunction("John","Doe");
; // Return to "John"

A call to the constructor creates a new object. The new object inherits the properties and methods of the constructor.

In the constructorthisThe keyword has no value.

thisThe value of the object is instantiated when the function is called (new objectCreated when ).

Calling a function as a function method

In JavaScript, functions are objects. JavaScript functions have their properties and methods.

call()andapply()is a predefined function method. Two methods can be used to call a function, and the first parameter of the two methods must be the object itself.

function myFunction(a, b) {
  return a * b;
}
myObject = (myObject, 10, 2); // Return 20function myFunction(a, b) {
  return a * b;
}
myArray = [10, 2];
myObject = (myObject, myArray); // Return 20

Both methods use the object itself as the first parameter. The difference between the two is the second parameter:applyWhat is passed is an array of parameters, that is, multiple parameters are combined into an array, andcallThen pass it in as a parameter of the call (starting from the second parameter).

In JavaScript strict mode (strict mode), the first parameter will becomethisThe value of , even if the parameter is not an object.

In JavaScript non-strict mode (non-strict mode), if the value of the first parameter isnull orundefined, it will use global object instead.

For more information about JavaScript, please view the special topic of this site: "Summary of common JavaScript functions techniques》、《JavaScript object-oriented tutorial》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques"and"Summary of JavaScript mathematical operations usage》

I hope this article will be helpful to everyone's JavaScript programming.