JavaScript——闭包机制
闭包机制是JavaScript的重点和难点,本文希望能帮助大家轻松的学习闭包
一、什么是闭包?
闭包就是可以访问另一个函数作用域中变量的函数。
下面列举出常见的闭包实现方式,以例子讲解闭包概念
function f1(){
var n=;
nAdd=function(){n+=}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); //
nAdd();
result(); //
二、闭包的this指针
f1是f2的父函数,而f2被赋给了一个全局变量(return的值),这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收,这便形成了闭包。
因此,可以这么理解。闭包机制就是,如果A函数引用了另一个函数B的变量,但是B返回后A仍没有返回,仍存在,因为A的引用,所以B的所有局部变量并不会随B退出而注销,会一直存在,直到A注销。此时A就是闭包。
闭包通常在全局环境调用的,所以this通常指向window,具体情况还是需要视执行环境而言,总之this指向执行环境。
若需要闭包的this指向闭包的包含对象,则需要将包含对象的this作为变量传进闭包。
三、使用闭包的注意点
由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。
四、解决一道闭包常见面试题
问题:
function onMyLoad(){
/*
抛出问题:
此题的目的是想每次点击对应目标时弹出对应的数字下标 0~4,但实际是无论点击哪个目标都会弹出数字5
问题所在:
arr 中的每一项的 onclick 均为一个函数实例(Function 对象),这个函数实例也产生了一个闭包域,
这个闭包域引用了外部闭包域的变量,其 function scope 的 closure 对象有个名为 i 的引用,
外部闭包域的私有变量内容发生变化,内部闭包域得到的值自然会发生改变
*/
var arr = document.getElementsByTagName("p");
for(var i = ; i < arr.length;i++){
arr[i].onclick = function(){
alert(i);
}
}
}
解决方法
1、在外面再加一层函数,将i作为函数参数传进来,这样每次保存的是函数内部的变量,与外部i不是同一个内存空间,而每次调用函数都会生成一个局部变量,所以可以保证每次保存的值互不影响。
for(var i = ; i<arr.length;i++){
arr[i].onclick = (function(arg){
return function () {
alert(arg);
}
})(i);
}
2、用ES6新特let,将for循环的var i改成let i,这样当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量。你可能会问,如果每一轮循环的变量i都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。
JavaScript——闭包机制的更多相关文章
- Javascript闭包机制(转)
原文地址:http://www.felixwoo.com/archives/247 参考:http://www.ruanyifeng.com/blog/2009/08/learning_javascr ...
- javascript 闭包内部机制
在初学JavaScript函数式编程的时候,经常会出现令人出乎意料的结果,而原因,大都是由于不理解JavaScript闭包引起的:理解JavaScript的闭包,可以从JavaScript的闭包内部机 ...
- JavaScript闭包的底层运行机制
转自:http://blog.leapoahead.com/2015/09/15/js-closure/ 我研究JavaScript闭包(closure)已经有一段时间了.我之前只是学会了如何使用它们 ...
- javascript 闭包(转)
一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...
- Javascript事件机制兼容性解决方案
本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...
- javascript闭包学习例子
javascript中的闭包个很让人头疼的概念.总结一下 闭包是指有权访问一个函数作用域中的变量的函数.创建闭包最常见的方式,是在一个函数内部创建另一个函数,用return返回出去. 使用闭包可能造成 ...
- JavaScript 闭包整合
初遇闭包感觉很困惑,上网查看了些许介绍,有很多没看懂,就想先对能懂的东西整整 首先觉得要了解闭包,要先对一.JavaScript的变量作用域和作用域链有基本了解 1.变量的作用域分为:全局变量和局部变 ...
- 深入理解JavaScript闭包(closure)
最近在网上查阅了不少javascript闭包(closure)相关的资料,写的大多是非常的学术和专业.对于初学者来说别说理解闭包了,就连文字叙述都很难看懂.撰写此文的目的就是用最通俗的文字揭开Java ...
- 对于 Javascript 闭包理解
一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...
随机推荐
- PAT A1134 Vertex Cover (25 分)——图遍历
A vertex cover of a graph is a set of vertices such that each edge of the graph is incident to at le ...
- jmeter(十一)JDBC Request之Query Type
工作中遇到这样一个问题: 需要准备10W条测试数据,利用jmeter中的JDBC Request向数据库中批量插入这些数据(只要主键不重复就可以,利用函数助手中的Random将主键的ID末尾五位数随机 ...
- MySQL(六)常用语法和数据类型
阅读MySQL语法时,需要注意的规则: ①符号用来指出几个选择中的一个,比如:null | not null表示或者给出null或者给出not null: ②包含在方括号中的关键字或子句(如[like ...
- 快速排序的php实现
再来一个非常高级的排序算法,快速排序...这个算法是很高效的. 快速排序的思路是,找到一个分割点(中枢点 默认是列表第一个值),把原列表分隔成两部分,在分割点左侧的是都比它小的,在它右侧的是都比它大的 ...
- JavaScript 格式化数字 - 转
function number_format(number, decimals, dec_point, thousands_sep,roundtag) { /* * 参数说明: * number:要格 ...
- 微信小程序——获取用户unionId
1.获取code 2.获取openid 3.获取access_token 4.获取unionid
- ubuntu在指定的文件夹下创建python3和python2的虚拟环境
1.用pip安装virtualenv sudo apt-get install python-virtualenv 2.创建python2和python3虚拟环境 2.1 创建python2的虚拟环境 ...
- Mybatis 中 columnPrefix别名的用法
1.映射对应的属性,区分他们分别属于哪些类.(sql书写的时候为什么要将前缀加上(别名),是因为便于它去寻找哪个类的前缀是ANNEX_) 2.例: 如下所示当一个collection 定义了一个co ...
- Nginx 负载均衡的Cache缓存批量清理的操作记录
1)nginx.conf配置 [root@inner-lb01 ~]# cat /data/nginx/conf/nginx.conf user www; worker_processes 8; #e ...
- 20135327郭皓--Linux内核分析第六周 进程的描述和进程的创建
进程的描述和进程的创建 一.进程的描述 操作系统三大功能: 进程管理 内存管理 文件系统 进程描述符task_struct数据结构 task _ struct:为了管理进程,内核必须对每个进程进行清晰 ...