Introduce
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>00_Introduce</title>
</head>
<body>
<button>Test 1</button>
<button>Test 2</button>
<button>Test 3</button>
<!--
//Requirement: click a button to prompt "the nth button is clicked"
-->
<script type="text/javascript">
var btns = document.getElementsByTagName('button');
//Ergodic plus monitor
/*
for (var i = 0,length=btns.length; i < length; i++) {
var btn = btns[i]
btn.onclick = function () {
alert(''+ (i+1) +' first '); / / always btns.length because the for loop has ended
}
}*/
/*
for (var i = 0,length=btns.length; i < length; i++) {
var btn = btns[i]
//Save the subscript corresponding to btn on btn
btn.index = i
btn.onclick = function () {
alert(''+ (this.index+1) +' the first ')
}
}*/
//Using closure
for (var i = 0, length = btns.length; i < length; i++) {
(function (j) {
var btn = btns[j]
btn.onclick = function () {
alert('The first' + (j + 1) + 'individual')
}
})(i);
}
</script>
</body>
</html>
Understanding closures:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_Understanding closure</title>
</head>
<body>
<!--
1. How to generate closures?
* When a nested interior(son)Function references nested outside(father)Variable of function(function)Time, And there's a closure.
2. What is a closure??
* Use chrome Debugging view
* Understand one: Closures are nested intrinsic functions(Most people)
* Understanding two: Include referenced variables(function)Object(Very few people)
* Be careful: Closures exist in nested inner functions
3. Conditions for closure?
* Function nesting
* The inner function references the data of the outer function(variable/function)
-->
<script type="text/javascript">
function fn1() {
var a = 2;
var b = 'abc';
function fn2() { //Executing a function definition produces a closure (without calling an internal function)
console.log(a);
}
// fn2();
}
fn1();
function fun1() {
var a = 3;
var fun2 = function () {
console.log(a);
}
}
fun1();
</script>
</body>
</html>
Common closures:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_Common closures</title>
</head>
<body>
<!--
1. Use function as return value of another function
2. Passing a function as an argument to another function call
-->
<script type="text/javascript">
// 1. Use the function as the return value of another function
function fn1() {
var a = 2
function fn2() {
a++
console.log(a)
}
return fn2
}
var f = fn1()
f() // 3
f() // 4
// 2. Pass the function as an argument to another function call
function showDelay(msg, time) {
setTimeout(function () {
alert(msg)
}, time)
}
showDelay('atguigu', 2000)
</script>
</body>
</html>
The role of closures:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_The function of closure</title>
</head>
<body>
<!--
1. Use the variables inside the function after the function is executed, Still in memory(Prolongs the life cycle of local variables)
2. Let functions operate outside(Read and write)Data to function(variable/function)
//Question:
1. After function execution, Does the local variable declared inside the function still exist?? Generally, it doesn't exist., Only variables that exist in a closed state can exist.
2. Can you directly access the local variables inside the function outside the function? Can not, But we can use closures to let the outside operate on it.
-->
<script type="text/javascript">
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
</script>
</body>
</html>
The lifecycle of a closure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_The life cycle of closures</title>
</head>
<body>
<!--
1. produce: Generated when the nested inner function definition is completed(Not calling)
2. death: When a nested inner function becomes a garbage object
-->
<script type="text/javascript">
function fn1() {
//At this point, the closure has been generated (function promotion, internal function object has been created)
var a = 2
function fn2() {
a++
console.log(a)
}
return fn2
}
var f = fn1()
f() // 3
f() // 4
f = null //Closure death (function objects containing closures become garbage objects)
</script>
</body>
</html>
Custom js module of closure:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> Application of closure </head> <body> <!-- Application 2 of closure: defining JS module *js files with specific functions *Encapsulate all data and functions within a function (private) *Only expose the objects or functions of n methods in one package *The user of the module only needs to call methods through the exposed objects of the module to realize the corresponding functions. --> <script type="text/javascript" src="myModule.js"></script> <script type="text/javascript"> var module = myModule() module.doSomething() module.doOtherthing() </script> </body> </html>
myModule.js
function myModule() {
//Private data
var msg = 'My atguigu'
//Functions that manipulate data
function doSomething() {
console.log('doSomething() ' + msg.toUpperCase())
}
function doOtherthing() {
console.log('doOtherthing() ' + msg.toLowerCase())
}
//Exposed objects (Methods for external use)
return {
doSomething: doSomething,
doOtherthing: doOtherthing
}
}
Custom js module 2 for closures:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
Application of closure
</head>
<body>
<!--
Application 2 of closure: defining JS module
*js files with specific functions
*Encapsulate all data and functions within a function (private)
*Only expose the objects or functions of n methods in one package
*The user of the module only needs to call methods through the exposed objects of the module to realize the corresponding functions.
-->
<script type="text/javascript" src="myModule2.js"></script>
<script type="text/javascript">
myModule2.doSomething()
myModule2.doOtherthing()
</script>
</body>
</html>
Disadvantages and solutions of closures:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_Disadvantages and solutions of closures</title>
</head>
<body>
<!--
1. shortcoming
* After function execution, Local variables in the function are not released, Takes up more memory
* Easy to cause memory leakage
2. Solve
* No closure, no closure.
* Timely release
-->
<script type="text/javascript">
function fn1() {
var arr = new Array[100000]
function fn2() {
console.log(arr.length)
}
return fn2
}
var f = fn1()
f()
f = null //Make intrinsic function a garbage object -- > recycle closure
</script>
</body>
</html>==============Talk is cheap, show me the code==============