js高级-闭包
function foo(x){
var tmp = 3;
return function(y){ //把一个函数作为返回值,定义时候的作用域
console.log(x+y+(++tmp)) //++tmp先自加再参与表达式运算
}
}
var bar = foo(2) //此时bar指向了匿名函数,匿名函数又指向了 x,tmp两个变量 bar就是一个闭包(匿名函数加x,tmp两个父级变量)
bar(10) //16
bar(20) //27 此时函数执行完成后里面的变量没有回收掉 所以tmp还是4 然后++tmp就是5 x还是2 y就是20 (只要bar没有释放里面的变量就不会回收 。关闭浏览器才会释放)
function d(){
var a = 10;
console.log(a)
}
d(); //执行完成后 a会被回收 浏览器关闭函数会被回收 函数+引用的变量就会形成闭包
闭包的应用
匿名函数自执行
var t = function (a){ //污染全局 尽量不要定义全局变量
console.log(a)
}
t(9);
//尽量少的定义全局变量 例如 jQuery 只定义了 $,jQuery两个
;(function(a){
console.log(a)
})(3)
1、循环注册dom事件
<ul>
<li></li>
<li></li>
</ul>
var lis = document.querySelectorAll('li')
for(var i=0; i<lis.length; i++){
//典型错误
lis[i].onclick = function(){ //事件的方法执行是:当事件触发的时候执行 绑定事件只有点击才执行。 是异步的 当事件触发的时候 i的值为lengh长度了
console.log(i) //变量i是父函数里面的变量
}
//正确
(lis[i].onclick = function(a){ //做成自执行函数来注册事件
console.log(a)
})(i)
}
for(var i = 0; i< 10; i++){ //典型错误
setTimeOut(function(){
console.log(i)
},1000)
}
for(var i = 0; i< 10; i++){ //匿名自执行函数解决
(function(a){
setTimeout(function(){
console.log(a)
},1000)
})(i)
}
js高级-闭包的更多相关文章
- JS高级——闭包
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JS高级——闭包练习
从上篇文章我们知道与浏览器的交互操作如鼠标点击,都会被放入任务队列中,而放入到任务队列中是必须等到主线程的任务都执行完之后才能执行,故而我们有时利用for循环给dom注册事件时候,难以获取for循环中 ...
- JS高级---闭包小案例
闭包小案例 普通的函数 //普通的函数 function f1() { var num = 10; num++; return num; } console.log(f1()); //11 conso ...
- 《Node.js 高级编程》简介与第二章笔记
<Node.js 高级编程> 作者简介 Pedro Teixerra 高产,开源项目程序员 Node 社区活跃成员,Node公司的创始人之一. 10岁开始编程,Visual Basic.C ...
- 理解运用JS的闭包、高阶函数、柯里化
JS的闭包,是一个谈论得比较多的话题了,不过细细想来,有些人还是理不清闭包的概念定义以及相关的特性. 这里就整理一些,做个总结. 一.闭包 1. 闭包的概念 闭包与执行上下文.环境.作用域息息相关 执 ...
- js高级-面向对象继承
一.工厂模式创建对象及优缺点 继承就是把公共的部分抽象出来作为父类,基类.吃饭,跑步等 var a = {}; //批量创建不方便,不能重复设置公共属性的代码 //工厂模式出现了,创建10个Cat对象 ...
- [ JS 进阶 ] 闭包,作用域链,垃圾回收,内存泄露
原网址:https://segmentfault.com/a/1190000002778015 1. 什么是闭包? 来看一些关于闭包的定义: 闭包是指有权访问另一个函数作用域中变量的函数 --< ...
- js高级---js架构
ECMAScript1997 年欧洲计算机制造商协会 39 号技术委员会制定了ECMA-262标准(别名 ECMAScript),而浏览器只是负责实现,ie浏览器实现的结果是jscript,远景浏览器 ...
- JS的闭包、高阶函数、柯里化
本文原链接:https://cloud.tencent.com/developer/article/1326958 https://cloud.tencent.com/developer/articl ...
随机推荐
- 《Linux 性能及调优指南》写在后面的话
感谢飞哥的翻译. 目前飞哥 (http://hi.baidu.com/imlidapeng)的网址已经不能访问了. <Linux 性能及调优指南>这本书的原文地址:http://www.r ...
- Windows Server 2012R2 网络地址转换NAT
一.NAT概述 网络地址转换NAT(Network Address Translation)可以动态改变通过路由器的IP报文的内容(修改报文的源IP地址和/或目的IP地址).离开路由器的报文的源地址或 ...
- Java远程通讯技术及原理分析
在分布式服务框架中,一个最基础的问题就是远程服务是怎么通讯的,在Java领域中有很多可实现远程通讯的技术,例如:RMI.MINA.ESB.Burlap.Hessian.SOAP.EJB和JMS等,这些 ...
- JQ获取选中select 标签的值
Jq://#ses为select 标签的Id$("#ses option:selected").val(); $("#ses option:selected") ...
- 最全spring boot视频系列,你值得拥有
================================== 从零开始学Spring Boot视频 ================================== àSpringBoot ...
- 重识linux-守护进程,系统服务,daemons
重识linux-守护进程,系统服务,daemons 1分类 分为 单独的守护进程 和超级守护进程 2命名 服务的名称被创建之后,被挂上linux使用,通常在服务的名称之后会加上一个d,例如at和cro ...
- 55.1拓展之边框border-width属性。
效果地址:https://scrimba.com/c/cQpDKkSN HTML code: <div class="border1 borders"></div ...
- 28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形
原文地址:https://segmentfault.com/a/1190000014946883 感想:三个平面图形旋转 HTML代码: <!-- penrose: 彭罗斯 --> < ...
- yum centos 修改镜像源
参考:https://blog.csdn.net/sj349781478/article/details/78736873 3.清除yum缓存 yum clean all yum makecache ...
- springboot 端口号
1. 读取端口号 2.多端口运行 2.