深入理解 Javascript 之 闭包

2018-08-09 admin

图片描述

一、认识闭包

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

二、闭包的产生

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. 循环

<ul>
    <li id="1">1</li>
    <li id="2">2</li>
    <li id="3">3</li>
  </ul>
  <script>
    for(var i = 1 ; i <= 3; i++) {
      var el = document.getElementById(i);
      el.onclick = function() {
        alert(i);
      }
    }
  </script>

  // 结果是无论点击那个,都是弹出4
// 解决办法
<ul>
    <li id="1">1</li>
    <li id="2">2</li>
    <li id="3">3</li>
  </ul>
  <script>
    for(var i = 1 ; i <= 3; i++) {
      var el = document.getElementById(i);
      el.onclick = (function(id) {
        return function () {
          alert(id);
        }
      })(i);;
    }
  </script>

原文链接:https://segmentfault.com/a/1190000015941887

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37624.html

文章标题:深入理解 Javascript 之 闭包

相关文章
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 &lt;span id=“mt9” class=“sent...
2015-11-12
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
7个让JavaScript变得更好的注意事项
随着浏览器性能提高,伴随着新的HTML5的编程接口的稳步采用,网页上的JavaScript的音量在逐渐增加。然而,一个写得不好的程序编码却拥有着打破整个网站,让用户为之沮丧和驱赶潜在客户的潜力。 开发人员必须使用所有供他们任意使用的工具和技...
2015-11-12
回到顶部