js读书笔记(Function类型)

JavaScript高级程序设计(第3版)P110


 

Function 类型

   
1.函数概念的两种方法:
    
                            

    1.函数扬言定义函数:(具有阐明提升的功力,提议采用)

1 function sum (num1, num2) {
2        return num1 + num2;
3 }

     2.函数表明式定义:

1 var sum = function(num1, num2){
2             return num1 + num2;
3           };//这里有分号,就跟一般变量声明一样 var a = "abv";

   3.施用函数的构造函数定义函数:(不引进应用,可是对于了解函数也是目标很好明白)

1 var sum = new function("num1", "num2", "return num1 + num2"); //构造函数的最后一个参数被看做是函数体,前面的都是参数

 

 

    2.js中没有函数重载:  
                                    
 
    出现重名函数的话,后者覆盖前者.为何js中函数没有重载,因为js中函数的参数可以不指定个数,参数是一个数组对象arguments,利用这一个arguments数组就可以直接的落实重载,比如:

 1 !function sum(){
 2       if(arguments.length==2){
 3             console.log(arguments[0] + arguments[1]);
 4       }
 5       if(arguments.length==3){
 6             console.log(arguments[0] + arguments[1] + arguments[2]);
 7       }
 8 }(1,2);
 9  //上面这个函数就间接的实现了函数的重载,可以运算两个数的加法,也可以运算三个数的加法,当然也可以计算任意个数的加法
10  !function sum2(){
11       var result = 0;
12       for(var i = 0; i < arguments.length; i++){
13              result += arguments[i];
14       }
15       alert(result);
16  }(1,1,1,1,11,1);

   
3.函数看作值:           
                           

ECMAScript,    在js中,函数也是目的,函数名就是变量名,这么些变量名指向的是函数,也是指向函数的指针,可是有少数跟普通引用变量不同,普通引用变量访问对象自我的特性使用的是点操作符’.’或者方括号'[]’,而函数名访问函数本身使用的是圆括号'()'(我不知道这里讲的对不对,这里讲的走访函数本身而不是函数的性质,其实我是有点凌乱的)

 1 function sum(num1, num2){
 2     return num1 + num2;
 3 };
 4 !function GetResult(sum, x, y){
 5     console.log(sum(x, y));
 6 }(sum, 1, 3);
 7             //学过C#的委托应该会觉得有点眼熟,C#中的委托是将函数名声明作为一种类型,然后就可以作为参数传递了,就可以在也就是将函数名作为了参数.
 8 
 9 当然也可以从一个函数中返回另一个函数,而且这也是一种极为有用的技术,
10             
11  eg:function createCompareFunction(propertyName){
12         return function(obj1, obj2){//这里拿到的是两个对象
13               var val1 = obj1[propertyName];//获取对象对应的属性
14               var val2 = obj2[propertyName];
15                   if(val1 < val2){
16                        return -1;
17                   }else if(val1 > val2){
18                        return 1;
19                   }else{
20                        return 0;
21                   }
22          };
23    }
24 
25    var person1 = {
26             name : 'ZhangSan',
27             age : 23
28         };
29     var person2 = {
30             name :'LiSi',
31             age : 24
32        };
33     var person3 = {
34             name : 'WangWu',
35             age : 25
36         };
37     var persons = [person1, person2, person3];
38     persons.sort(createCompareFunction('name'));//将name属性作为排序的标准
39     alert(persons[0].name);//弹出LiSi,说明已经按照name排序了
40      //上面再sort里面传递的是createCompareFunction('name'),是一个具体的函数,
41      //之前在讲数组的时候传递的是一个函数名,是不带有括号的,而这里带括号是因为
42      //在createCompareFunction()函数里面返回的是一个函数,也就是相当于还是传递了一个函数进去了,
43 
44       我们将上面的比较函数改的复杂一点,主要根据名字排序,次要根据年龄排序(都升序)
45             function createCompareFunction(properTyName1, properTyName2){
46                 return function (obj1, obj2){
47                     if(obj11 )
48                     var main1 = obj1[properTyName1];
49                     var minor1 = obj1[properTyName2];
50                     var main2 = obj2[properTyName1];
51                     var minor2 = obj2[properTyName2];
52                     if(main1 < main2){
53                         return -1;
54                     }else if(main1 > main2){
55                         return 1;
56                     }else if(minor1 < minor2){
57                         return -1;
58                     }else if (minor1 > minor2) {
59                         return 1;
60                     }else{
61                         return 0;
62                     }
63                 };
64             }
65 
66             var person1 = {
67                 name : 'Z',
68                 age : 23
69             };
70             var person2 = {
71                 name :'Z',
72                 age : 21
73             };
74             var person3 = {
75                 name : 'A',
76                 age : 23
77             };
78             var persons = [person1, person2, person3];
79             showArray(persons);
80             function showArray(array){
81                 for (var i = 0; i < array.length; i++) {
82                     console.log('Name: ' + array[i].name + '; Age: ' + array[i].age)
83                 };
84             }
85             persons.sort(createCompareFunction('name','age'));//将name属性作为排序的标准
86             showArray(persons);
87             //但是有一点没考虑到,js中的数组是可以存储任意类型的,我们无法保证persons数组里面全是person,如果存在非person类型,那么排序就得不到想要的结果.

   
 4.函数里边属性:                             
           

    函数内部有六个独特的对象:arguments和this.
      arguments是参数数组,this指代的是当前函数运行的环境目的,也就是功能域.arguments这个目的有一个
