js闭包讲解

Posted 2021-01-12 坏小子之涛声依旧

今日看到之前写的一段js代码，关于导航部分鼠标放上去变类，鼠标离开等效果

 

前端代码

<div class="con12">
			<div class="left">
				<ul id="liu">
					<li class="chang02">长双歧杆菌</li>
					<li class="chang01">短双歧杆菌</li>
					<li class="chang01">乳双歧杆菌</li>
					<li class="chang01">嗜酸乳杆菌</li>
					<li class="chang01">罗伊氏乳杆菌</li>
					<li class="chang01">鼠李糖乳杆菌</li>
				</ul>
			</div>

			<div class="right">

				<div class="show">
					<div class="title">
						<span class="one">长双歧杆菌</span>  <span class="two">Bifidobacterium longum</span>  <span class="three">11.5亿 CFU/小袋</span>
					</div>
					<div class="des">
						可降低肠道 pH，抑制致病菌的生长繁殖，达到调节肠道菌群失调和改善肠道微环境的效果<span class="biao">[7]</span>。
					</div>
					<div class="desimg">
						<img src="img/des01.jpg">
					</div>
				</div>


				<div class="show none">
					<div class="title">
						<span class="one">短双歧杆菌</span>  <span class="two">Bifidobacterium breve</span>  <span class="three">11亿 CFU/小袋</span>
					</div>
					<div class="des">
						拥有较强的抗酸能力与粘附力，黏附在肠道细胞膜上，能有效阻止致病菌的入侵，给宝宝一个健康的肠道<span class="biao">[8,9]</span>。
					</div>
					<div class="desimg">
						<img src="img/duansuangqi.jpg">
					</div>
				</div>


				<div class="show none">
					<div class="title">
						<span class="one">乳酸双歧杆菌</span>  <span class="two">Bifidobacterium lactis</span>  <span class="three">12亿 CFU/小袋</span>
					</div>
					<div class="des">
						乳双歧杆菌能增强宝宝的细胞免疫和体液免疫功能，提高宝宝的免疫力，让宝宝少生病<span class="biao">[10]</span>。
					</div>
					<div class="desimg">
						<img src="img/rusuangqi.jpg">
					</div>
				</div>


				<div class="show none">
					<div class="title">
						<span class="one">鼠李糖乳杆菌</span>  <span class="two">Lactobacillus rhamnosus</span>  <span class="three">6.5亿 CFU/小袋</span>
					</div>
					<div class="des">
						参与宝宝消化道内菌群调节, 排除宝宝体内毒素，维持宝宝肠道健康<span class="biao">[11]</span>。
					</div>
					<div class="desimg">
						<img src="img/shulitang.jpg">
					</div>
				</div>


				<div class="show none">
					<div class="title">
						<span class="one">罗伊氏乳杆菌</span>  <span class="two">Lactobacillus reuteri</span>  <span class="three">1亿 CFU/小袋</span>
					</div>
					<div class="des">
						增加肠道固水物质——短链脂肪酸的含量,软化大便，并且有很强的粘附能力，对改善肠道黏膜免疫功能，提高宝宝免疫力具有积极的作用<span class="biao">[12]</span>。
					</div>
					<div class="desimg">
						<img src="img/luoyishi.jpg">
					</div>
				</div>

				<div class="show none">
					<div class="title">
						<span class="one">嗜酸乳杆菌</span>  <span class="two">Lactobacillus acidophilus</span>  <span class="three">8亿 CFU/小袋</span>
					</div>
					<div class="des">
						发酵后形成乳酸，帮助宝宝消化肠胃内的食物，提高钙、磷、铁的利用率，并且对其他乳杆菌和双歧杆菌在肠道的增殖具有积极作用<span class="biao">[13,14]</span>。
					</div>
					<div class="desimg">
						<img src="img/sishuanru.jpg">
					</div>
				</div>

			</div>
		</div>

　　js代码

window.onload=function(){
	var one = document.getElementById(\'liu\');
	var oPoint = one.getElementsByTagName(\'li\');
	var div = document.getElementsByClassName(\'show\');
	
	var lilen = oPoint.length;
	for (var i = 0; i < lilen; i++) {
		oPoint[i].index = i;
		oPoint[i].onmouseover = function (){
			for (var j = 0; j <lilen; j++) {
				oPoint[j].className = "chang01";
				div[j].className += " none";
            }

            oPoint[this.index].className = "chang02";
            div[this.index].className = "show";
		}
		
	}
}

　　其中，看到

oPoint[i].index = i;
一时之间想不明白，大体好像是关于js的闭包知识，查找资料
https://segmentfault.com/a/1190000002805295