关注我 么么哒

【js】闭包问题

  • 作者:smile
  • 学无止境
  • 时间:Tue May 19 2020 17:30:24 GMT+0800 (China Standard Time)
  • 63人已阅读
简介 闭包概念与常见案例汇总

概念篇

闭包介绍

闭包是js开发常的技巧,那么什么是闭包呢?

来自百度百科

闭包就是能够读取其他函数内部变量的函数。例如在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。

来自菜鸟教程

闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。

简而言之:闭包就是一个函数。

稍微具体点就是:闭包就是能够读取另一个函数内部变量的函数

 闭包特点:

  1. 让外部访问函数内部变量成为可能
  2. 函数变量会常驻在内存中,不会随着函数的结束而自动销毁。
  3. 可以避免使用全局变量,防止全局变量污染
  4. 会造成内存泄漏(有一块内存空间被长期占用而不被释放)

应用篇

结论:闭包找到的是同一地址中父级函数中对应变量最终的值

参考于闭包,看这一篇就够了——带你看透闭包的本质,百发百中

例一:

var add = (function () {
    var counter = 0;
    return function () {
    	return counter += 1;
    }
})();
add();	//1
add();	//2
add();	//3

例二:

function funA() {
  var a = 10;  // funA的活动对象之中;
  return function(){   //匿名函数的活动对象;
        alert(a);
  }
}
var b = funA();
b();  //10

例三:

function funA() {
  var a = 0;
  function funB(){
  	a++;
  	console.log(a);
  }
  return funB;
}
var b = funA();
b();  //1
b();  //2
b();  //3
var b2 = funA();
b2(); //1
b2(); //2

例四:

var i = 0;
function funA(){
  function funB(){
       i++;
       console.log(i);
  }
  return funB;
}
var b1 = funA();
var b2 = funA();
b1();	//1
b2();	//2
b1();	//3
b2();   //4

例五:

function fn(){
	var a = 5;
	return function(){
		return  ++a;                                     
	}
}
console.log(fn()());  //6
console.log(fn()());  //6    

例六:

(function() { 
  var m = 0; 
  function getM() { return m; } 
  function seta(val) { m = val; } 
  window.g = getM; 
  window.f = seta; 
})(); 
f(100);
console.log(g());   //100  闭包找到的是同一地址中父级函数中对应变量最终的值

例七:

var add = function(x) { 
  var sum = x; 
  var tmp = function(x) { 
      sum = sum + x; 
      return tmp;    
  } 
  tmp.toString = function() { 
      return sum; 
  }
  return tmp; 
} 
alert(add(1)(2)(3));     //6

例八:

var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
  (function(i){
      lis[i].onclick = function(){
           console.log(i);
      };
  })(i);       //事件处理函数中闭包的写法
}  

例九:

function m1(){
     var x = 1;
     return function(){
          console.log(++x);
     }
}
m1()();   //2
m1()();   //2
var m2 = m1();
m2();   //2
m2();   //3

例十:

var  fn=(function(){
   var  i=10;
   function  fn(){
      console.log(++i);
   }
   return   fn;
})() 
fn();   //11
fn();   //12

面试篇

题一:

var x = 2
var y = {
    x:3,
    z:(function(x){
        this.x *= x;
        x += 2
        return function(n) {
            this.x *= n;
            x += 3;
            console.log(x)
        }
    })(x)
}
var m = y.z
m(4)	//7
y.z(6)	//10
console.log(x,y.x)	//16 18
 

文章评论