This article mainly introduces the closure of js. Closure is a relatively difficult point to understand in js. Now it is compiled and shared with everyone. If you need it, you can learn more.
Closure is a relatively difficult point to understand in js, especially for people without programming foundation.
In fact, there are only a few things to pay attention to about closures. If you understand them all, it is not difficult to conquer them. Let's talk about some basic principles of closures.
The concept of closure
A closure is a combination of a function and the scope object in the created function. (Scope objects will be discussed below)
The more popular one is "As long as one or more functions are nested in a function, then we can call them a closure."
Similar to this:
function A() { var i = 5; return function() { console.log('i = '+i); } } var a = A(); a(); // i = 5
The principle of closure
#1. If the local variable of the external function will Called by a closure function will not be recycled immediately after the external function completes execution.
We know that no matter what language, the operating system will have a garbage collection mechanism to recycle excess allocated space to reduce memory. The life cycle of a function begins when it is called. When the function call is completed, the local variables inside the function will be recycled by the recycling mechanism.
Let’s take the above example as an example. When our external function A is called, the local variable i in A will be recycled by the operating system and will not exist. However, when we use a closure, the result will be That's not the case anymore, i will not be recycled. Just imagine, if i is recycled, wouldn't the returned function print undefined?
Why is it not recycled?
When JavaScript executes a function, a scope object is created and the local variables in the function (the formal parameters of the function are also local variables) are saved in it, along with the variables passed into the function. is initialized.
So when A is called, a scope object is created, let's call it Aa, then this Aa should be like this: Aa { i: 5; }; After the A function returns a function , A is executed. The Aa object should have been recycled, but because the returned function uses the attribute i of Aa, the returned function saves a reference to Aa, so Aa will not be recycled.
So by understanding the scope object, you can understand why the local variables of the function will not be recycled immediately when the function call is completed when encountering a closure.
Another example:
function A(age) { var name = 'wind'; var sayHello = function() { console.log('hello, '+name+', you are '+age+' years old!'); }; return sayHello; } var wind = A(20); wind(); // hello, wind, you are 20 years old!
Can you tell what its scope object Ww is?
Ww{ age: 20; name: 'wind'; };
2. Each time an external function is called, a new closure is generated. The previous closures still exist and are independent of each other. Influence.
3. The same closure will retain the last state, and when it is called again, it will be based on the last time.
The scope object generated each time the external function is called is different. You can think of it this way. In the above example, the parameter age you pass in is different each time, so the object generated is different each time.
Every time an external function is called, a new scope object will be generated.
function A() { var num = 42; return function() { console.log(num++); } } var a = A(); a(); // 42 a(); // 43 var b = A(); // 重新调用A(),形成新闭包 b(); // 42
This code allows us to discover two things. First, when we call a(); twice in a row, num will be incremented on the original basis. It means that the same closure will retain the last state, and when it is called again, it will be based on the last time. 2. The result of our b(); is 42, indicating that it is a new closure and is not affected by other closures.
We can think of it this way, just like we blow a soap bubble. Every time I blow it (call an external function), a new soap bubble (closure) will be generated. Multiple soap bubbles can exist at the same time. And the two soap bubbles will not affect each other.
4. Multiple functions existing in external functions "live and die together"
The following three functions are declared at the same time and can all perform operations on the properties (local variables) of the scope object. Access and operations.
var fun1, fun2, fun3; function A() { var num = 42; fun1 = function() { console.log(num); } fun2 = function() { num++; } fun3 = function() { num--; } } A(); fun1(); // 42 fun2(); fun2(); fun1(); // 44 fun3(); fun1(); //43 var old = fun1; A(); fun1(); // 42 old(); // 43 上一个闭包的fun1()
Since functions cannot have multiple return values, I used global variables. Again we can see that a new closure is created the second time we call A().
When a closure encounters a loop variable
When we talk about closure, we have to talk about the situation when the closure encounters a loop variable. See the following code :
function buildArr(arr) { var result = []; for (var i = 0; i < arr.length; i++) { var item = 'item' + i; result.push( function() {console.log(item + ' ' + arr[i])} ); } return result; } var fnlist = buildArr([1,2,3]); fnlist[0](); // item2 undefined fnlist[1](); // item2 undefined fnlist[2](); // item2 undefined
How could this happen? The three outputs we envision should be item0 1, item1 2, item2 3. Why is there three item2 undefined stored in the returned result array?
原来当闭包遇到循环变量时都是循环结束之后统一保存变量值,拿我们上面的例子来说,i是循环变量,当循环全部结束的时候i正好是i++之后的3,而arr[3]是没有值的,所以为undefined,有人会疑惑:为什么item的值是item2,难道不应该是item3吗?注意,在最后一次循环的时候也就是i = 2的时候,item的值为item2,当i++,i = 3循环条件不满足循环结束,此时的item的值已经定下来了,所以此时的arr[i]为arr[3],而item为item2。这样能理解吗?如果我们将代码改成这样那就说得通了:
function buildArr(arr) { var result = []; for (var i = 0; i < arr.length; i++) { result.push( function() {console.log('item' + i + ' ' + arr[i])} ); } return result; } var fnlist = buildArr([1,2,3]); fnlist[1](); // item3 undefined
那么问题来了,如何改正呢?且看代码:
function buildArr(arr) { var result = []; for (var i = 0; i < arr.length; i++) { result.push( (function(n) { return function() { var item = 'item' + n; console.log(item + ' ' + arr[n]); } })(i)); } return result; } var fnlist = buildArr([1,2,3]); fnlist[0](); // item0 1 fnlist[1](); // item1 2 fnlist[2](); // item2 3
我们可以用一个自执行函数将i绑定,这样i的每一个状态都会被存储,答案就和我们预期的一样了。
所以以后在使用闭包的时候遇到循环变量我们要习惯性的想到用自执行函数来绑定它。
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
The above is the detailed content of js in-depth understanding of closures (code attached). For more information, please follow other related articles on the PHP Chinese website!

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Atom editor mac version download
The most popular open source editor
