Javascript高级程序设计——10.函数Function类型

野性酷女 2022-07-14 06:29 193阅读 0赞

定义  
Function（函数）是一个对象  
  
  
1、函数声明  
（1）普通函数声明

function box(num1,num2){
    return num1+num2;
    }
    alert(box(1,2));

（2）使用变量初始化

var box=function(num1,num2){
    return num1+num2;
    };
    alert(box(1,2));

（3）使用function构造函数

var box=new Function('num1','num2','return num1+num2');
    alert(box(1,2));
    由于采用了new关键字，所以返回的也是对象，
    alert(typeof box);  //返回function

2、作为值的函数  
其函数名本身就是一个变量，即可以作为参数。  
也就是说，函数不仅可以作为参数传递（一个函数传递给另一个函数），同时也可以将一个函数作为     另一个函数的结果返回。  
  
  
首先，以一个普通的案例导入，

function box(sum,num){
    return sum+num;
    }
    function sum(num){
    return num+10;
    }
    
    
    var result=box(sum(10),10);    //20,10——sum(10)这里传递的是函数的返回值，即和普通的变量一样，
    alert(result);

注意：上述案例中，sum不是作为函数传递的，而是作为函数的返回值进行传递的。  
  
  
  
  
由于要把函数本身作为参数传递，而不是函数的结果

function box(sum,num){
    	return sum(num);
    }
    
    
    function sum(num){
    	return num+10;
    }
    
    var result=box(sum,10);   //这里的sum是一个函数；
    alert(result);

解析：  
（1）var result=box(sum(10),10);   //sum(10)作为的是一个函数的返回值  
（2）var result=box(sum,10);       //sum作为一个函数传入。  
  
  
  
  
（2）函数的阶乘（递归）  
a、简单的函数递归

function sum(num){
    	if(num<=1){
    		return 1;
    	}
    	else{
    		return num*sum(num-1);  //4*3*2*1的阶乘
    	}
    }
    
    alert(box(4));

注意：对于阶乘函数一般要用到递归算法，所以函数内部一定会调用自身；如果函数名不改变，是不     会有问题的。但是，一旦改变函数名，内部的自身调用就需要逐一进行改变。  
为了解决该问题，我们用到argument.callee代替函数名。  
  
  
  
  
b、arguments.callee代替函数自身

function box(num){
    	if(num<=1){
    		return 1;
    	}
    	else{
    		return num*arguments.callee(num-1);//使用callee来代替自身，来使用递归；
    	}
    }

c、函数内部的this对象  
window是一个对象，是JS中的最大的对象，即最外围的对象。  
window表示的是一个全局变量。  
“window==this”  
//alert(typeof window);   //object;

alert(this);  //this目前表示的就是window，由于在window范围下；
    alert(typeof this);   //object,由于其等价于window；

（1）“window==this”

window.color='红的';
    alert(this.color);  //红的

（2）this指定全局变量、局部变量  
案例1：

window.color='红的';
    
    
    var box={
    	color:'蓝的';
    	sayColor:function(){
    		alert(this.color);
    	};
    };
    alert(this.color);   //window下的红的
    box.sayColor();   //box下的蓝的

第一个this.color表示的是一个window下的全局变量‘红的’；  
第二个this.color表示的是一个box下的局部变量‘蓝的’。  
  
  
案例2：

window.color='红的';
    function sayColor(){
    	alert(this.color);   //表示的是在window下的
    }
    
    
    var box={
    	color:'蓝的';
    };
    box.sayColor=sayColor;   //耦合；
    box.sayColor();    //蓝的，相对于box对象而言

3、函数=属性+方法  
（1）属性

function box(name,age){
    	return name+age;
    }
    alert(box.length);   //2

在这里，box.length相当于box函数下的属性长度  
  
  
（2）方法——apply()、call()  
相同点：这两个方法都可以冒充函数进行传递  
不同点：apply()传递的是数组，call()传递的可以是单独的参数  
a、apply()

b、call()

function box(num1,num2){
    	return num1+num2;
    }
    
    
    function sum1(num1,num2){
    	return box.call(this,num1,num2);  //num1,num2可以单独的做为参数传递；
    }
    
    alert(box(10,10));
    alert(sum1(10,10));

c、apply和call作用域  
以这两种方法扩充作用域好处在于，对象不需要与任何方法发生耦合关系，即相关联，连锁反应，  
box对象与sayColor()方法不会有多余关联操作，box.sayColor=sayColor;

var color='红的';
    var box={
    color:'蓝的';
    };
    function sayColor(){
     alert(this.color);
    }
    
    
    sayColor.call(this);  //window;
    sayColor.call(window);  //window；
    sayColor.call(box);  //冒充box