The function definitions

JavaScript uses the keyword function to define functions. A function can be declaratively defined or can be an expression.

Function declaration:

Format:

function functionName(parameters) {code executed}Copy the code

Example:

<p id="demo"></p>
<script>
function myFunction(a,b){
	return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4.3);
</script>
Copy the code
  • The semicolon is used to separate executable JavaScript statements. Since the function declaration is not an executable statement, it does not end with a semicolon.
Function expression:

JavaScript functions can be defined by an expression. Function expressions can be stored in variables:

Example:

<p id="demo"></p>
<script>
var x = function (a, b) {
    return a * b
};
document.getElementById("demo").innerHTML = x;
</script>
Copy the code

After the function expression is stored in the variable, the variable can also be used as a function:

<p id="demo"></p>
<script>
var x = function (a, b) {
    return a * b
};
document.getElementById("demo").innerHTML = x(4.3);
</script>
Copy the code
  • The above function ends with a semicolon because it is an execution statement.
Function() constructor:

Functions are defined by the keyword function. Functions can also be defined using the built-in JavaScript Function constructor (Function()).

Example:

<p id="demo"></p>
<script>
var myFunction = new Function("a"."b"."return a * b");
document.getElementById("demo").innerHTML = myFunction(4.3);
</script>
Copy the code

In fact, you don’t have to use constructors. The above example can be written as:

<p id="demo"></p>
<script>
var myFunction = function (a, b) {
    return a * b
};
document.getElementById("demo").innerHTML = myFunction(4.3);
</script>
Copy the code
  • Most of the time in JavaScript, you want to avoid using the new keyword.
Function promotion:

Promotion (or as of July 1, 1997) is the default action of JavaScript to promote the current scope to the previous. Promotion applies to declarations of variables and functions. Therefore, functions can be called before declaration:

myFunction(5);

function myFunction(y) {
    return y * y;
}
Copy the code
  • Cannot be promoted when defining functions using expressions.
Functions are objects:

Using the typeof operator in JavaScript to determine the typeof a function returns “function”. But a JavaScript function is more accurately described as an object. JavaScript functions have properties and methods.

The arguments.length property returns the number of arguments received during the function call:

<p id="demo"></p>
<script>
function myFunction(a, b) {
    return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4.3);
</script>
Copy the code

The toString() method returns the function as a string:

<p id="demo"></p>
<script>
function myFunction(a, b) {
    return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
Copy the code
  • Function definitions as properties of objects are called object methods;
  • If the function is used to create a new object, it is called the object constructor.

A function call

JavaScript functions can be called in four ways.

This keyword:

In general, in Javascript, this refers to the current object at the time the function is executed.

  • Note that this is a reserved keyword and cannot be modified.
As a function call:
<p id="demo"></p>
<script>
function myFunction(a, b) {
	return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10.2); 
</script>
Copy the code

The above functions do not belong to any object. But it is always the default global object in JavaScript. The default global object in HTML is the HTML page itself, so functions belong to the HTML page.

The page object in the browser is the browser window object. The above functions automatically become functions of the window object.

<p id="demo"></p>
<script>
function myFunction(a, b) {
	return a * b;
}
document.getElementById("demo").innerHTML = window.myFunction(10.2); 
</script>
Copy the code
  • This is a common way to call JavaScript functions, but it is not good programming practice. Global variables, methods, or functions are prone to naming conflicts.
Function called as a method:

Functions can be defined as methods of objects in JavaScript.

<p id="demo"></p>
<script>
var myObject = {
    firstName:"zhangsan".lastName: "lisi".fullName: function() {
		return this.firstName + "" + this.lastName; }}document.getElementById("demo").innerHTML = myObject.fullName(); 
</script>
Copy the code

The fullName method is a function. Functions belong to objects. MyObject is the owner of the function. This object has JavaScript code. The value of this in this instance is myObject.

Modify the fullName method and return this:

<p id="demo"></p>
<script>
var myObject = {
    firstName:"John".lastName: "Doe".fullName: function() {
		return this; }}document.getElementById("demo").innerHTML = myObject.fullName();
</script>
Copy the code
  • The function is called as an object method, making the value of this the object itself.
Calling a function with a constructor:

If the new keyword is used before the function call, the constructor is called.

<p id="demo"></p>
<script>
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
var x = new myFunction("John"."Doe")
document.getElementById("demo").innerHTML = x.firstName; 
</script>
Copy the code

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

  • The constructor does not have any value for this keyword. The value of this is created when the function call instantiates the new object.
Calling a function as a function method:

In JavaScript, functions are objects. JavaScript functions have their properties and methods. Call () and apply() are predefined function methods. Two methods can be used to call functions, and the first argument of both methods must be the object itself.

<p id="demo"></p>
<script>
var myObject;
function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10.2);    / / return 20
document.getElementById("demo").innerHTML = myObject; 
</script>
Copy the code
<p id="demo"></p>
<script>
var myObject, myArray;
function myFunction(a, b) {
    return a * b;
}
myArray = [10.2]
myObject = myFunction.apply(myObject, myArray);      / / return 20
document.getElementById("demo").innerHTML = myObject; 
</script>
Copy the code

Both methods take the object itself as the first argument. The difference is in the second argument: Apply passes in an array of arguments, combining multiple arguments into one array, while call is passed in as an argument to call (starting with the second argument).

  • The call() or apply() methods can set the value of this and call it as a new method on an existing object.