深入理解 Javascript 之闭包

everfly 发布于2019-08-23 10:51 / 1452人阅读

摘要：闭包一认识闭包闭包是一种特殊的对象。它由两部分构成函数，以及创建该函数的环境包含自由变量。环境由闭包创建时在作用域中的任何局部变量组成。创建闭包最常见方式，就是在一个函数内部创建另一个函数。

闭包

一、认识闭包

闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境(包含自由变量)。环境由闭包创建时在作用域中的任何局部变量组成。

二、闭包的产生

function f() {
  var a = 2;
  var b = 3;
  function g(){
    console.log(a);
  }  
  g();
}
f();

这就形成了一个闭包，函数g以及其所在的环境以及其中的自由变量就组成了一个闭包。

创建闭包最常见方式，就是在一个函数内部创建另一个函数。下面例子中的 closure 也是一个闭包：

function func(){
  var a = 1,b = 2;
  
  function closure(){
    return a+b;
  }
  return closure;
}

下面也是一个闭包

function f1() {
  var a = 10;
  var b = 20;
  return function g() {
    console.log(a);
  }
}

var result = f1;
result()(); // 10

三、闭包的好处

实例 1 累加【减少全局变量个数】

function add () {
  var a  = 0;
  return function () {
    a++;
    alert(a);
  }
}

var result = add();
result(); // 1
result(); // 2

实例 2 【减少传递参数的个数】

function callFac(base) {
  return function (max) {
    var total = 0;
    for(var i = 1; i <= max; i++) {
      total+=i;
    }
    return total + base;
  }
}

var result = callFac(2);
result(3); // 8

实例 2 【封装】

(function () {
  var a = 0;
  function getM() {
    rerurn a;
  }
  function setM(val) {
    a = val;
  }
  window.g = getM;
  window.s = setM;
})();

s(3);

三、闭包的注意点

1、对捕获的变量只是个引用，不是复制

function f() {
  var num = 0;
  function g () {
    alert(num); // 这里使用的是引用
  }
  num ++;
  g(); // 在调用执行之前就已经加 1了
} 
f();

2、每调用一次父函数，就会产生一个新的闭包

function f() {
  var num = 1;
  return function () {
    num++;
    alert(num);
  }
}

var result1 = f();
result1(); // 2
result1(); // 3

var result2 = f();
result2(); // 2
result2(); // 3

3. 循环


    1
    2
    3
  
  

  // 结果是无论点击那个，都是弹出4

// 解决办法

    1
    2
    3

GPU云服务器云服务器深入理解webrtc之aec 深入理解javascript js闭包的理解深入理解系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96752.html

【进阶2-2期】JavaScript深入之从作用域链理解闭包

摘要：使用上一篇文章的例子来说明下自由变量进阶期深入浅出图解作用域链和闭包访问外部的今天是今天是其中既不是参数，也不是局部变量，所以是自由变量。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第二期，本周的主题是作用域闭包，今天是第7天。本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计...

simpleapples 2019-08-23 13:47 评论0 收藏0
【进阶2-3期】JavaScript深入之闭包面试题解

摘要：闭包面试题解由于作用域链机制的影响，闭包只能取得内部函数的最后一个值，这引起的一个副作用就是如果内部函数在一个循环中，那么变量的值始终为最后一个值。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第二期，本周的主题是作用域闭包，今天是第8天。本计划一共28期，每期重点攻克一个面试重难点，如果你还不了...

alanoddsoff 2019-08-23 13:47 评论0 收藏0
JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0
深入浅出Javascript：面向对象之闭包

摘要：理解闭包概念闭包是指有权访问另一个函数作用域中的变量的函数。闭包在执行后，仍然可以访问内部的，因为将的内的活动对象添加到了的作用域链。闭包的应用监听事件事件错误的使用循环使用闭包封装函数，便于使用私有变量。理解闭包概念闭包是指有权访问另一个函数作用域中的变量的函数。函数式闭包（在内部保存数据和对外部无副作用）创建方法在一个函数内部创建另一个函数（闭包）原理普通函数：...

instein 2019-08-19 18:12 评论0 收藏0
【进阶1-4期】JavaScript深入之带你走进内存机制

摘要：引擎对堆内存中的对象进行分代管理新生代存活周期较短的对象，如临时变量字符串等。内存泄漏对于持续运行的服务进程，必须及时释放不再用到的内存。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第一期，本周的主题是调用堆栈，今天是第4天。本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计划...

不知名网友 2019-08-23 13:47 评论0 收藏0