【8】JavaScript 函數高級——閉包

時間 2019-12-06

原文原文鏈接

JavaScript函數高級——閉包

1、引子實例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>00_引入</title>
</head>
<body>
    <button>測試1</button>
    <button>測試2</button>
    <button>測試3</button>
<!--
需求: 點擊某個按鈕, 提示"點擊的是第n個按鈕"
-->
<script type="text/javascript">
  var btns = document.getElementsByTagName('button')
  //遍歷加監聽
  /*
  for (var i = 0,length=btns.length; i < length; i++) {
    var btn = btns[i]
    btn.onclick = function () {
      alert('第'+(i+1)+'個')
    }
  }*/
  /*
  for (var i = 0,length=btns.length; i < length; i++) {
    var btn = btns[i]
    //將btn所對應的下標保存在btn上
    btn.index = i
    btn.onclick = function () {
      alert('第'+(this.index+1)+'個')
    }
  }*/

  //利用閉包
  for (var i = 0,length=btns.length; i < length; i++) {
    (function (j) {
      var btn = btns[j]
      btn.onclick = function () {
        alert('第'+(j+1)+'個')
      }
    })(i)
  }
</script>
</body>
</html>

2、理解閉包

（1）如何產生閉包?javascript

當一個嵌套的內部(子)函數引用了嵌套的外部(父)函數的變量(函數)時, 就產生了閉包。

（2）閉包究竟是什麼?html

使用chrome調試查看。
理解一: 閉包是嵌套的內部函數(絕大部分人)。
-理解二: 包含被引用變量(函數)的對象(極少數人)。
-注意: 閉包存在於嵌套的內部函數中。

（3）產生閉包的條件?java

函數嵌套
內部函數引用了外部函數的數據(變量/函數)

3、常見的閉包

（1）將函數做爲另外一個函數的返回值面試

// 1. 將函數做爲另外一個函數的返回值
function fn1() {
  var a = 2
  function fn2() {
    a++
    console.log(a)
  }
  return fn2
}
var f = fn1()
f() // 3
f() // 4

（2）將函數做爲實參傳遞給另外一個函數調用chrome

// 2. 將函數做爲實參傳遞給另外一個函數調用
function showDelay(msg, time) {
  setTimeout(function () {
    alert(msg)
  }, time)
}
showDelay('atguigu', 2000)

4、閉包的做用

（1）使用函數內部的變量在函數執行完後, 仍然存活在內存中(延長了局部變量的生命週期)閉包

（2）讓函數外部能夠操做(讀寫)到函數內部的數據(變量/函數)函數

function fn1() {
  var a = 2
  function fn2() {
    a++
    console.log(a)
    // return a
  }
  function fn3() {
    a--
    console.log(a)
  }-
  return fn3
}

var f = fn1()
f() // 1
f() // 0

問題:測試

函數執行完後, 函數內部聲明的局部變量是否還存在?
通常是不存在, 存在於閉包中的變量纔可能存在。ui
在函數外部能直接訪問函數內部的局部變量嗎?

不能, 但咱們能夠經過閉包讓外部操做它。this

5、閉包的生命週期

（1）產生: 在嵌套內部函數定義執行完時就產生了(不是在調用時)。

（2）死亡: 在嵌套的內部函數成爲垃圾對象時。

function fn1() {
  //此時閉包就已經產生了(函數提高, 內部函數對象已經建立了)
  var a = 2
  function fn2 () {
    a++
    console.log(a)
  }
  return fn2
}
var f = fn1()
f() // 3
f() // 4
f = null //閉包死亡(包含閉包的函數對象成爲垃圾對象)

6、閉包的應用：自定義JS模塊

閉包的應用 : 定義JS模塊

具備特定功能的js文件。
將全部的數據和功能都封裝在一個函數內部(私有的)。
只向外暴露一個包信n個方法的對象或函數。
模塊的使用者, 只須要經過模塊暴露的對象調用方法來實現對應的功能。

第一種方式：

// myModule.js
function myModule() {
  //私有數據
  var msg = 'My data'
  //操做數據的函數
  function doSomething() {
    console.log('doSomething() '+msg.toUpperCase())
  }
  function doOtherthing () {
    console.log('doOtherthing() '+msg.toLowerCase())
  }

  //向外暴露對象(給外部使用的方法)
  return {
    doSomething: doSomething,
    doOtherthing: doOtherthing
  }
}

// 使用模塊：
<script type="text/javascript" src="myModule.js"></script>
<script type="text/javascript">
  var module = myModule()
  module.doSomething()
  module.doOtherthing()
</script>

第二種方式：

// myModule2.js
(function () {
  //私有數據
  var msg = 'My atguigu'
  //操做數據的函數
  function doSomething() {
    console.log('doSomething() '+msg.toUpperCase())
  }
  function doOtherthing () {
    console.log('doOtherthing() '+msg.toLowerCase())
  }

  //向外暴露對象(給外部使用的方法)
  window.myModule2 = {
    doSomething: doSomething,
    doOtherthing: doOtherthing
  }
})()

// 使用模塊
<script type="text/javascript" src="myModule2.js"></script>
<script type="text/javascript">
  myModule2.doSomething()
  myModule2.doOtherthing()
</script>

7、閉包的缺點及解決

（1）缺點

函數執行完後, 函數內的局部變量沒有釋放, 佔用內存時間會變長。
容易形成內存泄露。

（2）解決

能不用閉包就不用。
-及時釋放。

function fn1() {
  var arr = new Array(10000000)
  function fn2() {
    console.log(arr.length)
  }
  return fn2
}
var f = fn1()
f()

f = null //讓內部函數成爲垃圾對象-->回收閉包

8、閉包_面試題

面試題1：

//代碼片斷一
var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
        return function(){
            return this.name;
        };
    }
};
alert(object.getNameFunc()());  // The Window

//代碼片斷二
var name2 = "The Window";
var object2 = {
    name2 : "My Object",
    getNameFunc : function(){
        var that = this;
        return function(){
            return that.name2;
        };
    }
};
alert(object2.getNameFunc()()); // My Object

面試題2：

function fun(n,o) {
  console.log(o)
  return {
    fun:function(m){
      return fun(m,n)
    }
  }
}
var a = fun(0)
a.fun(1)
a.fun(2)
a.fun(3)//undefined,0,0,0

var b = fun(0).fun(1).fun(2).fun(3)//undefined,0,1,2

var c = fun(0).fun(1)
c.fun(2)
c.fun(3)//undefined,0,1,1

可經過斷點調試查看執行步驟。