Javascript闭包简单理解

原文:Javascript闭包简单理解

提到闭包，想必大家都早有耳闻，下面说下我的简单理解。
说实话平时工作中实际手动写闭包的场景并不多，但是项目中用到的第三方框架和组件或多或少用到了闭包。
所以，了解闭包是非常必要的。呵呵...

一、什么是闭包
简而言之，就是能够读取其他函数内部变量的函数。
由于JS变量作用域的特性，外部不能访问内部变量，内部可以外部变量。

二、使用场景
1. 实现私有成员。
2. 保护命名空间，避免污染全局变量。
3. 缓存变量。

先看一个封装的例子：

var person = function () {// 变量作用域为函数内部，外部无法访问var name = "default";return {getName: function () {return name;},setName: function (newName) {name = newName;}}
}();console.log(person.name); // 直接访问，结果为：undefined
console.log(person.getName()); // 结果为：default
console.log(person.setName("langjt"));
console.log(person.getName()); // 结果为：langjt

再看循环中常用闭包解决引用外部变量问题：

var aLi = document.getElementsByTagName('li');
for (var i=0, len=aLi.length; i<len; i++) {aLi[i].onclick = function() {alert(i); // 无论点击哪个<li>元素，弹出的值都为len，表明这里的i和在for之后打印i的值是一样的。
   };
}

使用闭包后：

var aLi = document.getElementsByTagName('li');
for (var i=0, len=aLi.length; i<len; i++) {aLi[i].onclick = (function(i) {return function() {alert(i); // 此时点击<li>元素，就会弹出对应的下标了。
    }})(i);
}

三、注意事项
1. 内存泄漏
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题。
比如：

function foo() {var oDiv = document.getElementById(‘J_DIV’);var id = oDiv.id;oDiv.onclick = function() {// alert(oDiv.id); 这里存在循环引用，IE低版本页面关闭后oDiv仍在内存中。所以尽可能缓存基本类型而不是对象。
     alert(id);}; oDiv = null;
}

2. 变量命名
如果内部函数的变量和外部函数的变量名相同时，那么内部函数再也无法指向外部函数那个同名的变量。
比如：

function foo(num) {return function(num) {console.log(num); }
}
var f = new foo(9);
f(); // undefined

其实上面的用法，专业术语叫函数柯里化(Currying)，就是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。本质上也利用了闭包可以缓存的特性，比如：

var adder = function(num) {return function(y) {return num+y;};
};var inc = adder(1);
var dec = adder(-1);
//inc, dec现在是两个新的函数,作用是将传入的参数值 (+/‐)1
alert(inc(99));//100
alert(dec(101));//100
alert(adder(100)(2));//102
alert(adder(2)(100));//102

再比如阿里玉伯的seaJS源码中：

/*** util-lang.js - The minimal language enhancement*/
function isType(type) {return function(obj) {return {}.toString.call(obj) == "[object " + type + "]"}
}var isObject = isType("Object");
var isString = isType("String");

posted on 2015-01-15 09:06 NET未来之路阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/4225437.html

Javascript闭包简单理解相关推荐

关于Javascript闭包的理解
一.什么是闭包? "官方"的解释是:所谓"闭包",指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 相 ...
JavaScript闭包函数理解
JavaScript闭包一.变量的作用域: 要理解闭包,首先必须理解JavaScript特殊的变量作用域. 变量作用域无非就是两种:全局变量和局部变量. JavaScrip ...
javascript闭包的理解
javascript闭包是javascript的难点,很多人对js闭包不是很理解,我对js闭包一开始也是云里雾里,我刚刚进兴安得力的时候,做的转正试题中就有一个对闭包理解的题目.如何理解javascr ...
javascript闭包简单实例
1 闭包实例下图是一个闭包实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
JavaScript闭包简单应用
闭包定义在JavaScript中,当一个内部函数被其外部函数之外的变量引用时,就形成了一个闭包.简单说,闭包就是能够读取其他函数内部变量的函数. 闭包的作用: 1. 可以读取函数内部的变量 2. 让 ...
对javascript闭包的理解
在 JavaScript 中,闭包是一个让人很难弄懂的概念.ECMAScript 中给闭包的定义是:闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量. 是不是看完 ...
关于Javascript闭包的理解(二)
先看看闭包的科学的定义:闭包是可以包含自由(未绑定)变量的代码块:这些变量不是在这个代码块或者任何全局上下文中定义的,而是在定义代码块的环境中定义."闭包" 一词来源于以下两者的结 ...
浅谈对JavaScript闭包的理解
首先我们先来看一段代码从上面的代码可以看出js都有一个特性特性,局部方法可以访问外部父类方法的属性,也就是说,子类或子方法可以访问父类的资源. 我们再来看一段代码为什么我们打印出来的是undefi ...
深入理解Javascript闭包（一）
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用于.变量作用域包括 ...

Javascript闭包简单理解

Javascript闭包简单理解相关推荐

最新文章

热门文章