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 ...
随机推荐
- HTTP请求返回值所代表的含义
一些常见的状态码为: 200 - 服务器成功返回网页(表示请求成功) 404 - 请求的网页不存在(可能是网络的问题,也可能是网页没办法访问不代表网页不存在) 503 - 服务器超时(服务器故障) 下 ...
- angularjs的cache
首先要引入angular-cookies.js插件 angular.module('app').service('cache', ['$cookies', function($cookies){ th ...
- .NET C#获取当前网页地址
摘自:https://www.cnblogs.com/vichin/p/6004249.html 设当前页完整地址是:http://www.jb51.net/aaa/bbb.aspx?id=5& ...
- SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- 【Jmeter自学】Linux环境下Jmeter运行
==================================================================================================== ...
- Win/Lin 双系统时间错误的调整 (转)
Win/Lin 双系统时间错误的调整 http://jingyan.baidu.com/article/154b46317b25ca28ca8f41e8.html | 浏览:1070 | 更新:201 ...
- django之模板系统 --》内容(filter过滤器、tags标签【for、if、with】、母板以及继承、crf_token、注释、组件、静态文件【load static】、get_static_prefix、自定义标签和tag)
常用: Django模板中只需要记两种特殊符号: {{ }}和 {% %} {{ }}表示变量,在模板渲染的时候替换成值,{% %}表示逻辑相关的操作. 变量 {{ 变量名 }} 变量名由字母数字和下 ...
- 自写UiAutomator 调试类
package sms_test; import java.lang.*; import java.util.ArrayList; import java.util.Collection; impor ...
- 关于thinkphp5被入侵后的一些思考
最近一段时间thinkphp5爆出漏洞 request.php中的请求过滤不严 是得web端 可以直接写入一个文件到服务器上 进而可得webshell权限 我的一个客户 就是这样被入侵了 刚开始 ...
- 34.纯 CSS 创作在文本前后穿梭的边框
原文地址: https://segmentfault.com/a/1190000015045700 感想: 动画 + z-index:n ; HTML code: <div class= ...