內(nèi)部函數(shù)可以訪問外部函數(shù)的局部變量 , 即使外部函數(shù)已經(jīng)執(zhí)行結(jié)束

    function foo() {
        let a = 20;

        function inner() {
            console.log(a);
        }
        return inner
    }

    let f = foo();
    f()

    //內(nèi)部函數(shù)可以訪問外部函數(shù)的局部變量 , 即使外部函數(shù)已經(jīng)執(zhí)行結(jié)束

    function foo() {
        let a = 20;
            function inner() {
                console.log(a);
            }
            a = 30;
            return inner
        }
        let f = foo();
        f()

閉包

廣義上的閉包:

只要有一個(gè)函數(shù) , 訪問了這個(gè)函數(shù)外的變量 , 那么這個(gè)函數(shù)就是閉包

狹義上的閉包:

如果一個(gè)函數(shù),訪問了他的==外部函數(shù)==的==局部變量,==那么這個(gè)函數(shù)就是一個(gè)閉包

var a = 10;
function foo(){
    var b = 20;
    (function (){
        console.log(b)
    })()
}

閉包的特點(diǎn):

閉包可以訪問它的外部函數(shù)作用域中的任何的變量 , 而且訪問到的變量的值一定是最新的值;即使外部函數(shù)執(zhí)行結(jié)束了,也能訪問到外部函數(shù)的局部變量

var a = 10;
function foo(){
    var b = 20;
    (function (){
        console.log(b)
    })()
    b = 30
}

閉包的應(yīng)用:

1. 返回外部函數(shù)的局部變量

2. 事件循環(huán)賦值問題

<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>

var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function () {
        console.log(i);
    }
}

問題 : 點(diǎn)擊每個(gè)按鈕都是返回3
原因 : 每個(gè)按鈕訪問的i都是最新的i,也就是循環(huán)執(zhí)行完畢后,此時(shí)的i等于3

解決方案1:

閉包: 把內(nèi)部返回函數(shù)封裝進(jìn)一個(gè)匿名函數(shù)中,匿名函數(shù)中的變量對(duì)象中存儲(chǔ)著每一輪的i , 每次訪問的也就是固定的i 了

var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = (function (i) {
        return function () {
            console.log(i);

        }
    })(i)
}

解決方案2 :

把要訪問的值 , 存在一個(gè)不會(huì)被更改的地方

    var btns = document.querySelectorAll("button");
    for (var i = 0; i < btns.length; i++) {
        btns[i].index = i;
        btns[i].onclick = function () {
            console.log(this.index);
        }
    }

解決方案3:

var ---> let

var btns = document.querySelectorAll("button");
        //把var 改成 let-+
    for (let i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
            console.log(i);
        }
    }   

3. 使用閉包封裝對(duì)象:

    function foo() {
        var p = {
            name:"李四",
            age : 40
        };
        return {
            getName : function () {
                return p.name
            },
            setName:function (value) {
                  p.name = value;
                return p.name
            },
            setAttr : function (key,value) {
                p[key] = value ;
            },
            getAttr : function (key) {
                return p[key]
            }
        }
    }
    var p = foo();
    console.log(p.setName("張三"));
    console.log(p.getName());
    p.setAttr("sex","男")
    console.log(p.getAttr("sex"));

4. 高階函數(shù)

如果一個(gè)函數(shù)接受一個(gè)或多個(gè)函數(shù)作為參數(shù),或者可以返回一個(gè)函數(shù),則這樣的函數(shù)就叫高階函數(shù)

常見高階函數(shù): setTimeout ,setInterval

map , reduce, filter

1. arr.prototype.map

map() 方法創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果。

//map
    var arr = [1,4,9]
    console.log(arr.map(function (x) {
            return x**2
        }
    ));

參數(shù):

• callback 回調(diào)函數(shù)

  生成新數(shù)組元素的函數(shù)，使用三個(gè)參數(shù)：

  currentValue: : callback 的第一個(gè)參數(shù)，數(shù)組中正在處理的當(dāng)前元素。

  index : callback 的第二個(gè)參數(shù)，數(shù)組中正在處理的當(dāng)前元素的索引。

  array : callback 的第三個(gè)參數(shù)，map 方法被調(diào)用的數(shù)組。

• thisArg

  可選的。執(zhí)行 callback 函數(shù)時(shí) 使用的this 值。

返回值:

一個(gè)新數(shù)組，每個(gè)元素都是回調(diào)函數(shù)的結(jié)果。

2. arr.prototype.reduce

reduce()方法是對(duì)數(shù)組中的每個(gè)元素開始執(zhí)行給定函數(shù) , 構(gòu)建一個(gè)最終返回值

//reduce
    //求10的階乘
    let arr = new Array(10);
    arr.fill(10);
    let value = arr.reduce(function (a,value,index) {
        return a * (index+1)
    },1);
    console.log(value);

參數(shù):

• callback 回調(diào)函數(shù) ; Function類型

  回調(diào)函數(shù)默認(rèn)支持四個(gè)參數(shù)

  prevuousValue : 上一次執(zhí)行callback的返回值;

  currentValue : 數(shù)組中當(dāng)前被處理的元素;

  index : 當(dāng)前被處理的元素的索引值;

  arry :調(diào)用reduce() 方法的數(shù)組本身

• initualValue : 初始值 ; 可選/任意類型;作為首次調(diào)用callback時(shí)的第一個(gè)參數(shù);

3.arr.prototype.filter

filter()方法對(duì)數(shù)組中的每一項(xiàng)元素執(zhí)行給定函數(shù)，并返回一個(gè)由執(zhí)行該函數(shù)時(shí)返回 true 的元素組成的新數(shù)組。

    var arr1 = [1,1,3,3,41,41254,35213,33,33,14,56,7];
    //filter 過濾
    var a1 = arr1.filter(function (ele,index,arr1) {
        //函數(shù)里返回true的留下
        return ele % 2 == 0;
    })

參數(shù):

• cellback回調(diào)函數(shù)

  回調(diào)函數(shù)默認(rèn)支持三個(gè)函數(shù); 并且會(huì)返回一個(gè)布爾值;:

  ele : 遍歷的數(shù)組元素

  index : 元素對(duì)應(yīng)的索引

  arr : 數(shù)組的本身

  ?

• thisArg : 調(diào)用callback的this值

返回值:

filter() 方法的會(huì)返回一個(gè)Arry類型的值 ;是由 每次執(zhí)行callback函數(shù)并且返回true的元素組成的一個(gè)新數(shù)組;如果所有元素都是返回false;則返回空數(shù)組[ ]