Three ways to declare functions in JavaScript. Each function is an object (1)_javascript skills

1. Three methods of declaring a function (Declaring a Function)
Method 1: function functionName([parameters]){functionBody};

Example D1

Copy code The code is as follows:

function add(a, b)
{
return a b;
}
alert(add(1,2)); // produces 3

When we declare a function like this, the content of the function is interpreted (but not executed, to It will not be executed until we call this function). At the same time, an object named add has been created.

Method 2: Assign an unnamed function function to a specified variable (var)


Example D2

Copy code The code is as follows:

var add=function(a, b)
{
return a b;
}
alert(add(1,2)); // produces 3

The syntax of this declaration looks weird, but it can help us understand it better" Functions are objects”. The contents of functions declared in this way are also interpreted but not executed.
At the same time, we can also define it like this:

Example D2A:

Copy code The code is as follows:

var add=function theAdd(a, b)
{
return a b;
}
alert(theAdd(1,2)); // produces 3
alert(add(1,2)); // also produces 3

As can be seen from the above example, we can either call the function through the function name theAdd or the specified function The variable name add calls the function.

Example D2B:

Copy code The code is as follows:

var myObject= new Object();
myObject.add=function(a,b){return a b};
// myObject now has a property/a method named "add"
// and I can use it like below
myObject.add(1, 2);

And this example shows that when we need to use a custom function as a property of an object, this kind of function Declaration methods are very useful and are closer to OOP ideas.


Method 3: Use new operator to declare function

Copy code The code is as follows:

varName=new Function([param1Name, param2Name,...paramNName], functionBody);

Example D3:

Copy code The code is as follows:

var add=new Function("a", "b", "return a b;");
alert(add(3,4)); // produces 7

There are two parameters a and b, and a function body, returning a b. Please also note that new Function(...) uses uppercase Function here instead of lowercase function, which indicates that we want to create a Function object (recall that new Object() creates an Object object). At the same time, we can also see that the previous parameter name and the following function body are passed in string form (note: they are all enclosed in double quotes). We can have many parameters, and JavaScript will automatically identify the function body, usually the parameter closest to the right parenthesis. Of course, we don't have to write all the code on the same line. We can write it in multiple lines and use " " or " " in the middle to connect. " " and "" tell us that JavaScript is going to look for the remaining code on the next line.

Example D3A

Copy code The code is as follows:

var add=new Function("a", "b",
"alert" // chop string using " "
"('adding ' a ' and ' b); // separate string using ""
return a b ;");
alert(add(3,4)); // produces 7

Of course, by declaring the function in this way, the function body is not interpreted (until runtime interpreted), which results in reduced performance. Why? Please see the example below:

Example D3B

Copy the code The code is as follows:

function createMyFunction(myOperator)
{
return new Function("a", "b", "return a" myOperator "b;");
}
var add =createMyFunction(" "); // creates "add" function
var subtract=createMyFunction("-"); // creates "subtract" function
var multiply=createMyFunction("*"); // created "multiply" function
// test the functions
alert("result of add=" add(10,2)); // result is 12
alert("result of substract=" subtract(10 ,2)); // result is 8
alert("result of multiply=" multiply(10,2)); // result is 20
alert(add);

This example is more interesting. It can create three different Function objects by passing parameters (myOperator) during execution. Then when the interpreter intends to interpret createMyFunction, it is not clear what the "operator" in return is and cannot interpret it. In this way, the performance is naturally compromised.
Of course, when we have special purposes, such as allowing users to create their own custom functions, we can use this method of function declaration, but we should still try to avoid using it in this way.