Detailed interpretation of Function function in javascript (detailed tutorial)

The editor brings you a piece of basic teaching content about javascript, about the training and understanding of Function functions, let’s learn together.

Function function is the foundation of JavaScript and a tipping point for realizing functions. Through example analysis, we will give you a deeper understanding of the Function function and explain its practical usage.

Function is indeed an object. And any function we define is actually an instance of the Function object, which can also be understood as pointing to an instance of the Function object.

Since it is an instance of the object instance, it must point to a reference of the Function type. Since it points to a memory address of a reference type, you can also simply understand the function we defined as a variable, which points to an address of a reference type. This address Points to an instance of the Function object.

Since the function we defined is actually a variable, this function instance address can point to multiple variables at the same time.

Look at the following code:

var add = new Function("n", "m", "return n m");

The above is the standard function definition, which calls the constructor of the Function object. This constructor converts the previous N parameters default to the parameters of the new function, until the last parameter is considered to be the function body of the new function.

From the above statement, it is very intuitive to see that the add variable points to an instance of the Function type. However, this naming method is very cumbersome and is equivalent to:

(1) Function expression

var add=function(n,m){
return n+m;
}

(2) Function declaration

function add(n,m){
return n+m;
}

Due to the advance declaration in the JavaScript language , so the first edition advocates using the second method to define functions. There is a separate article about function declaration in advance

But the first definition method makes it very intuitive to see that add is a variable pointing to a function instance. .

Since it is a variable, it can be assigned to other variables, passed as a parameter in the function, or returned from the function.

So var add2=add3=add; Now three The variables all point to the reference of this instance. Now add=null; in the future, the two functions add2 and add3 can be used without being affected, because add points to the reference of null after removing the reference of the function object. Therefore, add2 and add3 are not affected at all. Two functions.

So the function can be passed in as a parameter of other functions.

So the function can be returned as the return value of the function.

Because the function name is just a pointer to the function Variables of instances, so functions in JavaScript will not be overloaded, because the same variables point to the same reference address. In the end, they still represent the same function.

Since the function is an instance of the object, it should If there are properties, there should be methods. So functions in JavaScript have properties and methods.

The four more important properties arguments, this, length, prototype

arguments represent the parameter class of the current function Array, this attribute is very special. It also has an attribute called callee.

arguments.callee attribute saves a pointer, which points to the function entity with this arguments attribute (which is equivalent to the function name)

This attribute is the current environment, similar to this in C#, indicating the current context.

The length attribute indicates the maximum number of parameters received by the current function.

prototype indicates the prototype of the function. That is to say, the methods of the object instance are completely saved. In other words, the methods on the prototype are inherited. For example, toString() valueOf(), etc.

Next, let’s take a look. Function function types

Ordinary functions: Introducing the characteristics of ordinary functions: overwriting with the same name, arguments objects, default return values, etc.

function ShowName(name) {
 alert(name);
}

Anonymous function: Introducing the characteristics of anonymous functions: variable anonymous functions, nameless anonymous functions.

//变量匿名函数，左侧可以为变量、事件等
var anonymousNormal = function (p1, p2) {
 alert(p1+p2);
}
anonymousNormal(3,6);//输出9

Closure function: Introduce the characteristics of closure function.

function funA() {
 var i = 0;
 function funB() { //闭包函数funB
  i++;
  alert(i)
 }
 return funB;
}
var allShowA = funA(); //全局变量引用：累加输出1,2,3,4等
 
function partShowA() {
 var showa = funA();//局部变量引用：只输出1
 showa();
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement paging query in Bootstrap4 Vue2

In webpack, there is the environment configuration of jquery plug-in (details Tutorial)

How to use keep-alive in vue2

How to implement gulp packaging using nodejs

The above is the detailed content of Detailed interpretation of Function function in javascript (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!