js闭包函数

JavaScript018

js闭包函数,第1张

写这个文章也是为了回顾下闭包的只是点，其实许多前端对闭包都有点一知半解，包括我自己也是。

闭包函数：声明在一个函数中的函数，叫做闭包函数。

闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。其实闭包在我看来就是变量作用域的。

let c = test()其实就是将test函数运行的结果赋值给c，其返回的是d方法

执行后的结果是30，因为正常来说a和b其实是局部变量，只作用于test函数。而c()的运行环境并没有变量a和b，其实这就是b包。由于在javascript中，只有函数内部的子函数才能读取局部变量，所以说，闭包可以简单理解成“定义在一个函数内部的函数“。

所以，在本质上， 闭包是将函数内部和函数外部连接起来的桥梁 。

1、是前面提到的 可以读取函数内部的变量

2、是 让这些变量的值始终保持在内存中 ，不会在调用后被自动清除。

闭包的注意事项：

1、由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。 解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2、闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

在网上看到了一道练习题，跟this指向也有关系，可以看下

var name = "The Window"

var object = {

name : "My Object",

getNameFunc : function(){

return function(){

return this.name

}

}

}

alert(object.getNameFunc()())

js拖拽

采用简单的闭包实现方式

代码如下:

/**

* Created with JetBrains WebStorm

* User: lsj

* Date:

* Time: 下午 :

* To change this template use File | Settings | File Templates

*/

var dragmanager=(function()

{

//标识移动元素z轴坐标

var index_z=

//当前的拖拽元素

var drganow

//移动标识符号

var dragbegin=false

//鼠标点击时距离div左边距离

var relativex=

//鼠标点击时距离div上边距离

var relativey=

//标识鼠标是否移出

var isout=false

return {

/**

* 为document绑定鼠标提起事件 主要防止鼠标移动过快跳出el区域

*/

bingDocOnMouseUp:function()

{

//注册全局的onmouseup事件 主要防止鼠标移动过快导致鼠标和el不同步

document onmouseup=function(e)

{

var ev = window event || e

if(isout &&dragbegin)

{

//改变div的相对位置

drganow style left= (ev clientX relativex)+ px

drganow style top=(ev clientY relativey)+ px

drganow style cursor= normal

dragbegin=false

isout=false

}

}

}

/**

* 将注入的元素绑定事件

* @param el

*/

registerElementEv:function(element)

{

element onmousedown=function(e)

{

var ev = window event || e

var clientx=ev clientX

var clienty= ev clientY

var left= parseInt(this style left substring( this style left indexOf("p")))

var top= parseInt(this style top substring( this style top indexOf("p")))

relativex=clientx left

relativey=clienty top

index_z++

this style zIndex=index_z

drganow=this

dragbegin=true

}

element onmousemove=function(e)

{

var ev = window event || e

//开始拖拽

if(dragbegin)

{

//改变div的相对位置

this style left= (ev clientX relativex)+ px

this style top=(ev clientY relativey)+ px

this style cursor= move

}

}

element onmouseout=function(e)

{

isout=true

}

element onmouseup=function(e)

{

var ev = window event || e

if(dragbegin)

{

//改变div的相对位置

drganow style left= (ev clientX relativex)+ px

drganow style top=(ev clientY relativey)+ px

drganow style cursor= normal

dragbegin=false

}

}

}

}

})()

采用闭包的形式实现 方便后期的维护 将移动过程所需的变量全部转移进gridmanager里面

拖拽过程中 鼠标移动过快导致移动元素跟不上鼠标的移动 所以要注册document oumouseup事件 该事件的开关是有移动元素的onmouseout事件触发的

lishixinzhi/Article/program/Java/JSP/201311/20315