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

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

系列目錄：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

由于函數(shù)只在函數(shù)的內(nèi)部有定義，所以函數(shù)內(nèi)部定義的變量在函數(shù)外部不能訪問(wèn)，函數(shù)內(nèi)部就是這個(gè)函數(shù)的作用域。
當(dāng)一個(gè)父級(jí)函數(shù)內(nèi)，還定義了一個(gè)子級(jí)函數(shù)，則這個(gè)子級(jí)函數(shù)可以訪問(wèn)父級(jí)函數(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 中最強(qiáng)大的特性之一，并且JS允許函數(shù)嵌套。
在一個(gè)函數(shù)內(nèi)部在嵌套一個(gè)函數(shù)，而嵌套的這個(gè)函數(shù)對(duì)外面的函數(shù)是私有的，則形成一個(gè)閉包，閉包是一個(gè)可以自己擁有獨(dú)立的環(huán)境和變量的表達(dá)式，通常是函數(shù)。
理解一下，前面說(shuō)的內(nèi)部函數(shù)可以調(diào)用外部函數(shù)的變量和方法，那么可以這么理解：閉包的函數(shù)繼承了父級(jí)容器函數(shù)的參數(shù)和變量，即內(nèi)部函數(shù)包含外部函數(shù)的作用域。
總結(jié)一下：

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

內(nèi)部函數(shù)形成閉包：可以訪問(wèn)外部函數(shù)的參數(shù)和變量，但外部函數(shù)卻不能使用這個(gè)內(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

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

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

函數(shù)的實(shí)際參數(shù)會(huì)被保存在一個(gè)類數(shù)組對(duì)象 arguments 對(duì)象中，通過(guò)索引訪問(wèn)具體的參數(shù)：

var a = arguments[i]

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

// 拼接所有參數(shù)為一個(gè)字符串
// 參數(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開(kāi)始，新增兩個(gè)類型的參數(shù)：默認(rèn)參數(shù)和剩余參數(shù)：

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

// 沒(méi)有設(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á)式的語(yǔ)法，也叫胖箭頭函數(shù)，變化：更簡(jiǎn)潔的函數(shù)和this。

更簡(jiǎn)潔的函數(shù)

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

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

// 沒(mé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

注意這幾點(diǎn)：

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

一個(gè)簡(jiǎn)單的例子：

function Person(){
  this.age = 0;

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

1.MDN 函數(shù)

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

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