callee属性,该属性是一个指针,它指向拥有那些arguments对象的函数,这些参数就跟函数名是等价的,函数名也是一个指南针,也是指向函数本身,只但是那一个指针在函数内部
    看下面这么些经典的求阶乘的递归:

 1                function factorial(num){
 2                     if(num <= 1){
 3                         return 1;
 4                     }else {
 5                         return num * factorial(num - 1);
 6                     }
 7                 }
 8                 var result = factorial(5);
 9                 console.log(result);//打印120
10 
11                 //上面的递归调用使得求阶乘这个功能和这个函数名绑定在一起了,
12                 //我们可以利用callee这个内部指针,进行解耦,将功能和函数名解耦
13                 function factorial(num){
14                     if(num <= 1){
15                         return 1;
16                     }else {
17                         return num * arguments.callee(num - 1);
18                     }
19                 }
20                 var otherFun = factorial;
21                 factorial = function(){//这里重新定义了factorial函数
22                     return 0;
23                 }
24                 var result = otherFun(5);
25                 var result2 = factorial(5);
26                 console.log(result);//打印120
27                 console.log(result2);//打印0
28             关于this,this引用的是函数据以执行的环境对象,或者也可说是this的值
29             (当在全局环境下使用this时,this对象的引用就是windows对象)
30             下面例子:
31                 window.color = 'red';
32                 var obj = {
33                     color : 'blue'
34                 };
35                 function sayColor(){
36                     console.log(this.color);
37                 }
38                 sayColor();
39                 obj.sayColor = sayColor;//标记
40                 obj.sayColor();
41 
42                 上面的代码标记的地方,是将函数对象赋值给了o对象的sayColor属性
43                 上面代码等价于下面:
44                 window.color = 'red';
45                 function sayColor(){
46                     console.log(this.color);
47                 }
48                 var obj = {
49                     color : 'blue',
50                     objSayColor : sayColor//将函数名赋值给对象o的一个属性,这里是为了避免重名,才改成了objSayColor
51                 };
52                 sayColor();
53                 obj.objSayColor();//调用obj的的属性objSayColor指向的函数
54 
55                 我为什么不像下面这样做呢?
56                 window.color = 'red';
57                 var obj = {
58                     color : 'blue',
59                     sayColor : function /*sayColor*/(){//这里的sayColor可以有也可以没有
60                                     console.log(this.color);
61                                }
62                 };
63                 function sayColor(){
64                     console.log(this.color);
65                 }
66                 sayColor();
67                 obj.sayColor();
68 
69                 那是因为 obj.sayColor = sayColor;这句话是将sayColor变量指向的函数赋值给了obj的sayColor属性
70                 最终sayColor();
71                    obj.sayColor();这两行代码调用的是同一个函数,而不是两个相同的函数,也就是说,内存中只存在一个sayColor()函数,
72                     而向上面这样做的话,就制造出两个功能相同的sayColor()函数了,这样不是等价的.所以我没有这样做.
73                 //我的这句话也是对115页作者强调标记的理解.
74             函数还有一个特殊的对象属性:caller,这个属性保存着调用当前函数的函数的引用,也就是主调函数的引用,可以说caller和主调函数的函数名指向的是同一个函数对象,既然是函数的引用,那么在全局作用域中调用该函数时,没有主调函数,那么caller的值就是null了.
75             eg:
76                 function outer(){
77                     inner();
78                 }
79                 function inner(){
80                     alert(inner.caller);
81                 }
82                 outer();
83 
84             当函数在严格模式下运行时,访问arguments.callee会导致错误,
85             严格模式下还有一个限制:不能为caller属性赋值,否则会导致错误,也就是说,caller属性是只读的,不可写.                    

   
 5.函数的习性和方法:                    
                           

    此前说过函数也是目的,既然是目的,那么就有性能和办法【其中措施自然有持续下去的
