第二话:javascript中闭包的理解
闭包是什么?
通过闭包,子函数得以访问父函数的上下文环境,即使父函数已经结束执行。
OK,我来简单叙述下,先上图。
都知道函数是javascript整个世界,对象是函数,方法是函数,并且js中实质性的面向对象相关也都是函数来实现和延伸,例如:“类”。
window:是指js中window对象,也是js最高一层,因为什么这么说,因为你所有创建的方法和属性其实都在window之内。window中的所有方法,在手动创建的方法中都可以调到。可以仔细想想alert,在任何地方都可以alert,其实alert就是window内部的一个方法。window.alert()。具体参看:JavaScript Window - 浏览器对象模型
回到图上:
那么我创建的每一个全局function其实都是window的方法,所以window把a()和b()包含;但d()和e()呢?他们是局部的。a()包含d(),b()包含e();由此推出下面代码:
function window(){ //虚构出来的,只为说明问题,因为window属于浏览器内置类,所以根本看不到 function a(){ var a = 1; function d(){ var d = 3; alert(a+d); //4 } } function b(){ var b = 1; function e(){ var e = 4; alert(b+e); } } }
其实闭包的概念已经包含在这个函数中,d()中可以访问a()中定义的a变量和window中声明的所有变量和函数,e()中可以访问b()中的b变量和window中声明的所有变量和函数。
完毕。
闭包中最常见的用途是声明事件处理器和匿名空间使用:
声明事件处理器
function a(){ var obj = document.getElementById("text"); obj.onclick = function(){ obj.innerHTML = " hello world!"}; }
绑定到onclick上的函数建立了一个闭包,所以它能访问obj变量。
function a(){ var obj = document.getElementById("text"); obj.onclick = clickHandler; } function clickHandler(){ function(){ obj.innerHTML = " hello world!"}; }
clickHandler并不能访问到obj,因为clickHandler定义在a()外部。
闭包引用可以避免this调用造成的恐慌。
function launcher(element,message){ function openWin(){ alert(message); } window.addEventListener("click",element,false); } launcher("document.getElementById("text")","hello world!");
匿名空间:
在js组件开发之中,如果涉及到无穷多的组件加载,那命名冲突不可避免。
例如:
//组件1 var abc = 5; function TabView(cfg){ this.a = cfg.a; this.b = cfg.b; } TabView.protype = { c:function(){ abc++;}; d:function(){abc--}; } //组件2 var abc = 100; function TreeView(cfg){ this.a = cfg.a; this.b = cfg.b; } TreeView.protype = { c:function(){ abc*=2;}; d:function(){abc/=2;}; }
如果一个项目同时需要加载这两个组件,那么就会出现命名冲突;因此我们需要来避免这种问题,通过采用匿名空间-----闭包的办法;
//组件1 (function (){ var abc = 5; function TabView(cfg){ this.a = cfg.a; this.b = cfg.b; } TabView.protype = { c:function(){ abc++;}; d:function(){abc--}; } window.TabView = TabView; //将TabView类公开(作用域在window下)。除该类以外所有匿名空间内部定义,都对外界不形成干扰; })(); //组件2 (function (){ var abc = 100; function TreeView(cfg){ this.a = cfg.a; this.b = cfg.b; } TreeView.protype = { c:function(){ abc*=2;}; d:function(){abc/=2;}; } window.TreeView = TreeView; //将TabView类公开(作用域在window下)。除该类以外所有匿名空间内部定义,都对外界不形成干扰; })() 外部调用的时候只需: var tabView = new TabView(); var treeView = new TreeView();
ok,细细回味,闭包会带来很多方便……
第二话:javascript中闭包的理解的更多相关文章
- 关于javascript中闭包的理解
闭包就是能够读取其他函数内部变量的函数. 在javascript中,只有函数内部的子函数可以读取局部变量,因此,我理解闭包就是定义在一个函数内部的函数. 例子: var f1 = function() ...
- 对JavaScript中闭包的理解
在前端开发中闭包是一个很重要的知识点,是面试中一定会被问到的内容.之前我对闭包的理解主要是"通过闭包可以在函数外部能访问到函数内部的变量",对闭包运用的也很少,甚至自己写过闭包自己 ...
- 转:对JavaScript中闭包的理解
关于 const let var 总结: 建议使用 let ,而不使用var,如果要声明常量,则用const. ES6(ES2015)出现之前,JavaScript中声明变量只有 ...
- JavaScript中闭包的理解
1.什么是闭包 我个人理解闭包就是函数中嵌套函数,但是嵌套的那个函数必须是返回值,才构成闭包: <!DOCTYPE html> <html> <head> < ...
- 在Javascript中闭包(Closure)
在Javascript中闭包(Closure) 什么是闭包 “官方”的解释是:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. ...
- javascript中 (function(){})();如何理解?
javascript中 (function(){})();如何理解? javascript中: (function(){})()是匿名函数,主要利用函数内的变量作用域,避免产生全局变量,影响整体页面环 ...
- javascript中闭包最简单的简绍
javascript中闭包是什么 JavaScript 变量可以是局部变量或全局变量.私有变量可以用到闭包.闭包就是将函数内部和函数外部连接起来的一座桥梁. 函数的闭包使用场景:比如我们想要一个函数来 ...
- 在JavaScript中闭包的作用和简单的用法
在JavaScript中闭包的作用和简单的用法 一.闭包的简介 作用域链:在js中只有函数有作用域的概念,由于函数内能访问函数外部的数据,而函数外部不能访问函数内部的数据,由上述形成一种作用域访问的链 ...
- Javascript中闭包的个人理解
Javascript的一个特殊点就在于它的闭包和回调特性,这两个特性让初学Javascript的我是云里雾里,至今仍在苦苦摸索与理解.在一番苦思之后,整理了一下资料,将自己的理解思路记录下来,以 ...
随机推荐
- erlang里面中文相关处理
在控制台输出的话 Name = "测试数据", io:format("~ts~n",[Name]). 如果是和客户端通信,假如都是utf8编码 服务器获取的时候 ...
- 手写html表格熟练度练习
table中的colspan和rowspan 经常手写表格时 查半天的两个属性,记下来 <!DOCTYPE html> <html lang="en" > ...
- mac链接linux
连接 : ssh 用户名@主机名 -- ssh -p 22 root@47.98.164.34 上传: scp 要上传的文件名称 用户名@主机名:上传到的路径 下载: scp 用户名@主 ...
- sorl基本原理
索引原理 场景:小时候我们都使用过新华字典,妈妈叫你翻开第38页,找到“坑爹”所在的位置,此时你会怎么查呢?毫无疑问,你的眼睛会从38页的第一个字开始从头至尾地扫描,直到找到“坑爹”二字为止.这种搜索 ...
- Java-Runoob:Java 正则表达式
ylbtech-Java-Runoob:Java 正则表达式 1.返回顶部 1. Java 正则表达式 正则表达式定义了字符串的模式. 正则表达式可以用来搜索.编辑或处理文本. 正则表达式并不仅限于某 ...
- mybatis MySQL返回插入的主键ID,oracle不行
<insertid=“doSomething"parameterType="map"useGeneratedKeys="true"keyProp ...
- py4常用模块
导入模块方式 import 单文件 from dir import file 目录下文件 如果有相同的名称,可以采用别名的方式 from dir import file as rename.file ...
- TIMEQUEST学习之黑金动力(四)
现在知道时序约束主要是FPGA to ic,或者ic to FPGA. 上图可以表示FPGA to IC, IC to FPGA. fpga2ic:fpga2ext 是 fpga 致 ic 信号的走线 ...
- 【翻译】用 Expression Blend 创建酷炫的 Button
原文:Creating “Cool” Buttons with Expression Blend Author: Alex 在本文中,我们将考虑在Expression Blend用几种方法来创建酷炫的 ...
- Cinder Backup备份
cinder 备份提供了三种驱动服务: Ceph,TSM,Swift 其中默认备份驱动服务为swift cinder 驱动服务的配置在cinder.conf文件中 backup_driver=cind ...