码迷,mamicode.com
首页 > Web开发 > 详细

js闭包的理解

时间:2019-10-22 12:43:21      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:参数   asc   highlight   ken   自己   lang   环境   display   string   

本文来源:MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

  闭包:最开始的解释就是说函数套函数,嵌套(内部)函数对其容器(外部)函数是私有的。它自身就形成了一个闭包。

function makeFunc() {
    var name = "Mozilla";
    function displayName() {
        alert(name);
    }
    return displayName;
}

var myFunc = makeFunc();
myFunc();

  makeFunc() 创建了一个局部变量 name 和一个名为 displayName() 的函数。displayName() 是定义在 makeFunc() 里的内部函数,仅在该函数体内可被获取;重点:闭包可以让你从内部函数访问外部函数作用域,所以说makeFunc()就是一个闭包。

     在例子中,myFunc 是执行 makeFunc 时创建的 displayName 函数实例的引用(因为makeFunc() return displayName),而 displayName 实例仍可访问其词法作用域(makeFunc函数的作用域--根据声明变量的位置来确定该变量可被访问的位置 )中的变量,即可以访问到 name 。由此,当 myFunc 被调用时,name 仍可被访问,其值 Mozilla 就被传递到alert中。

 

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5); //add5 = function(y){ return 5 + y};
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

  我们定义了 makeAdder(x) 函数,它接受一个参数 x ,并返回一个新的函数。返回的函数接受一个参数 y,并返回x+y的值

用闭包模拟私有方法  (如何使用闭包来定义公共函数,并令其可以访问私有函数和变量)

var makeCounter = function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }  
};

var Counter1 = makeCounter();
var Counter2 = makeCounter();
console.log(Counter1.value()); /* logs 0 */
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); /* logs 2 */
Counter1.decrement();
console.log(Counter1.value()); /* logs 1 */
console.log(Counter2.value()); /* logs 0 */

  利用闭包实现新添加的属性(方法)--封装新的方法,每调用一个函数,都会有属于自己的环境,各自互不干扰。

  每个闭包都是引用自己词法作用域内的变量 privateCounter 。每次调用其中一个计数器时,通过改变这个变量的值,会改变这个闭包的词法环境。然而在一个闭包内对变量的修改,不会影响到另外一个闭包中的变量。 

js闭包的理解

标签:参数   asc   highlight   ken   自己   lang   环境   display   string   

原文地址:https://www.cnblogs.com/jiayeyuan/p/11719057.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!