摘要：本文是重溫基礎(chǔ)系列文章的第四篇。系列目錄復(fù)習(xí)資料資料整理個人整理重溫基礎(chǔ)語法和數(shù)據(jù)類型重溫基礎(chǔ)流程控制和錯誤處理重溫基礎(chǔ)循環(huán)和迭代本章節(jié)復(fù)習(xí)的是中的基礎(chǔ)組件之一，函數(shù)，用來復(fù)用特定執(zhí)行邏輯。箭頭函數(shù)不能使用命令，即不能用作函數(shù)。

本文是 重溫基礎(chǔ) 系列文章的第四篇。
今日感受：常懷感恩之心，對人對己。

系列目錄：

【復(fù)習(xí)資料】ES6/ES7/ES8/ES9資料整理(個人整理)

【重溫基礎(chǔ)】1.語法和數(shù)據(jù)類型

【重溫基礎(chǔ)】2.流程控制和錯誤處理

【重溫基礎(chǔ)】3.循環(huán)和迭代

本章節(jié)復(fù)習(xí)的是JS中的基礎(chǔ)組件之一，函數(shù)，用來復(fù)用特定執(zhí)行邏輯。

定義函數(shù)有兩種方法：函數(shù)聲明 和 函數(shù)表達(dá)式 ：

也成為函數(shù)聲明，通常格式為：

function f (a){
    return a + 1;
}

解釋：這里聲明一個函數(shù) f ，并傳入一個參數(shù) a ，當(dāng)函數(shù)執(zhí)行以后，通過 return 關(guān)鍵字返回了 a+1的值。

參數(shù)：
當(dāng)傳入的參數(shù)是一個數(shù)字/字符串等具體的值的時候，若參數(shù)的值被改變，不會影響到全局或調(diào)用函數(shù)。
但如果參數(shù)是個對象，若函數(shù)內(nèi)改變的這個參數(shù)的屬性，則函數(shù)外部的這個參數(shù)原始的值會被修改。

var leo = {
    age:20
}
function f(obj){
    obj.age = 15;
    obj.name = "leo";
}
f(leo);
console.log(leo); //{age: 15, name: "leo"}

通過定義一個匿名的函數(shù)，來賦值給一個變量，通過這個變量來調(diào)用這個函數(shù)。

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

但是函數(shù)表達(dá)式也可以提供函數(shù)名，用于函數(shù)內(nèi)部調(diào)用，并指代本身，也可以作為調(diào)試器堆棧跟蹤中識別該函數(shù)。

var f = function g(a){
    return n < 2 ? 1 : a*g(a-1);
}

另外，函數(shù)表達(dá)式聲明可以用來根據(jù)不同條件，來定義一個函數(shù)：

var f;
if(a == 1){
    f = function (){
        return "when a == 1";
    }
}else {
    f = function (){
        return "when a != 1";
    }
}

函數(shù)定義完成后不會自動執(zhí)行，需要我們通過函數(shù)名稱來調(diào)用，才能真正執(zhí)行：

var f = function (){
    console.log("ok");
}
f(); // "ok"

另外，函數(shù)也可以調(diào)用自身，這就是遞歸過程：

function f (n){
    if( n==0 || n==1) {
        return 1;
    }else {
        return n * f(n-1);
    }
}
// 三目運算
function f (n){
    return (n==0 || n==1)?1: n*f(n-1);
}

由于函數(shù)只在函數(shù)的內(nèi)部有定義，所以函數(shù)內(nèi)部定義的變量在函數(shù)外部不能訪問，函數(shù)內(nèi)部就是這個函數(shù)的作用域。
當(dāng)一個父級函數(shù)內(nèi)，還定義了一個子級函數(shù)，則這個子級函數(shù)可以訪問父級函數(shù)定義的變量。

// 全局作用域 global scope
var a = 1, b = 2;
function f (){
    return a + b;
}
f(); // 3

function g(){
    var a1 = "leo", b1 = "pingan";
    function hi (){
        return a1 + "和" + b1
    } 
    return hi();
}
g(); // "leo和pingan"

閉包是 JavaScript 中最強大的特性之一，并且JS允許函數(shù)嵌套。
在一個函數(shù)內(nèi)部在嵌套一個函數(shù)，而嵌套的這個函數(shù)對外面的函數(shù)是私有的，則形成一個閉包，閉包是一個可以自己擁有獨立的環(huán)境和變量的表達(dá)式，通常是函數(shù)。
理解一下，前面說的內(nèi)部函數(shù)可以調(diào)用外部函數(shù)的變量和方法，那么可以這么理解：閉包的函數(shù)繼承了父級容器函數(shù)的參數(shù)和變量，即內(nèi)部函數(shù)包含外部函數(shù)的作用域。
總結(jié)一下：

