初涉JavaScript模式 (8) : 函数 【概述】
什么是函数
函数,是一个大型程序中的某部份代码,由一个或多个语句块组成。它负责完成某项特定任务,而且相较于其他代码,具备相对的独立性。(维基百科)
函数的特点
第一类对象
在JavaScript世界中函数是一等公民,它不仅拥有一切传统函数的使用方式(声明和调用),而且可以做到像简单值一样赋值、传参、返回,这样的函数也称之为第一级函数(First-class Function)。不仅如此,JavaScript中的函数还充当了类的构造函数的作用,同时又是一个Function类的实例(instance)。这样的多重身份让JavaScript的函数变得非常重要。在JavaScript中,函数又被称作第一类对象[frist-class object]。
提供作用域
- 函数可以在运行时动态创建,也可以在程序执行过程中创建
- 函数可以分配给变量,可以将他们的引用复制给其他变量,可以被扩展,此外,除了少数情况下,函数还可以被删除
- 可以作为参数传递给其他函数,并且还可以由其他函数返回
- 函数可以由自己的属性和方法
函数声明
JavaScript函数像一般语言一样也是遵循先声明后使用的原则,函数名只能包含字母、数字、下划线或$,且不能以数字开头。函数常见的声明方式有以下两种:
函数表达式
直接上代码:
1: //普通函数表达式
2: var wr1 = function(){
3: // body...
4: }
5: //命名函数表达式
6: var wr2 = function wr2 () {
7: // body...
8: }
以上广义上称为函数表达式,并且命名函数表达式是一个函数表达式的一种特殊情况,通常发生在定义可选的命名时。唯一的区别在于命名函数表达式保留的add 会被当作add.name 而继续保留,这在你使用Firebug或则从自身调用同一个函数时,name属性是非常有用的。
普通函数声明
示例如下:
1: function wr(){
2: // body...
3: }
区别和注意
注意,上面两种函数声明方式存在细微的差别:
- 第一种方式在赋值之前这个函数不能被任何代码访问到,也就是说这个赋值必须在调用之前完成,否则调用时会出现错误(详细请看下面的函数提升)
- 第二种方式在声明时就是一个命名的函数,无论是声明在调用之前、调用之后,甚至是不会执行到的位置(例如return语句之后或是永远不会为真的分支里),都在整个作用域可访问
函数提升
1: (function(){
2: wr1(); //wr1
3:
4: function wr1(){
5: console.log("wr1");
6: }
7: var wr2 = function(){
8: console.log("wr2");
9: }
10: wr2(); //wr2
11:
12: wr3(); //Uncaught TypeError: undefined is not a function
13: var wr3 = function(){
14: console.log("wr3");
15: };
16: })();
在以上代码说明,函数声明的方式(无论在上下文哪里声明)会自动将函数定义提升到上下文顶部,而函数表达式的方式只能在表达式执行以后才可以正常调用。
函数提升经常会导致JS的很多bug,我们来看下一个示例:
1: var wr = (function(){
2: a = function() { return 1; };
3: function a () {
4: return 2;
5: }
6: return a;
7: })(window);
8: console.log(wr);
这段代码,我们期望的结果可能是输出第二个a,可是由于函数提升,函数声明在进入上下文阶段已经存在于变量对象中(即代码执行之前),所以输出的是我们函数表达式定义的a。
匿名函数和嵌套函数
在JavaScript可以声明一个没有名称的函数,称为匿名函数(Anonymouse Function)。同时JavaScript还允许在函数内部声明函数,称为嵌套函数(Nested Function),嵌套函数的作用域为整个父函数。
JavaScript运行时中有一个特殊的全局环境(Global Object),这个对象上面存放全局的函数和变量,实际开发中经常会使用若干第三方的库或多个js文件,若不小心在全局对象引入重复的变量或函数声明,则会造成代码执行混乱。例如先后引入两个js文件,分别定义了自己的函数log作为内部使用,则第二引入的函数会覆盖第一个的定义且不会抛出任何错误,在后续的执行中调用log函数可能会造成错误。这时候使用一个匿名函数将整个js内的逻辑包装起来,就可以避免这种错误,这种方法已经被绝大多数开源js库使用。
1: //匿名函数
2: (function(){
3: function log(msg){
4: console.log(msg);
5: }
6: // other code ...
7: })();
以上代码就是一个简单的示例,log函数的作用域被限制在这个匿名函数之内,而匿名函数则因为被外面一对小括号()包括起来,形成一个函数表达式,表达式的值是一个函数,紧接着一对小括号表示立即执行这个函数,让原有的代码正常执行一次。不过,这种方式声明的函数、通过var声明的变量等等都是内部的,不能被任何匿名函数以外的代码访问到。如果你需要对外暴露一些函数作为接口的话有如下几种方法:
1: var wr = (function(global) {
2:
3: function log(msg) {
4: console.log(msg);
5: }
6:
7: log1 = log; // 法一:利用没有var的变量声明的默认行为,在log1成为全局变量(不推荐)
8:
9: global.log2 = log; // 法二:直接在全局对象上添加log2属性,赋值为log函数(推荐)
10:
11: return { // 法三:通过匿名函数返回值得到一系列接口函数集合对象,赋值给全局变量wr(推荐)
12: log: log
13: };
14:
15: }(window));
以上代码所示的几种方式,第一种虽然可行,但是这样导致了全局变量的污染(==埋坑),根据不同的环境和需求,我们可以选用第二种或第三种。
高阶函数
如果函数作为参数或返回值使用时,就称为高阶函数,JavaScript中的函数都可以作为高阶函数来使用,这也是第一类对象的特征。下面我们就分析一下使用方法。
1: function add(num,value) {
2: return num + value;
3: }
4:
5: function subtract(num,value) {
6: return num - value;
7: }
8:
9: function excute(nums, callback,value) {
10: var arr = [];
11: nums.forEach(function(val,index){
12: arr.push(callback(val,value));
13: });
14: return arr;
15: }
16:
17: var nums = [1,2,3,4,5];
18: var add1 = excute(nums, add,1);
19: console.log(add1); //[2, 3, 4, 5, 6]
20: var subtract1 = excute(nums, subtract,1);
21: console.log(subtract1); //[0, 1, 2, 3, 4]
以上代码展示了把函数作为参数传入另一个函数excute调用的示例,在excute函数的实现中,把callback作为一个黑盒子看待,负责把参数传给它,然后获取返回值,在调用之前并不清楚callback的具体实现。只有当执行到18行和20行时,callback才被分别代表add或subtract分别对每个元素进行+1或-1的操作。
其实高阶函数结合闭包才是真正体现了JavaScript的灵活,在接下来的博中我会把闭包(Closure)专门提出来。
结语
真正写起这篇来,才发现函数居然还有这么多知识点,在网上借鉴了诸多大牛的文章,也看了很多书,还是觉得不到位(好多东西自己也没掌握到位,所以也不敢冒失的写出来),接下来函数中的几个点我会专门拎出来几个大的块,进行扩展,并结合实例(JS的坑)。同样,如果你在我的文中发现了bug(错误或则理解错误),欢迎指正。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。