對JS閉包的理解及常見應用場景

https://blog.csdn.net/qq_21132509/article/details/80694517

請您移步我的新個人博客: https://moweiwei.com，謝謝！

1、變量作用域

變量作用域兩種：全局變量、局部變量。js中函數內部可以讀取全局變量，函數外部不能讀取函數內部的局部變量。
1
2、如何從外部讀取函數內部的變量？

function f1(){
var n = 123;
function f2(){ //f2是一個閉包
alert(n)
}
return f2;
}
1
2
3
4
5
6
7
js鏈式作用域：子對象會一級一級向上尋找所有父對象的變量，反之不行。
f2可以讀取f1中的變量，只要把f2作為返回值，就可以在f1外讀取f1內部變量
1
2
3、閉包概念

能夠讀取其他函數內部變量的函數。
或簡單理解為定義在一個函數內部的函數，內部函數持有外部函數內變量的引用。
1
2
4、閉包用途

1、讀取函數內部的變量
2、讓這些變量的值始終保持在內存中。不會再f1調用后被自動清除。
3、方便調用上下文的局部變量。利於代碼封裝。
原因：f1是f2的父函數，f2被賦給了一個全局變量，f2始終存在內存中，f2的存在依賴f1，因此f1也始終存在內存中，不會在調用結束后，被垃圾回收機制回收。
1
2
3
4
5、閉包理解

/**

• [init description]

• @return {[type]} [description]
  */
  function init() {
  var name = "Chrome"; //創建局部變量name和局部函數alertName

  function alertName() { //alertName()是函數內部方法，是一個閉包
  alert(name); //使用了外部函數聲明的變量，內部函數可以訪問外部函數的變量
  }
  alertName();
  }
  init();
  //一個變量在源碼中聲明的位置作為它的作用域，同時嵌套的函數可以訪問到其外層作用域中聲明的變量

/**

• [outFun description]
• @return {[type]} [description]
  */
  function outFun(){
  var name = "Chrome";
  function alertName(){
  alert(name);
  }
  return alertName; //alertName被外部函數作為返回值返回了,返回的是一個閉包
  }

var myFun = outFun();
myFun();
/*
閉包有函數+它的詞法環境；詞法環境指函數創建時可訪問的所有變量。
myFun引用了一個閉包，閉包由alertName()和閉包創建時存在的“Chrome”字符串組成。
alertName（）持有了name的引用，
myFunc持有了alertName（）的的訪問，
因此myFunc調用時，name還是處於可以訪問的狀態。
*/

/**

• [add description]
• @param {[type]} x [description]
  */
  function add(x){
  return function(y){
  return x + y;
  };
  }

var addFun1 = add(4);
var addFun2 = add(9);

console.log(addFun1(2)); //6
console.log(addFun2(2)); //11
//add接受一個參數x，返回一個函數,它的參數是y，返回x+y
//add是一個函數工廠，傳入一個參數，就可以創建一個參數和其他參數求值的函數。
//addFun1和addFun2都是閉包。他們使用相同的函數定義，但詞法環境不同，addFun1中x是4，后者是5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
6、閉包應用場景之setTimeout

//原生的setTimeout傳遞的第一個函數不能帶參數
setTimeout(function(param){
	alert(param)
},1000)


//通過閉包可以實現傳參效果
function func(param){
	return function(){
		alert(param)
	}
}
var f1 = func(1);
setTimeout(f1,1000);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
7、閉包應用場景之回調

<p>哈哈哈哈哈哈</p>
<h1>hhhhhhhhh</h1>
<h2>qqqqqqqqq</h2>

<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 8、閉包應用場景之封裝變量 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 9、閉包應用場景之為節點循環綁定click事件

<p id="info">123</p>
<p>E-mail: <input type="text" id="email" name="email"></p>
<p>Name: <input type="text" id="name" name="name"></p>
<p>Age: <input type="text" id="age" name="age"></p>