对于js闭包进一步理解
这篇文章给大家分享的内容是关于对js闭包进一步理解，内容很不错，有需要的朋友可以参考一下。
闭包这个概念 自我几个月前开始学习JS开始 我就一直困惑
之前也有所理解 但是后来长时间不用就给忘记了
闭包:通俗的讲 大多数人所接受的就是 一个函数有权利使用另一个函数里的局部变量
我看到了很多的不同之处
用最简单的代码表示
<span style="font-size: 14px;">function out(){<br/><br/>var age=21;<br/><br/>function inner(){<br/> <br/> console.log(age);<br/><br/>}<br/><br/>return inner;<br/><br/>}<br/><br/>var fn=out();<br/> fn(); //22</span>很符合概念
我觉得闭包就是在体现作用域
inner 函数实在 out 函数里面定义地
所以console(age);
就会变量搜索机制,首先在自己(inner)函数作用域里面找,没找到 就去out函数作用域里面找
找到了 然后输出 如果在out里面没有找到的话 会再往更大的作用域找
一直到window的作用域 下级作用域可以向上访问 上级作用域不能向下访问
作用域就是指
{ }
而且JS没有块级作用域
for(var i=0;i<5;i++){
console.log(i);// 1 2 3 4 5
}
cosole.log(i);//5
i 不会因为出了 for 循环就被销毁了
这点要注意
好了 说了一点作用域方面的知识 现在回到了闭包
闭包核心的就是return 看看代码 就知道了
我的理解就是 return 返回的是inner的函数体 还有 inner所能访问的作用域!
所以 inner 在哪里都可以访问到age
例子:
<span style="font-size: 14px;">function test(){<br/> var age=23;<br/> var fn=out();<br/> fn(); //21<br/> <br/> }<br/> <br/> test();//21</span>它得到的是 21 而不是22 因为函数体和作用域一起返回了 那么最近的作用域不就是out函数作用域喽
test 函数里面定义了age也不可能被覆盖滴 因为存在的作用域不同
它返回了 作用域 所以它访问的都是那个作用域里面的变量 跟你的函数现在所在的作用域无关哦
闭包其实是一种现象 就是所有人玩DNF都在刷图卖材料赚钱 这种现象叫搬砖
总结一句话:跟你定义函数作用域有关,跟你执行函数的作用域无关
与this相反 this 是与定义时无关，与执行时有关 比较记忆
所以你如果不能很好的理解闭包
那你就可以像我这样理解 就好了
返回的是函数本身+和函数所能访问的作用域
举一个 大家常用的
闭包Tab栏切换
<span style="font-size: 14px;"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0<span style="font-size: 12px; color: rgb(0, 0, 0);">;}
.box{
width:140px;
height:18px;
position:relative;
padding:6px 20px;
margin:50px auto;
background:#ff6666;
}
.box ul{
list</span>-<span style="font-size: 12px; color: rgb(0, 0, 0);">style:none;
}
.box li{
width:18px;
height:18px;
background:#ff3300;
line</span>-<span style="font-size: 12px; color: rgb(0, 0, 0);">height:18px;
text</span>-<span style="font-size: 12px; color: rgb(0, 0, 0);">align:center; </span><span style="font-size: 12px; color: rgb(0, 0, 255);">float</span><span style="font-size: 12px; color: rgb(0, 0, 0);">:left;
margin</span>-<span style="font-size: 12px; color: rgb(0, 0, 0);">right:5px;
cursor:pointer;
}
.current{
background:#ffccff</span>!<span style="font-size: 12px; color: rgb(0, 0, 0);">important;
} </span></style>
</head>
<body>
<p class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</p>
<script type="text/javascript"> <br/><span style="font-size: 12px; color: rgb(0, 0, 255);">function</span><span style="font-size: 12px; color: rgb(0, 0, 0);"> $(name){ <br/> <br/></span><span style="font-size: 12px; color: rgb(0, 0, 255);">return</span><span style="font-size: 12px; color: rgb(0, 0, 0);"> document.querySelectorAll(name);
} <br/> <br/></span><span style="font-size: 12px; color: rgb(0, 0, 255);">var</span> list=$(".box ul li"<span style="font-size: 12px; color: rgb(0, 0, 0);">); <br/><br/></span><span style="font-size: 12px; color: rgb(0, 0, 255);">var</span> len=<span style="font-size: 12px; color: rgb(0, 0, 0);">list.length; <br/> </span><span style="font-size: 12px; color: rgb(0, 0, 255);">for</span>(<span style="font-size: 12px; color: rgb(0, 0, 255);">var</span> i=0;i<len;i++<span style="font-size: 12px; color: rgb(0, 0, 0);">){
list[i].onmouseover</span>=(<span style="font-size: 12px; color: rgb(0, 0, 255);">function</span><span style="font-size: 12px; color: rgb(0, 0, 0);">(n){
</span><span style="font-size: 12px; color: rgb(0, 0, 255);">return</span> <span style="font-size: 12px; color: rgb(0, 0, 255);">function</span><span style="font-size: 12px; color: rgb(0, 0, 0);">(){ <br/><br/></span><span style="font-size: 12px; color: rgb(0, 0, 255);">for</span>(<span style="font-size: 12px; color: rgb(0, 0, 255);">var</span> j=0;j<len;j++<span style="font-size: 12px; color: rgb(0, 0, 0);">){
list[j].className</span>=""<span style="font-size: 12px; color: rgb(0, 0, 0);">;
}
list[n].className</span>="current"<span style="font-size: 12px; color: rgb(0, 0, 0);">;
}
})(i);
}<br/><br/><br/><br/></span></script>
</body>
</html></span>for循环 每当执行list[i].onmouseover的时候 函数都会立即执行 传入当前的变量i
返回一个函数 这个就是形成了闭包呗 返回函数和函数能够访问到的作用域
每当触发onmouseover的时候 都会执行 返回的那个函数
然后执行代函数里面的for循环 把所有li的className 清空
在执行list[n] 这句是最重要的 这里的n 就是定义onmouseover的时候传入的i
因为当定义的时候 函数立即执行 把 i 传递给了匿名函数 这个 i 就在 匿名函数的作用域里面了
每个onmouseover都是保存着各自的 i
所以当触发onmouseover的时候能够让li访问到之前保存在作用域中的 i
也就实现了 点谁 谁背景颜色变化的需求
相关推荐：
Atas ialah kandungan terperinci 对于js闭包进一步理解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?
Mar 18, 2025 pm 03:12 PM
Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.
Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas?
Mar 18, 2025 pm 03:14 PM
Artikel ini membincangkan strategi untuk mengoptimumkan prestasi JavaScript dalam pelayar, memberi tumpuan kepada mengurangkan masa pelaksanaan dan meminimumkan kesan pada kelajuan beban halaman.
Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan?
Apr 04, 2025 pm 02:42 PM
Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...
Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar?
Mar 18, 2025 pm 03:16 PM
Artikel ini membincangkan debugging JavaScript yang berkesan menggunakan alat pemaju pelayar, memberi tumpuan kepada menetapkan titik putus, menggunakan konsol, dan menganalisis prestasi.
Siapa yang dibayar lebih banyak Python atau JavaScript?
Apr 04, 2025 am 12:09 AM
Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.
Bagaimanakah saya menggunakan peta sumber untuk debug kod JavaScript minified?
Mar 18, 2025 pm 03:17 PM
Artikel ini menerangkan cara menggunakan peta sumber untuk debug JavaScript minifikasi dengan memetakannya kembali ke kod asal. Ia membincangkan membolehkan peta sumber, menetapkan titik putus, dan menggunakan alat seperti Chrome Devtools dan Webpack.
Bermula dengan Chart.js: Pie, Donut, dan Carta Bubble
Mar 15, 2025 am 09:19 AM
Tutorial ini akan menerangkan cara membuat carta pai, cincin, dan gelembung menggunakan carta.js. Sebelum ini, kami telah mempelajari empat jenis carta carta.js: carta baris dan carta bar (tutorial 2), serta carta radar dan carta rantau polar (Tutorial 3). Buat carta pai dan cincin Carta pai dan carta cincin sangat sesuai untuk menunjukkan perkadaran keseluruhan yang dibahagikan kepada bahagian yang berlainan. Sebagai contoh, carta pai boleh digunakan untuk menunjukkan peratusan singa lelaki, singa wanita dan singa muda dalam safari, atau peratusan undi yang diterima oleh calon yang berbeza dalam pilihan raya. Carta pai hanya sesuai untuk membandingkan parameter tunggal atau dataset. Harus diingat bahawa carta pai tidak dapat menarik entiti dengan nilai sifar kerana sudut kipas dalam carta pai bergantung pada saiz berangka titik data. Ini bermaksud mana -mana entiti dengan perkadaran sifar
Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza?
Apr 04, 2025 pm 05:12 PM
Perbincangan mendalam mengenai punca-punca utama perbezaan dalam output konsol.log. Artikel ini akan menganalisis perbezaan hasil output fungsi Console.log dalam sekeping kod dan menerangkan sebab -sebab di belakangnya. � ...
