欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js函数的那些事(一)

程序员文章站 2022-05-04 19:45:15
...

文章融合了《JavaScript高级程序设计》的知识,和这几天在segmentfault上的文章的知识点。属于整合类文章吧。

  • 函数简介

  • 函数声明和函数表达式

  • this和argument

  • 闭包

函数简介

  1. 函数实际上是对象,所以函数名实际上是指向函数对象的指针,那么一个函数可能有多个名字。

function sum(num1,num2){
    retrun num1+num2;
}
alert(sum(10,10));  //20

var anotherSum=sum;  //将sum的值赋给了anotherSum,此时它们都指向同一个函数。
alert(anotherSum(10,10));  //20

sum=null;    //将sum设置为null,使它与函数“断绝关系”
alert(anotherSum(10,10));  //20 ,仍然可以正常调用。
  1. 没有重载
    函数重载:函数重载是指在同一作用域内,可以有一组具有相同函数名,不同参数列表的函数,这组函数被称为重载函数。js没有重载的概念,所以如果声明了两个同名函数,则后面的函数会覆盖前面的函数。

  2. 作为值得函数
    函数名本身是变量,所以可以作为值来使用。不仅可以像传递参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回。

    //把一个函数传递给另一个函数的例子
    function callFunction(someFunction,someArgument){
        return someFuction(someArgument);
    }
    function add10(num){
        return num+10;
    }
    var result=callFunction(add10,10);  //要访问函数的指针而不执行函数的     
    话,要去掉函数名后的圆括号。
    alert(result);  //20

函数声明和函数表达式

定义函数方法:

首先是函数声明: function functionName(){}必须有函数名。
然后是函数表达式,比如:

 var sum = function(num1,num2){
        retrun num1+num2;
    };                      //函数末尾有分号,就像声明其他变量时一样。

不一定有函数名,所以有匿名函数表达式和命名函数表达式。不过,对函数命名后,一是在函数体内会表达得更清晰,二则是在调试的时候要方便很多。

区别:
函数声明可以在定义前调用(函数声明提升),函数表达式不可以(和其他表达式一样,使用前必须要赋值)。
函数声明只是让浏览器知道有这样一个函数了,不会运行。浏览器遇到函数表达式会运行。
如果不做函数声明的话,一般就不希望被重复调用,即很大可能就当做立即执行函数使用。
如果函数体作为表达式的一部分,那它是函数表达式,否则为函数声明。

this和arguments

在函数内部有两个特殊的对象:arguments和this。
arguments是一个类数组对象,包含传入函数的所有参数。主要作用就是保存函数参数。
arguments有一个callee属性,该属性是一个指针,指向拥有arguments对象的函数。
例子:

function factorial(num){
    if(num<=1){
      return 1;
    }else{
      return num*factorial(num-1);
    }
}

在函数factorial中调用了他本身,但是如果要是将函数赋值给别的变量,那就不能正常运行了。如果是下面的代码:

 function factorial(num){
        if(num<=1){
          return 1;
        }else{
          return num*arguments.callee(num-1);
        }
    }

这样,不管调用函数时使用什么名字,都可以保证正常完成递归调用。
this:
this引用的是函数据以执行的环境对象。

  1. 函数调用模式时,this指向window。

  2. 方法调用模式时,this指向方法所在对象。

wiondow.color="red";
var o={color:"blue"};
function sayColor(){
     alert(this.color);
}
sayColor();    //"red" 
o.sayColor=sayColor;
o.saColor();   //"blue"
  1. 构造函数模式时,this指向新生成的实例。

    function Aaa(name){
      this.name= name;
      this.getName=function(){
        console.log(this.name)
      }
    }
    var a = new Aaa('kitty');
    a.getName()        //  'kitty'
    var b = new Aaa('bobo');
    b.getName()        //  'bobo'
  1. apply/call调用模式时,this指向apply/call方法中的第一个参数。

       var list1 = {name:'andy'}
       var list2 = {name:'peter'}
       
       function d(){
         console.log(this.name)
       }
       d.call(list1)     //  'andy' 
       d.call(list2)     //  'peter'
      
    

闭包

概念:是指有权访问另一个函数作用域中变量的函数。
创建闭包方法:在一个函数内部创建另一个函数。

特征:

  1. 可以访问外部函数的变量。

  2. 比较占内存。因为闭包会携带包含他的函数的作用域,在闭包被销毁后外部函数的活动变量才会被销毁。
    (ps:关于活动变量知乎上这个问题的第二个答案写的非常非常好!)

  3. 闭包只能取得外部函数中任何变量的最后一个值。所以要注意闭包和循环的使用:

       function foo(){
       var result=new Array();
       for (var i=0;i<10;i++){
           result[i]=function(){
               return i;
           };
       }
       return result;

    }
    返回了一个函数数组,每个函数都返回10。因为运行foo()函数的顺序是这样的:先运行foo()函数除了匿名函数之外的部分,完成后,再运行匿名函数。这时候for循环已经完成了,i变成了10。匿名函数引用foo()函数作用域内的活动变量i时,i已经等于10了,所以每个函数返回的都是10。

改进:

function foo(){
        var result=new Array();
        for (var i=0;i<10;i++){
            result[i]=function(num){
                return function(){
                  return num;
                };
            }(i);
        }
        return result;
    }

模仿块级作用域的方法。在调用外部的匿名函数时,传入参数i,变量i的值赋给num,在外部匿名函数内部的闭包,访问的是numresult数组的每个函数都有自己num变量的一个副本,就可以返回各自不同的值