Skip to content

Latest commit

 

History

History
202 lines (158 loc) · 6.71 KB

闭包在什么场合下用.md

File metadata and controls

202 lines (158 loc) · 6.71 KB
Raw

在什么场合下用

  • 1、保护变量；用自运行的匿名函数来实现；
  • 2、协调异步代码；自运行的匿名函数来实现，并且传参进去（异步代码需要用到原来的变量，通过作为函数的参数传进去；）；

　　实例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="div1">
  <p>0000</p>
  <p>1111</p>
  <p>2222</p>
  <p>3333</p>
  <p>4444</p>
</div>
<script>
var oDiv = document.getElementById("div1");
var oPs = oDiv.getElementsByTagName("p");
for (i = 0; i < oPs.length; i++) {
  ;(function (i){
    oPs[i].onclick = function () {
      console.log(i);
    }
  })(i);
}
</script>
</body>
</html>

上面的也可以改造成这样的；[也是闭包的应用]

for (i = 0; i < oPs.length; i++) {
	oPs[i].onclick = function (i) {
		return function(){console.log(i);}
	}(i)
}

高程三上说一个函数里面返回一个函数，这样是才叫闭包；（个人认为闭包是一种机制；是一个封闭的作用域；只有形成封闭作用域都可以叫做闭包的）；上面就是高程上说的标准闭包写法；

但是闭包的性能其实没有自定义属性好；可以用自定义属性来写；下面是用自定义属性的写法来做的；

for (i = 0; i < oPs.length; i++) {
	oPs[i].index=i;
	oPs[i].onclick = function () {
		console.log(this.index);
	}
}
关于作用域/闭包的其它理解；
var name = "china";
var age = 5000;
(function (name, age) {//形参变量也是私有作用域中的私有变量
  name = "zhu";
  age = 17;
  alert("zz");
  console.log(name, age);
})(name, age);//执行函数传递参数值,它只是把全局的name和age的值分别的赋值给我们的形参 ->"执行的时候传递的永远是一个值"
alert("22")
console.log(name, age);//先执行自执行函数，然后再执行此行

在函数里面修改全局的name和age(前提是私有的name和age依然存在)

var name = "china";
var age = 5000;
(function (name, age) {
    name = "zhu";
    age = 17;
    //把全局的也修改为"zhu"、7 ->在私有作用域中通过指定前缀来强行的修改的全局下的值
    window.name = name;
    window.age = age;
})(name, age);
console.log(name, age);//zhu ,17

jQuery部分实现的原理:在私有中定义jQuery,通过window.xxx让其在全局下也可以使用

(function () {
    var jQuery = function () {
      console.log("核心代码");
    };
    window.jQuery = window.$ = jQuery;
})();
jQuery();
$();
闭包用在选项卡等效果上
	var banner = document.getElementById("banner");
	var tip = document.getElementById("tip");
	var oDivs = banner.getElementsByTagName("div");
	var oLis = tip.getElementsByTagName("li");
	//鼠标滑过某一个li,我们让所有的li和所有的div都没有选中的样式(select),然后让当前选中的这个li和对应的div有选中的样式
	
	function changeTab(nIndex) {
	  for (var i = 0; i < oLis.length; i++) {
	  　oLis[i].className = null;
	  　oDivs[i].className = null;
	  }
	  oLis[nIndex].className = "select";
	  oDivs[nIndex].className = "select";
	}

1、传统的循环绑定事件的方式

for (var i = 0; i < oLis.length; i++) {
    oLis[i].onmouseover = function () {
        changeTab(i);
    };
}

　　> 这种方式不能实现我们的效果,为什么? 　　> 我们是循环所有的li,给每一个li都绑定了鼠标滑过的事件->

/*
i=0
oLis[0].onmouseover=function(){changeTab(i);}; 我们绑定事件其实是把匿名函数定义的主体赋值给元素的事件行为 -> oLis[0].onmouseover=xxxfff000;
i=1
oLis[1].onmouseover=function(){changeTab(i);};
...
i=4
oLis[4].onmouseover=function(){changeTab(i);};
i=5
循环结束
*/

当我们手动触发的这些行为的时候,比如触发第一个li的onmouseover,执行第一个绑定的方法:行程一个私有的作用域->形参赋值->预解释->代码执行,遇到了一个变量i,不是自己的私有的,找全局作用域下的i,这个i的值已经变为循环结束后的5,所以不是我们期望的索引值...

2、如何解决这个问题?

[作用域式解决]

当触发onmouseover的时候,全局的i变为了5,我们找全局的肯定不行,但是我可一这样来操作:

在当前私有作用域和全局作用域之间在嵌入一层作用域A,然后让A中有一个私有的变量i,存储的是自己的索引即可

for (var i = 0; i < oLis.length; i++) {
    (function (i) {
        oLis[i].onmouseover = function () {
            changeTab(i);
        };
    })(i);//每一次循环把当前i的值(0,1,2,3,4)赋值给形参i
}

函数执行形成不销毁的私有的作用域的第二种情况:

在一个函数中,给函数外面的DOM元素绑定事件 -> 由于给事件绑定的方法是一个引用数据类型值,而元素不属于这个作用域,而是函数外面的变量,这样也相当于外面的东西占用了函数里面的内存,当前的私有作用域不销毁

for (var i = 0; i < oLis.length; i++) {
    oLis[i].onmouseover = function (i) {
        return function () {
            changeTab(i);
        };
    }(i);
}

弊端:会形成多个不销毁的私有的作用域，占内存

[自定义属性的方式]

自定义属性处理问题是JS中最常用的编程思想

for (var i = 0; i < oLis.length; i++) {
	oLis[i].index = i;//每一次循环把当前li的索引存储到自己的自定义属性index上,后期需要用到索引的时候我们只需要把自定义属性index的值获取到拿来用即可
	oLis[i].onmouseover = function () {
		//this->当前鼠标滑过的这个li
		changeTab(this.index);
	};
}

案例2：用setTimeout实现把p相对上一个p向右移动100px；1秒中只实现一个P的移动；

setTimeout本身是同步的代码，但是setTimeout里面的函数是异步的代码；setTimeout告诉浏览器隔多少秒执行里面的函数；这个函数是脱离执行顺序的；属于异步代码； 代码如下：

var oDiv = document.getElementById("div1");
var oPs = oDiv.getElementsByTagName("p");
for (i = 0; i < oPs.length; i++) {
	(function(i){
		setTimeout(function(){
			oPs[i].style.left=100*i+"px";
		},i*1000)
	})(i);
}

因为定时器里面的函数是异步的，而setTimeout本身是同步的；所以i和里面的i不一致；用一个闭包把他们包起来；然后传i进去；或者直接包住setTimeout里面的函数；

setTimeout((function(i){
	return function(){oPs[i].style.left=100*i+"px";}
})(i),i*1000);