內(nèi)部函數(shù)只能在外部函數(shù)中訪問；

內(nèi)部函數(shù)形成閉包：可以訪問外部函數(shù)的參數(shù)和變量，但外部函數(shù)卻不能使用這個內(nèi)部函數(shù)的參數(shù)和變量；

function f(a) {
    function g(b){
        return a + b;
    }
    return g;
}
var a1 = f(5);  // ? g(b){ return a + b; }
var a2 = a1(6); // 11
var a3 = f(5)(6); // 11

閉包可以給內(nèi)部函數(shù)的變量提供一定的安全保障。
另外，閉包還有復(fù)雜的用法：

var f = function (name){
    var age ;
    return {
        setName : function (newName){
            name = newName;
        },

        getName : function (){
            return name;
        },

        getAge : function (){
            return age;
        },
        setAge : function (newAge){
            age = newAge;
        }
    }
}

var leo = f("leo");
leo.setName("pingan");
leo.setAge(20);
leo.getName();     // "pingan"
leo.getAge();      // 20

在同一個閉包作用域下若參數(shù)或變量名相同，產(chǎn)生沖突，則優(yōu)先使用作用域最近：

function f(){
    var a = 1;
    function g(a){
        return a + 1;
    }
    return g;
}
f()(3); // 4

函數(shù)的實際參數(shù)會被保存在一個類數(shù)組對象 arguments 對象中，通過索引訪問具體的參數(shù)：

var a = arguments[i]

arguments的索引從0開始，也有arguments.length屬性獲取長度。
當(dāng)我們不知道參數(shù)的數(shù)量的時候，可以使用arguments.length來獲取實際傳入?yún)?shù)的數(shù)量，再用arguments對象來獲取每個參數(shù)。
例如：

// 拼接所有參數(shù)為一個字符串
// 參數(shù) s 為分隔符
function f( s ){
    var text = "";
    for(var i = 0;i<= arguments.length; i++){
        text += arguments[i] + s ;
    }
    return text;
}

f("--","leo","pingan","robin");
// "----leo--pingan--robin--undefined--"
f("**","leo","pingan","robin");
// "****leo**pingan**robin**undefined**"

ES6開始，新增兩個類型的參數(shù)：默認(rèn)參數(shù)和剩余參數(shù)：

若函數(shù)沒有傳入?yún)?shù)，則參數(shù)默認(rèn)值為undefined，通常設(shè)置參數(shù)默認(rèn)值是這樣做的：

// 沒有設(shè)置默認(rèn)值
function f(a, b){
    b = b ? b : 1;
    return a * b;
}
f(2,3);  // 6
f(2);    // 2

// 設(shè)置默認(rèn)值
function f(a, b = 1){
    return a * b;
}
f(2,3);  // 6
f(2);    // 2

可以將參數(shù)中不確定數(shù)量的參數(shù)表示成數(shù)組，如下：

function f (a, ...b){
    console.log(a, b);
}
f(1,2,3,4); // a => 1 b =>?[2, 3, 4]

函數(shù)箭頭表達(dá)式是ES6新增的函數(shù)表達(dá)式的語法，也叫胖箭頭函數(shù)，變化：更簡潔的函數(shù)和this。

更簡潔的函數(shù)

// 有1個參數(shù)
let f = v => v;
// 等同于
let f = function (v){return v};

// 有多個參數(shù)
let f = (v, i) => {return v + i};
// 等同于
let f = function (v, i){return v + i};

// 沒參數(shù)
let f = () => 1;
// 等同于
let f = function (){return 1};

let arr = [1,2,3,4];
arr.map(ele => ele + 1);  // [2, 3, 4, 5]

this

注意這幾點：

1. 箭頭函數(shù)內(nèi)的`this`總是指向**定義時所在的對象**，而不是調(diào)用時。  
2. 箭頭函數(shù)不能當(dāng)做**構(gòu)造函數(shù)**，即不能用`new`命令，否則報錯。  
3. 箭頭函數(shù)不存在`arguments`對象，即不能使用，可以使用`rest`參數(shù)代替。  
4. 箭頭函數(shù)不能使用`yield`命令，即不能用作Generator函數(shù)。  

一個簡單的例子：

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++;
  }, 1000);
}
var p = new Person(); // 定時器一直在執(zhí)行 p的值一直變化

1.MDN 函數(shù)

本部分內(nèi)容到這結(jié)束

歡迎關(guān)注微信公眾號【前端自習(xí)課】每天早晨，與您一起學(xué)習(xí)一篇優(yōu)秀的前端技術(shù)博文 .