toString(),valueOf()方法】
      每个函数都饱含五个特性:length和prototype.其中length属性表示函数希望接受的命名参数的个数,

1             function sum(num1, num2){
2                 return sum1 + num2;
3             }
4             alert(sum.length);//弹出2
5             sum.length = 5;
6             alert(sum.length);//弹出2,说明length属性不可写,可读.

      prototype属性是一个相比重大的特性了,对于ECMAScript中的引用类型而言,prototype是保留它们具有实例方法的真的所在, 换句话说,诸如toString()和valueOf()等办法其实都是保存在prototype名下,只然而是通过个别对象实例访问罢了,在创制自定义引用类型以及贯彻连续时,prototype属性是极其首要的(在第六章将详细介绍,下一篇博客我就写第六章的情节), 在ECMAScript5中,prototype属性是不可枚举的,由此采纳for-in都没法儿察觉。
    每个函数都蕴含五个非继承而来的艺术:apply()和call()方法,那六个艺术的用处都是在特定的效率域调用该函数, 实际上等于设置函数体内的this对象的值.
      apply()函数接受六个参数:第一个是在内部运行函数的效能域,第二个参数是数组(或者是arguments对象),
      call()函数接收的参数:第一个同apply一样,是该函数运行的效能域,此外的参数都是都是一直传送给函数(就是将参数数组的顺序项都列举出来)
    这五个函数的功效一样,调用时就看参数是否确定,也就是说假诺传递给函数的是一个数组,那么apply()更契合,反之call()可能更适用,当然,你也可以将确定个数的参数放在数组里,然后利用apply()函数.
事实          
 上,传递参数并非apply()和call()真正的用武之地;他们真的有力的地点是它们可以扩充函数赖以运行的功用域, 也就是说,
我传什么效用域进去, 函数就在相当效用域运行.

 1           eg:
 2                     window.color = 'red';
 3                     var o = {
 4                         color : 'blue'
 5                     };
 6                     function sayColor(){
 7                         alert(this.color);
 8                     }
 9                     sayColor();//弹出red,函数内部this指向的是全局作用域
10 
11                     sayColor.call(this);//弹出red,函数的执行环境是全局作用域
12                     sayColor.call(window);//弹出red,函数的执行环境是全局作用域
13                     sayColor.call(o);//弹出blue,函数内部this指向的是引用类型o
14 
15                     使用call()和apply()来扩充作用域最大的好处,就是对象不需要域方法有任何耦合关系.
16                     上面的例子是先将sayColor()函数放到了对象o中作为了一个方法,然后通过o来调用这个方法,
17                     而ECMAScript还定义了一个方法,bind(),这个方法会创建一个函数的实例,并作为返回值返回,这个实例的中this的值
18                     会被绑定到传给bind()方法的值,这个实例也是一个函数,只不过里面的this值指定的是传递的那个参数(这个参数会是一个对象)
19                     eg:
20                         window.color = 'red';
21                         var o = {
22                             color : 'blue'
23                         };
24                         function sayColor(){
25                             alert(this.color);
26                         }
27                         var objectSayColor = sayColor.bind(o);//得到一个函数的实例,这个实例也是一个函数,只不过这个函数体内的this指向的是对象o
28                         objectSayColor();//弹出blue
29                         //如果我们直接敲入objectSayColor会打印出sayColor函数的定义语句,和敲入objectSayColor的结果一样,但是前者打印结果中多了一个感叹号,
                 其内容是Function was resolved from bound function,表明这个是来源于函数,但是与函数不同。