在前面我们已经对函数作了简单的介绍，比如函数的定义、函数的声明、函数的调用和函数的传参等。本节将进一步介绍函数的应用，深度理解函数的各种使用。

函数是一个对象，每个函数时Function类型的一个实例，与其他引用类型一样有属性和方法。由于函数时对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。函数通常是函数声明语法定义的。

  1. function sum(x,y){
  2.                     return x+y;
  3.                 }

上面使用函数声明语法定义的。

  1. var sum=function(a,b){
  2.                     return a+b;
  3.                 }；

上面使用函数表达式声明了一个函数。定义了变量sum，并将其初始化为一个函数。在使用函数表达式定义函数时，没有必要使用函数名。通过变量sum可以引用函数，另外函数的末尾有个分号，与普通的变量定义一样。

另外可以使用Function构造函数来定义函数。Function构造函数可以定义任何数量的参数，最后一个函数被看成是函数体。

  1. var sum= new Function("a","b","return a+b");
  1. function sum(a,b){
  2.                     return a+b;
  3.                 }
  4.                 var anotherSum=sum;
  5.                 console.log(sum(1,2));
  6.                 sum=null;
  7.                 console.log(anotherSum(2,3));

上面定义了函数sum，用于求两个数之和。定义了变量anotherSum，并将sum赋值给anthorSum。这样anotherSum与sum指向了同一个指针。最后调用的时候，即使将sum=null，依然可以调用anotherSum。

  1. var sum=function(a,b){
  2.                     return a+b;
  3.                 }
  4.                 sum=function(a,b){
  5.                     return a*b;
  6.                 }
  7.                 console.log(sum(2,4));//输出8

上面的代码可以清楚地看出函数时没有重载的。后定义的sum将前面的sum覆盖。

JavaScript解析器在执行环境时，对于函数声明和函数表达式定义的函数并不是一视同仁的。解析器会先调用函数的声明，在执行其他代码之前可用。函数表达式，只有当函数执行到当前行，才会被解释执行。

  1. console.log(sum(2,3));//输出5
  2.                 function sum(a,b){
  3.                     return a+b;
  4.                 }
  5.                 console.log(subtract(2,3));//报错，subtract is not function
  6.                 var subtract=function(a,b){
  7.                     return a*b;
  8.                 }

上面的代码可以看出区别。函数的声明在调用前已经添加到执行环境中，会将函数声明添加到顶部环境中。而通过函数表达式定义的函数，在声明变量前，就调用会发生错误。经过上面的比较，不管是函数声明，还是函数表达式，我们都要养成先定义，再使用的习惯。

JavaScript函数本身就是变量，所以函数可以作为值来使用。函数不仅可以作为参数来传递，而且可以将函数作为另一个函数的结果返回。

  1. function callFunction(func,num){
  2. 					return func(num);
  3. 				}
  4. 				function sum(num){
  5. 					return num+10;
  6. 				}
  7. 				console.log(callFunction(sum,10));

　　上面的代码就是将函数作为另一个函数的结果返回，输出20.

函数内部包含一个子函数，并且返回子函数，这就是所谓的函数闭包。闭包的好处就是可以缓存数据。

  1. function closeTest(){
  2.                     var n=1;
  3.                     Add=function(){
  4.                         n=n+1;
  5.                     }
  6.                     return function F(){
  7.                         return n+1;
  8.                     }
  9.                 }
  10.                 var result = closeTest();
  11.                 console.log(result());
  12.                 Add();
  13.                 console.log(result());

上面的代码就是一个闭包函数。在闭包函数内部可以使用函数的内部变量。第一个调用result，返回2.第二次调用result输出3，因为前面已经调用了add方法，将n+1，所以最好输出的结果是3.

  1. var name = "The Window";
  2.             　　var object = {
  3.             　　　　name : "My Object",
  4.             　　　　getNameFunc : function(){
  5.             　　　　　　return function(){
  6.             　　　　　　　　return this.name;
  7.             　　　　　　};
  8.             　　　　}
  9.             　　};
  10.             var  result=object.getNameFunc();
  11.             　　console.log(result());//undefined,this的指向是window

