个人中心
gpt4 book ai didi

Javascript闭包用法实例分析

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 32 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Javascript闭包用法实例分析由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例分析了Javascript闭包的概念及用法。分享给大家供大家参考。具体如下:

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

1、什么是闭包 。

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

2、使用场景 。

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);
}

  。

3、注意事项 。

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"),

  。

希望本文所述对大家的javascript程序设计有所帮助.

最后此篇关于Javascript闭包用法实例分析的文章就讲到这里了,如果你想了解更多关于Javascript闭包用法实例分析的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

32 4 0
文章推荐： angular中使用路由和$location切换视图
文章推荐： JavaScript中的类与实例实现方法
文章推荐： 微信小程序之支付后调用SDK的异步通知及验证处理订单方法
文章推荐： thinkphp5上传图片及生成缩略图公共方法(分享)
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com