An in depth analysis of Function types in JavaScript

Function is the most commonly used concept in javascript, and function in javascript is the easiest function to start with, but it is also the most difficult concept to understand and master in javascript.

1. The Function type is one of the reference types in js, and each function is actually an instance object of the Function type, with its own properties and methods. Because of functional objects, the function name is actually a pointer to the function object.

2. Commonly used ways to define functions

1. Function declaration:

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

2. Expression:

var sum = function(){
return a+b; 
}; // Notice the semicolon 
 　 // The difference between the two ways: 
 　 // The interpreter reads the function declaration first and makes it accessible before execution, while the usage expression must wait until the parser executes to its line of code before it is actually interpreted. (Variable declarations are advanced and values are left in place.) 
alert (sum (10 ,10));
function sum(a ,b){
  　  　  return a+b;
}
// The above code executes normally because the parser promotes, reads, and adds the function declaration to the execution environment at the top of the code tree before the code executes 
alert (typeof sum);
alert(sum(10 , 10));
var sum = function (a ,b){
  　  　  return a+b;
}
// ↑ reports an error because the function is located in the 1 Of the initialization statements, the 1 Function declaration, will not be advanced, but will only put var sum In advance, use typeof Operator display sum Yes undefined , so report an error 

3. Function names only hold pointers to function objects, so function names are no different from other variables that contain pointers to objects, that is, a function object can have multiple names:

function sum(a , b ){
return a+b;
}
console.log(sum(2 ,3)); //5
var anotherSum = sum; // Variable anotherSum It also points to the same 1 Function objects 
console.log(anotherSum(4 , 5)); //9
sum = null; //sum Variables no longer hold pointers to function objects 
console.log(anotherSum(1 , 3)); //anotherSum This variable can still call 

4. Why JS doesn't have the concept of overloading.

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 after 1 Before function coverage 1 Therefore, it cannot be overloaded 

5. Internal properties of the function: Inside the function, there are two special objects, arguments and this

1. arguments:

arguments is a class array object that contains all the arguments passed in to the function. The object has a property called callee, and the value of the property is a pointer to the function itself that owns the arguments object

function foo (){
var a =arguments.callee; 
return a.toString();
}
foo();
/*
 Return results: 
 　　 "function sum(){
 　　 var a =arguments.callee; 
 　　 return a.toString();
 　　 }"
 That is to say, 1 Inside the function, arguments.callee It refers to the function itself. This function is useful when calling recursively, and has many defects. ES5 Strict mode removed 
*/

2. this: Simply put, this refers to the environment object in which the function is executed, and this refers to the object in which it is executed. It is more complicated to expand, and one article is opened separately

//TODO:

3. ES5 specifies another function attribute: caller, which 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: Indicates the number of arguments the function wants to accept

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

5. The famous prototype property is simply an object created by calling the constructor and contains properties and methods that can be shared by all instances of a specific type. It is more complicated to expand, and one article is opened separately

//TODO:

6. The two methods of the function, call () and apply (), are used to call the function in a specific scope, which is actually to set the this value inside the function

1. call (): Similar to the apply () method, the difference is that the parameters are received in a different way, and the parameters must be listed one by one.

2. apply (): Accepts two parameters, one is the scope of the function to run, and the other is an array of parameters, which can be an array or an array object like arguments

function sum(a , b){
return a+b;
}
function callSum(a , b){
return sum.apply(this , arguments);
}// No. 1 2 The parameters are 1 Class array object arguments
function callSum1(a , b){
return sum.apply(this, [a , b]);
} // No. 1 2 The parameters are 1 Array of numbers 
console.log(callSum(2 , 3)); //5 
console.log(callSum1(3 ,5)); //8

3. Passing arguments and calling the function is not the place for call () and apply (). The real strength of the two is to extend the scope in which the function runs

var color = 'red';
var obj = {
color :'blue' 
}
function foo(){
console.log(this.color); 
}
foo(); //'red'
foo.call(this);//'red'
foo.call(obj); //'blue'
// Finally 1 Secondary call foo() The execution environment of the function has changed, in which the this Points to obj Object, so it is 'blue'

The biggest benefit of using call () and apply () to extend scope is decoupling objects from methods

4. ES5 defines a new method, bind (), which returns a function in which the this value is bound to the value passed to the bind () function

var x = 9; 
var module = {
x: 81,
getX: function() { return this.x; }
};
module.getX(); // 81
var retrieveX = module.getX;
retrieveX(); // 9,  Because in this case , "this"  Point to global variables 
var boundGetX = retrieveX.bind(module);// Put retrieveX() Function in the this Forever with module Bind, and then call this function is always in the module Object to run in the 
boundGetX(); // 81

The above is the site to introduce you in-depth analysis of JavaScript Function type introduction, I hope to help you, if you want to know more content, please pay attention to this site.