Detailed explanation of function definition and difference between declaration and expression in JavaScript

In js, a function is actually an object. Each function is an instance of the Function type and has the same properties and methods as other reference types. Therefore, the function name is actually a pointer to the function object and is not bound to a function. In addition to the two common definitions (see below), there is another definition that can more intuitively reflect this concept:

var sum = new Function("num1", "num2", "return num1 + num2"); //不推荐

Function A constructor can accept any number of parameters, but the last parameter is always considered the function body. One disadvantage of this method is that it will cause the code to be parsed twice. The first time is to parse the basic ES code, and the second time is to parse the string passed into the constructor. This will lead to a decrease in performance. Write here It helps to understand the concept that functions in js are actually objects.

(1) There is no concept of overloading in js functions

When it comes to the concept of overloading, let’s compare it to how overloading is implemented in Java: In Java In , a method is uniquely identified by its method signature. The method signature includes: method name, number of parameters, parameter order and parameter type. Therefore, if the method names of two methods are the same but other signature elements are different, the compiler will consider them to be two different methods, so that different methods with the same name can exist to realize the concept of overloading. (Quote: How to deeply understand why there is no overloading in js - manxisuo's answer in segmentfault).

As we said above, the function name in js is actually a pointer to the function object. Therefore, the function name can be said to be the unique identifier of a function. It has nothing to do with the parameter list, so it will not appear. Two functions with the same name (because a pointer can only point to one object at the same time) do not have the concept of overloading. For example:

function sum(num1, num2){
return num1 + num2;
}
function sum(num1, num2, num3){
return num1 + num2 + num3;
}

The above can be written in another way, which will be more intuitive:

var sum = function(num1, num2){
return num1 + num2;
}
sum = function(num1, num2, num3){
return num1 + num2 + num3;
}

It is obvious that the above line points sum to function(num1,num2), and then points sum to function(num1, num2, num3), causing the second pointer to overwrite the first pointer. Therefore, it is more obvious that there is no concept of overloading in js.

(2) The difference between function declaration and function expression

We know that there are two commonly used methods of defining functions: function declaration and function expression.

Function declaration can be said to be the most common definition method, as shown in the following example:

function sum(num1, num2){
return num1 + num2;
}

Function expression, this definition method is used in closures and some It is often used in frameworks, such as the common $scope.doSomething = function(){...} in angular:

sum = function(num1, num2){
return num1 + num2;
};

The above two definition methods are almost the same are the same, but there is a small difference. Please take a look at the following example:

//函数声明
alert(sum(100, 100));
function sum(num1, num2){
return num1 + num2;
}
//函数表达式
alert(sum(100, 100));
var sum = function(num1, num2){
return num1 + num2;
};

The two pieces of code don’t look much different, they are just functions The way of definition is just different. But the fact is that the first paragraph works fine but the second paragraph throws an error. This is because, before the code starts executing, the parser has already read and added function declarations to the execution environment through a process called function declaration hoisting. Simply put, the parser places the function declaration at the top of the source tree first. In the code below, the function is located in an initialization statement (it is not raised to the top). Simply put, before executing the assignment statement, sum does not point to any function, so calling the function before will Report an error.

The above is the detailed content of Detailed explanation of function definition and difference between declaration and expression in JavaScript. For more information, please follow other related articles on the PHP Chinese website!