JavaScript中的Function类型总结

http://blog.csdn.net/bboyjoe/article/details/51531254

创建函数对象：

[javascript] view plain copy

 

1. //函数声明  
2. function sum(num1,num2){  
3.     return num1+num2;  
4. };  
5. //函数表达式  
6. var sum=function(num1,num2){  
7.     return num1+num2;  
8. };  
9. //使用Function构造函数(不推荐)  
10. var sum=new Function("num1","num2","return num1+num2");  

1）没有重载：

[javascript] view plain copy

 

1. var addSomeNumber=function(num){  
2.     return num+100;  
3. };  
4. addSomeNumber=function(num1,num2){  
5.     return num1+200;  
6. }  
7. var result=addSomeNumber(100);  
8. console.log(result);//=>300  

2）作为值的参数

2.1）像传递参数一样把一个函数传递给另一个函数

[javascript] view plain copy

 

1. function callSomeFunction(someFunction,someArgument){  
2.     return someFunction(someArgument);  
3. };  
4. function add10(num){  
5.     return num+10;  
6. };  
7. var result1=callSomeFunction(add10,10);  
8. console.log(result1);//=>20  
9. function getGreeting(name){  
10.     return "Hello, "+name;  
11. }  
12. var result2=callSomeFunction(getGreeting,"Jason");  
13. console.log(result2);//=>Hello, Jason  

2.2）将一个函数作为另一个函数的结果返回

[javascript] view plain copy

 

1. function createComparisonFunction(propertyName){  
2.     return function(object1,object2){  
3.         var value1=object1[propertyName];  
4.         var value2=object2[propertyName];  
5.         if(value1<value2){  
6.             return -1;  
7.         }else if(value1>value2){  
8.             return 1;  
9.         }else{  
10.             return 0;  
11.         }  
12.     };  
13. };  
14. var data=[{name:'Jason',age:28},{name:"Alex",age:29}];  
15. data.sort(createComparisonFunction("name"));  
16. console.log(data[0].name);//=>Alex  
17. data.sort(createComparisonFunction("age"));  
18. console.log(data[0].name);//=>Jason  

3）函数内部属性

3.1）arguments：保存函数参数的类数组对象

arguments.callee：是一个指针，指向拥有这个arguments对象的函数

[javascript] view plain copy

 

1. function factorial(num){  
2.     if(num<=1){  
3.         return 1;  
4.     }else{  
5.         //利用arguments.callee指向本函数来消除紧密耦合  
6.         return num*arguments.callee(num-1);  
7.     }  
8. };  

3.2)this对象：引用的是函数据以执行的环境对象

[javascript] view plain copy

 

1. window.color="red";  
2. var o={color:"blue"};  
3. function sayColor(){  
4.     console.log(this.color);  
5. }  
6. sayColor();//=>red  
7. o.sayColor=sayColor;  
8. o.sayColor();//=>blue  

3.3）caller属性：保存着调用当前函数的函数的引用

[javascript] view plain copy

 

1. function outer(){  
2.     inner();  
3. };  
4. function inner(){  
5.     console.log(arguments.callee.caller);  
6. };  
7. outer();//=>function outer(){inner();}  

4）函数属性和方法

4.1）length属性：表示函数希望接收的命名参数的个数

[javascript] view plain copy

 

1. function sayName(name){  
2.     return name;  
3. };  
4. function sum(num1,num2){  
5.     return num1+num2;  
6. };  
7. function sayHi(){  
8.     return "hi";  
9. };  
10. console.log(sayName.length);//=>1  
11. console.log(sum.length);//=>2  
12. console.log(sayHi.length);//=>0  

4.2）apply()、call():在特定的作用域中调用函数，实际上等于设置函数体内this对象的值。

apply()：接收两个参数：一个是在其中运行函数的作用域，另一个参数数组。

call():与apply()方法的作用相同，区别在于接收参数的方式不同。

[javascript] view plain copy

 

1. function sum(num1,num2){  
2.     return num1+num2;  
3. }  
4. function callSum1(num1,num2){  
5.     return sum.apply(this,arguments);//传入arguments对象  
6. }  
7. function callSum2(num1,num2){  
8.     return sum.apply(this,[num1,num2]);//传入数组  
9. }  
10. function callSum3(num1,num2){  
11.     return sum.call(this,num1,num2);//call()接收参数的方式不同  
12. }  
13. console.log(callSum1(10,10));//=>20  
14. console.log(callSum2(10,20));//=>30  
15. console.log(callSum2(20,20));//=>40  

[javascript] view plain copy

 

1. //利用apply()、call()扩充函数赖以运行的作用域  
2. window.color="red";  
3. var o={color:"blue"};  
4. function sayColor(){  
5.     console.log(this.color);  
6. }  
7. sayColor.call(this);//=>red  
8. sayColor.call(window);//=>red  
9. sayColor.call(o);//=>blue  

4.3）bind():会创建一个函数的实例，其this值会被绑定到传给bind()函数的值。IE9+

[javascript] view plain copy

 

1. window.color="red";  
2. var o={color:"blue"};  
3. function sayColor(){  
4.     console.log(this.color);  
5. }  
6. var objectSayColor=sayColor.bind(o);  
7. objectSayColor();//=>blue