通过上面的代码可以看清楚，调用result方法的时候，this指向了window，this.name为undefined

  1. var name = "The Window";
  2.             　　var object = {
  3.             　　　　name : "My Object",
  4.             　　　　getNameFunc : function(){
  5.             　　　　　　return function(){
  6.             　　　　　　　　return this.name;
  7.             　　　　　　}.bind(this);
  8.             　　　　}
  9.             　　};
  10.             var  result=object.getNameFunc();
  11.             　　console.log(result());//My Object

这个代码我们加了bind方法，bind函数用于改变this的指向。this.name指向的是object对象，所以result有输出值。bind函数并不会立即执行，当调用该函数的时候才会执行，同时bind函数可以给函数绑定参数。

  1. var substract=function(a,b){
  2.                 return a*b;
  3.             };
  4.                 var sum=function(a,b){
  5.                     var that=this;
  6.                     console.log(that);
  7.                     return a+b;
  8.                 }.bind(substract,3,4);
  9.                 console.log(sum(1,2));//输出7

上面的代码使用bind函数改变了sum函数的this指向，this指向了substract函数，同时为sum添加了两个参数3,4.虽然我在调用的时候又传递了参数1,2,但是我们bind的参数值是在前面的，所有输出7.arguments[2]=1,arguments[3]=2。传递的参数通过arguments依然可以访问到。

函数还有两个常用的方法apply和call。apply和call两个方法的效果是改变函数的指向，并能传递参数，但是立即执行。apply第一个参数是对象，用于改变函数的this指向；第二个参数是数组，是传递给函数的值。call的第一个参数与apply一样，但是call的第二个参数不是数组，与bind类似，参数是一个一个传递的。

  1. function sayHello(str){
  2.                     console.log(str);
  3.                 }
  4.                 sayHello.bind(this,"bind");
  5.                 sayHello.call(this,"call");
  6.                 sayHello.apply(this,["apply"]);

上面的代码，我们比较了函数的bind、call和apply方法的不同。最后我们看输出的值为 call apply。但是bind并没有输出，所以说bind并不能让函数立即调用。函数调用bind方法之后，函数依然是一个函数。

sayHello.bind(this,”bind”)();这个代码会输出“bind”

apply方法和call方法还可以在函数内部进行调用，并能改变this的指向。

  1. function Super(){
  2.                     this.a="10";
  3.                 }
  4.                 function Sub(){
  5.                     Super.call(this);
  6.                     this.b="20";
  7.                 }
  8.                 var sub = new Sub();
  9.                 console.log(sub.a);
  10.                 console.log(sub.b);

上面的代码有点面向对象继承的意思。通过在sub内部调用super的call方法，让sub也拥有了super的属性。最后的输出结果是 10 20。

函数还拥有一些属性可以使用。如果让我们写一个阶乘函数，大多数人都会这样写：

  1. function factorial(n){
  2.                     if(n<1){
  3.                         return 1;
  4.                     }
  5.                     else{
  6.                         return n*factorial(n-1);
  7.                     }
  8.                 }

阶乘算法会用到函数的递归，上面的方法将函数名在函数内部再次调用，增加了函数的耦合。我们可以使用函数的属性callee来解耦。callee是函数的属性，它是一个指针，指向拥有这个函数名的函数。

上面的代码我们可以使用arguments.callee替换函数。

  1. function factorial(n){
  2.                     if(n<1){
  3.                         return 1;
  4.                     }
  5.                     else{
  6.                         return n*arguments.callee(n-1);
  7.                     }
  8.                 }
  9.                 console.log(factorial(10));//3628800

 闭包可以减少全局变量的使用。

  1. (function() {
  2.                 
  3.                     window.oEvent=window.oEvent||{};
  4.                     var addEvent = function() { /*代码的实现省略了*/ };
  6.                     function removeEvent() {}
  8.                     oEvent.addEvent = addEvent;
  9.                     oEvent.removeEvent = removeEvent;
  10.                 })(window);
  11.                 console.log(oEvent.addEvent());

上面的代码只定义了一个全局变量

版权声明：本文为ggz19原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/ggz19/p/8182630.html