Javascript闭包用法实例分析
来源:互联网 发布:淘宝封号花呗怎么处理 编辑:程序博客网 时间:2024/06/07 05:12
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); // 直接访问,结果为:undefinedconsole.log(person.getName()); // 结果为:defaultconsole.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. 内存泄漏
由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题。
比如:
var person = function () { // 变量作用域为函数内部,外部无法访问 var name = "default"; return { getName: function () { return name; }, setName: function (newName) { name = newName; } }}();console.log(person.name); // 直接访问,结果为:undefinedconsole.log(person.getName()); // 结果为:defaultconsole.log(person.setName("langjt"));console.log(person.getName()); // 结果为:langjt
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现在是两个新的函数,作用是将传入的参数值 (+/‐)1alert(inc(99));//100alert(dec(101));//100 alert(adder(100)(2));//102 alert(adder(2)(100));//102
再比如阿里玉伯的seaJS源码中:
希望本文所述对大家的javascript程序设计有所帮助。
0 0
- Javascript闭包用法实例分析
- javascript闭包实例
- javascript闭包实例
- javascript 闭包分析
- javaScript中with函数用法实例分析
- JavaScript闭包实例详解
- 分析javascript中的闭包
- javascript中的闭包分析
- Javascript函数调用,参数传递,闭包和作用域实例分析
- 闭包实例 -- Javascript语言精粹
- javascript闭包的理解和实例
- javaScript"闭包" - (实例理解)
- javascript闭包的高级用法
- Javascript闭包的几种用法
- Javascript闭包理解与用法
- javascript map用法实例
- 简要分析JavaScript中的“闭包”
- 再谈javascript闭包--Javascript高级用法 ----在Javascript中,什么是闭包(Closure)
- 浅谈css选择器
- 自适应辛普森(近似求积分)
- Ubuntu16.04 搜狗输入法无法显示中文
- HttpServletRequest和HttpServletResponse详解
- grails学习总结
- Javascript闭包用法实例分析
- Unity3D中预制体Prefab的应用
- 下拉加载
- Codeforces Round #410 (Div. 2) D. Mike and distribution(贪心)
- 2017全球机器学习技术大会5月1日前报名享7折早鸟票优惠
- SQLite中使用CTE巧解多级分类的级联查
- SpringMVC的各种参数绑定方式
- 简述 什么是spring MVC
- HDU