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

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

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

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

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

一、在实际开发中，须要用函数来作些什么？

二、能够用函数的这些特性玩哪些东西？

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

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

12.1  函数

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

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

一、函数声明

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

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

在变量对象的建立过程当中，function声明的函数比var声明的变量有更加优先的执行顺序，即咱们经常提到的变量提高。所以在同一执行上下文中，不管在什么地方声明了函数，均可以直接使用。

二、函数表达式

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

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 
    }
}复制代码

三、匿名函数

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

（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()();复制代码

四、自执行函数

自执行函数是匿名函数一个很是重要的应用场景。由于函数会产生独立的做用域，所以咱们经常利用自执行函数来模拟块级做用域，并进一步在此基础上实现模块化的运用。

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

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

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

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

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

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

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

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