原来闭包也可以这么简单

概念篇

闭包介绍

闭包是js开发常的技巧，那么什么是闭包呢？
来自百度百科

闭包就是能够读取其他函数内部变量的函数。
例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。
在本质上，闭包是将函数内部和函数外部连接起来的桥梁

来自菜鸟教程

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。
直观的说就是形成一个不销毁的栈环境。

简而言之：闭包就是一个函数。
稍微具体点：闭包就是能够读取另一个函数内部变量的函数

闭包特点：

让外部访问函数内部变量成为可能
函数变量会常驻在内存中，不会随着函数的结束而自动销毁。
可以避免使用全局变量，防止全局变量污染
会造成内存泄漏（有一块内存空间被长期占用而不被释放）

应用篇

结论：闭包找到的是同一地址中父级函数中对应变量最终的值

参考于闭包，看这一篇就够了——带你看透闭包的本质，百发百中

咱先以菜鸟教程的计数器来谈一哈

例一：

var add = (function () {var counter = 0;return function () {return counter += 1;}
})();
add();  //1
add();  //2
add();  //3

变量 add 指定了函数自我调用的返回值。自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。add变量可以作为一个函数使用。它可以访问函数上一层作用域的计数器。计数器受匿名函数的作用域保护，只能通过 add 方法修改。

例二：

function funA() {var a = 10;  // funA的活动对象之中;return function(){   //匿名函数的活动对象;alert(a);}
}
var b = funA();
b();  //10

例三：

function funA() {var a = 0;function funB(){a++;console.log(a);}return funB;
}
var b = funA();
b();  //1
b();  //2
b();  //3
var b2 = funA();
b2(); //1
b2(); //2

例四：

var i = 0;
function funA(){function funB(){i++;console.log(i);}return funB;
}
var b1 = funA();
var b2 = funA();
b1();   //1
b2();   //2
b1();   //3
b2();   //4

例五：

function fn(){var a = 5;return function(){return  ++a;                                     }
}
console.log(fn()());  //6
console.log(fn()());  //6

例六：

(function() { var m = 0; function getM() { return m; } function seta(val) { m = val; } window.g = getM; window.f = seta;
})();
f(100);
console.log(g());   //100  闭包找到的是同一地址中父级函数中对应变量最终的值

例七：

var add = function(x) { var sum = x; var tmp = function(x) { sum = sum + x; return tmp;    } tmp.toString = function() { return sum; }return tmp;
}
alert(add(1)(2)(3));     //6

例八：

var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){(function(i){lis[i].onclick = function(){console.log(i);};})(i);       //事件处理函数中闭包的写法
}

例九：

function m1(){var x = 1;return function(){console.log(++x);}
}
m1()();   //2
m1()();   //2
var m2 = m1();
m2();   //2
m2();   //3

例十：

var  fn=(function(){var  i=10;function  fn(){console.log(++i);}return   fn;
})()
fn();   //11
fn();   //12

面试篇

var x = 2
var y = {x:3,z:(function(x){this.x *= x;x += 2return function(n) {this.x *= n;x += 3;console.log(x)}})(x)
}
var m = y.z
m(4)    //7
y.z(6)  //10
console.log(x,y.x)  //16 18

原来闭包也可以这么简单相关推荐

闭包的作用和简单案列
闭包的作用和简单案例闭包的定义:闭包就是能够读取其他函数内部变量的函数: 简单的理解为:一个作用域可以访问其他函数内部的局部变量: 常见的方式:一个函数内创建另外一个函数,通过另外一个函数访问这个函 ...
js什么是闭包？简单理解
闭包作用域链和执行上下文理解闭包前,先引入一个概念,作用域链用我自己理解的讲:在一段程序中,程序内的变量.函数等都被串在这条链上,当我们使用这些变量.函数时,程序就会在这条链中搜索,如果没有找到 ...
[javascript] 看知乎学习js闭包
知乎:到底什么是闭包? 寸志: JavaScript 闭包的本质源自两点,词法作用域和函数当作值传递. 词法作用域,就是,按照代码书写时的样子,内部函数可以访问函数外面的变量.引擎通过数据结构和算法表 ...
翻译连载 | JavaScript轻量级函数式编程-第7章: 闭包vs对象 |《你不知道的JS》姊妹篇...
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
【Groovy】集合遍历 ( 调用集合的 every 方法判定集合中的所有元素是否符合闭包规则 | =~ 运算符等价于 contains 函数 | 代码示例 )
文章目录一.调用集合的 every 方法判定集合中的所有元素是否符合闭包规则二.代码示例一.调用集合的 every 方法判定集合中的所有元素是否符合闭包规则集合的 every 方法 , 用于 ...
Python 的闭包和装饰器
翻译: TheLover_Z Part I 原文地址: http://blaag.haard.se/Python-Closures-and-Decorators–Pt–1/ 回想起来,当初我做出了错误 ...
Android application 中使用 provided aar 并没有那么简单
前言首先简单讲一下这个需求的背景,大部分场景下,是没有这个需求的,这个需求出现在插件化中,当一个android插件引用aar中的类的时候,并且这个插件是使用com.android.applicati ...
Scala 闭包详解
Scala 闭包闭包是一个函数,返回值依赖于声明在函数外部的一个或多个变量. 闭包通常来讲可以简单的认为是可以访问一个函数里面局部变量的另外一个函数. 如下面这段匿名的函数: val multipl ...
js中的类、继承、闭包
一.js中的类类:在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法. Javascript是一种基于对象(obje ...
javascript闭包—围观大神如何解释闭包
闭包的概念已经出来很长时间了,网上资源一大把,本着拿来主意的方法来看看. 这一篇文章学习Javascript闭包(Closure) 是大神阮一峰的博文,作者循序渐进,讲的很透彻.下面一一剖析. 1. ...

原来闭包也可以这么简单

概念篇

闭包介绍

闭包特点：

应用篇

例一：

例二：

例三：

例四：

例五：

例六：

例七：

例八：

例九：

例十：

面试篇

原来闭包也可以这么简单相关推荐

最新文章

热门文章