js闭包的理解

本文来源: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 。每次调用其中一个计数器时,通过改变这个变量的值,会改变这个闭包的词法环境。然而在一个闭包内对变量的修改,不会影响到另外一个闭包中的变量。 

加一道闭包笔试题,每次执行打印的是多少?

function fun(n,o){
    console.log(o);
    return{
        fun:function(m){
            return fun(m,n);
        }
    }
}

var a = fun(0);
a.fun(1);
a.fun(2);
a.fun(3);

var b = fun(0).fun(1).fun(2).fun(3);

var c = fun(0).fun(1);

c.fun(2);
c.fun(3);

  

 

 

-------------------------------答案-------------------------------------
a    //undefined 0 0 0
b    //undefined 0 1 2
c    //undefined 0 1 1

posted @ 2019-10-22 12:20  嘉煠  阅读(152)  评论(0编辑  收藏  举报