JavaScript--Function类型(11)


// 在JS中,Function(函数)类型实际上是对象;每个函数都是Function类型的实例;而且都与其他引用类型一样具有属性和方法;

// 由于函数是对象,因此函数名实际上也是一个指向函数对象的指针;

一 函数的声明方式

 1 1.函数声明方式
 2     function box(num1,num2){
 3         return num1+num2;
 4     }
 5 
 6 2.函数表达式定义函数
 7     var box = function(num1,num2){  // 通过变量box即可引用函数;
 8         return num1+num2;
 9     };                  // 注意函数末尾有一个分号,就像声明其他变量时一样;
10   var another = box;         // 使用不带圆括号的函数名是访问函数指针;而非调用函数;
    console.log(another(10,10));  
11 3.使用Function构造函数 12 var box = new Function('num1','num2','return num1+num2'); 13 // 第三种方式不推荐,这种语法会导致解析两次代码(第一次解析常规JS代码,第二次解析传入构造函数中的字符串),从而影响性能; 14 // 可以通过这种语法来理解"函数是对象,函数名是指针"的概念;

二 作为值的函数

 1 // JS中的函数名本身就是变量,所以函数也可以作为值来使用;
 2 // 也就是说,不仅可以像传参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回;
 3     function box(sumFunction,num){    // 无论第一个参数传递进来的是什么函数,
 4         return sumFunction(num);     // 它都会返回执行第一参数后的结果;
 5     }
 6     function sum(num){
 7         return num+10;
 8     }
 9     // 传递函数到另一个函数里;
    // 要访问函数的指针不执行函数的话,须去掉函数名后的圆括号;
10 var result = box(sum,10); // =>20;

三 函数内部属性

 1 // 函数内部有两个特殊的对象:arguments和this;
 2 
 3 // 1.arguments:是一个类数组对象,包含着传入函数中的所有参数,主要用途是保存函数参数;
 4 // arguments这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数;
 5     function box(num){
 6         if(num<=1){
 7             return 1;
 8         }else{
 9             return num*arguments.callee(num-1);    // 使用arguments.callee来执行box本身;
10         }
11     }
12 
13 // 2.this:引用的是函数据以操作的对象,或者说函数调用语句所处的作用域;
14 // 当在全局作用域调用函数时,this对象引用的就是window;
15     window.color = "red";
16     alert(this.color);                // 打印全局的color;=>red;
17     var box = {
18         color:'blue',
19         sayColor:function(){
20             alert(this.color);        // 打印局部的color;=>blue;
21         }
22     };

四 函数属性和方法

 1 // JS中的函数是对象,因此函数也有属性和方法;包含length和prototype;
 2 
 3 // length属性:表示函数希望接收到命名参数的个数;
 4     function box(name,age){
 5         alert(name+age);
 6     }
 7     alert(box.length);                // 2s
 8 
 9 // prototype属性:它是保存所有实例方法的真正所在,也就是原型;
10 // prototype包含两个方法:apply()和call(),每个函数都包含这两个非继承而来的方法;
11 // 这两个方法的用途都在特定的作用域中调用函数,实际上等于设置函数体内this对象的值;
12     var color = 'red';
13     var box = {
14         color = 'blue';
15     }
16     function sayColor({
17         alert(this.color);
18     });
19     sayColor();                     // 作用域在window;
20     sayColor.call(this);            // 作用域在window;
21     sayColor.call(window);          // 作用域在window;
22     sayColor.call(box);             // 作用域在box,对象冒充;=>red;
23 // 使用call(box)方法的时候,sayColor()方法的运行环境已经变成了box对象里了;
24 // 使用call()或apply()来扩充作用域的最大好处,就是对象不需要与方法发生任何耦合关系;
25 // 耦合:相互关联的意思,扩展和维护会发生连锁反应;
26 // 也就是说,box对象和sayColor()方法之间不会有多余的关联操作,比如:box.sayColor = sayColor;
27 
28     function Animal(){    
29         this.name = "Animal";    
30         this.showName = function(){    
31             alert(this.name);    
32         }    
33     }    
34     function Cat(){    
35         this.name = "Cat";    
36     }    
37     var animal = new Animal();    
38     var cat = new Cat();    
39     //通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用
40     //输入结果为"Cat"    
41     animal.showName.call(cat,",");    
42     //animal.showName.apply(cat,[]);

五 小结

1 // 函数实际上是Function类型的实例,因此函数也是对象;而这一点正式JavaScript最有特色的地方;
2 // 由于函数对象,所以函数也拥有方法,可以用来增强其行为;

优质内容筛选与推荐>>
1、ffplay流程分析
2、关于微信手机端IOS系统中input输入框无法输入的问题
3、Bug的分类和管理流程
4、随笔:居然已经工作4个半月了 0.0
5、javascript ES6 新特性之 解构


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn