深入理解javascript系列(十二):函数与函数式编程(1)

函数是Javascript的基础语法之一，当然，也是最重要的，是我们必须要掌握好的知识点之一。

前几个所记录的执行上下文、作用域、变量对象、闭包、this等知识点，其实都是在围绕函数在展开（知道这一点，个人觉得非常重要）。

之前的笔记可以说都是在进一步认识函数，而这次开始，则是认识函数之后，来使用函数了。

在之前的学习中，我们学习了那么多函数的本质，是时候来做个总结了。

1、在实际开发中，需要用函数来做些什么？

2、可以用函数的这些特性玩哪些东西？

3、要怎样使用函数才能让代码更加清晰、直观与合理？

好吧，还是来让我们进一步学习奇妙的函数吧。

12.1  函数

在实际开发中，经常能遇到的函数形式大概有四种，分别是函数声明、函数表达式、匿名函数与函数自执行。

可能大家对这几种常见的函数形式已不在陌生，但是我还是专门总结一下吧。

1、函数声明

函数声明是指利用function关键字来声明一个函数。

function fn() {
    console.log('hello');
}复制代码

在变量对象的创建过程中，function声明的函数比var声明的变量有更加优先的执行顺序，即我们常常提到的变量提升。因此在同一执行上下文中，无论在什么地方声明了函数，都可以直接使用。

2、函数表达式

函数表达式其实是将一个函数体赋值给一个变量的过程。

var fn = function() {};复制代码

因此，我们理解的函数表达式只需把他当作变量声明去理解

//创建阶段
var fn = undefined;
//执行阶段
fn = function() {};  复制代码

如果你比较喜欢使用函数表达式，那么一定要有一个良好的编码习惯，以规避变量提升带来的负面影响。

函数体赋值的操作在其它很多场景中都能够遇到，如下：

function Person(name) {
    this.name = name;
    this.age = age;

    //在构造函数内部添加方法
    this.getAge = function() {
        return this.age        
    }
}


//给原型上添加方法
Person.prototype.getName = function() {
    return this.name;
}

//在对象中添加方法
var a = {
    m: 20,
    getM: function() {
        return this.m 
    }
}复制代码

3、匿名函数

顾名思义，就是没有名字的函数，一般会作为一个参数或者作为一个返回值来使用，通常不使用变量来保存它的引用。常见场景如下：

（1）setTimeout中的参数

var timer = setTimeout(function() {
    console.log('xxxxxx')
},1000);复制代码

（2）数组方法中的参数

var arr = [1,2,3];

arr.map(function(item) {
    return item + 1;
})

arr.forEach(function(item) {
    //todo
})复制代码

（3）匿名函数作为一个返回值

function add() {
    var a = 10;
    return function() {
        return a + 1;
    }
};

add()();复制代码

4、自执行函数

自执行函数是匿名函数一个非常重要的应用场景。因为函数会产生独立的作用域，因此我们常常利用自执行函数来模拟块级作用域，并进一步在此基础上实现模块化的运用。

(function() {
    //....
})();复制代码

模块化的重要性，我们应该时刻提醒自己，并且在学习过程中，应慢慢养成对于模块化思维的一个认知和习惯。因此，虽然在上一个系列已经简单说过模块化了，但这里任然要借助自执行函数来了解模块化。

一个模块可以包括：私有变量、私有方法、公有变量、公有方法。

当我们使用自执行函数创建一个模块时，也就意味着，外界已经无法访问该模块内部的任何属性和方法了。好在有闭包，作为模块之间能互相通信的桥梁，让模块能够在我们的控制下选择性地对外开放属性与方法。

(function() {
    //私有变量
    var age = 18;
    var name = 'pan';
    
    //私有方法
    function getName() {
        return 'my name is ' + name;
    }

    //公有方法
    function getAge() {
        return age;
    }

    //将引用保存在外部执行环境的变量中，这是一种简单的对外开发方法的方式
    window.getAge = getAge;
})();复制代码

这些都是我以往的学习笔记。如果您看到此笔记，希望您能指出我的错误。有这么一个群，里面的小伙伴互相监督，坚持每天输出自己的学习心得，不输出就出局。希望您能加入，我们一起终身学习。欢迎添加我的个人微信号：Pan1005919589