In-depth analysis of Function type in JavaScript, javascriptfunction

In-depth analysis of Function type in JavaScript, javascriptfunction

Function is the most common concept in javascript. function in javascript is the easiest Function to start with, but it is also the most difficult concept to understand in javascript.

1. The Function type is one of the reference types in js. Each Function is actually an Instance Object of the Function type and has its own attributes and methods. Because function objects, function names are actually pointers to function objects.

2. Common Function Definition Methods

1. function declaration:

function sum(a , b ){return a+b;}

2. expression:

Var sum = function () {return a + B ;}; // note the difference between the semicolon // method: // The interpreter will read the function declaration first, and make it accessible before execution, and the use of expressions must wait until the parser executes to its line of code to be truly interpreted for execution (variable declaration in advance, while the value stays in the same place) alert (sum (10, 10); function sum (a, B) {return a + B;} // The code above the condition will be executed normally, before the code is executed, the parser uses the function declaration to escalate the code, read and add the function declaration to the execution environment, and place it in alert (typeof sum) at the top of the code tree ); alert (sum (10, 10); var sum = function (a, B) {return a + B;} // returns an error because the function is in an initialization statement, instead of being declared as a function, var sum is not mentioned in advance. The typeof operator is used to show that sum is undefined. Therefore, an error is returned.

3. The function name only saves the pointer to the function object. Therefore, the function name is no different from other variables containing the Object Pointer. That is to say, a function object can have multiple names:

Function sum (a, B) {return a + B;} console. log (sum (2, 3); // 5var anotherSum = sum; // The variable anotherSum also points to the same function object console. log (anotherSum (4, 5); // 9sum = null; // The sum variable no longer saves the console pointer of the function object. log (anotherSum (1, 3); // The anotherSum variable can still be called.

4. Why is JS not overloaded.

Function add (a) {return a + 3;} function add (a) {return a + 5;} var result = add (3 ); // 8 // the two functions have the same name, and the result can only be that the last function overwrites the previous one, so you cannot reload

5. Internal properties of the function: the function contains two special objects: arguments and this

1. arguments:

Arguments is a class array object that contains all the parameters of the input function. This object has a property called callee. The property value is a pointer pointing to the function that owns this arguments object.

Function foo () {var a = arguments. callee; return. toString () ;}foo ();/* return result: "function sum () {var a = arguments. callee; return. toString ();} "that is, inside a function, arguments. callee refers to the function itself. This function is used for recursive calling and has many drawbacks. It is removed in ES5 strict mode */

2. this: In simple terms, this refers to the environment object for function execution. this refers to the object in which the function is executed. Expansion is complicated.

// TODO:

3. ES5 standardizes another function attribute: caller. This function attribute refers to the function that calls the current function.

function inner(){console.log(inner.caller);} function outer(){inner();}outer(); //function outer(){inner();}

4. length attribute: number of parameters that the function wants to accept

function add(a ,b ,c){return a+b+c;}add.length; //3

5. The famous prototype attribute, in simple terms, is an object created by calling constructor, including the attributes and methods that can be shared by all instances of a specific type. Expansion is complicated.

// TODO:

6. two functions: call () and apply () are used to call a function in a specific scope. In fact, they are used to set the this value inside the function.

1. call (): similar to the apply () method, the difference is different in the method of receiving parameters. parameters must be listed one by one.

2. apply (): receives two parameters. One is the function running scope, and the other is the parameter array, which can be an array or an array object of the arguments class.

Function sum (a, B) {return a + B;} function callSum (a, B) {return sum. apply (this, arguments);} // The second parameter is an array class Object argumentsfunction callSum1 (a, B) {return sum. apply (this, [a, B]);} // The second parameter is an array console. log (callSum (2, 3); // 5 console. log (callSum1 (3, 5); // 8

3. Passing parameters and calling functions are not the application of call () and apply (). What is really powerful about the two is to expand the scope of function operation.

Var color = 'red'; var obj = {color: 'blue'} function foo () {console. log (this. color);} foo (); // 'red' foo. call (this); // 'red' foo. call (obj); // 'Blue '// The execution environment of the last call to the foo () function has changed. this indicates the obj object, so it is 'Blue'

The biggest benefit of using call () and apply () to expand the scope is to decouple objects and methods.

4. ES5 defines a new method: bind () and returns a function. In this function, the value of this will be bound to the value passed to the bind () function.

Var x = 9; var module = {x: 81, getX: function () {return this. x ;}}; module. getX (); // 81var retrieveX = module. getX; retrieveX (); // 9, because in this case, "this" points to the global variable var boundGetX = retrieveX. bind (module); // bind this in the retrieveX () function to the module forever, and then call this function to always run boundGetX () in the module object; // 81

The above is an in-depth analysis of the Function types in JavaScript provided by the mini-editor. I hope it will be helpful to you. If you want to learn more, please stay tuned to the help house.