Rumah hujung hadapan web tutorial js js闭包有什么用处?js闭包的用法实例(附代码)

js闭包有什么用处?js闭包的用法实例(附代码)

Aug 23, 2018 am 11:38 AM
penutupan js

本篇文章给大家带来的内容是关于js闭包有什么用处?js闭包的用法实例(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

Js语言在函数内部可以直接读取全局变量,但函数外部无法读取函数内的局部变量

<script type="text/javascript">
var n=100;
function parent(){
  alert(n);
}
parent();//100
</script>

<script type="text/javascript">
function parent(){
  var m=50;
}
parent();
alert(m);//报错 m未定义
</script>
Salin selepas log masuk

注:函数内部声明变量时一定要加var,否则就声明了一个全局变量

function parent(){

m=50;

}

parent();

alert(m);//50
Salin selepas log masuk

有时,需要得到函数内部的的局部变量,就需要变通的方法实现利用js变量作用域的特点,如在函数内部定义子函数,对于子函数来说,父函数就是它的全局,子函数可以访问父函数里的变量(对于整个js代码来说又是局部变量)

<script type="text/javascript">
function parent(){
   var m=50;
   function son(){
        alert(m);
   }
   return son;
}
var s=parent();//将结果保存在全局里
s();//50
</script>
Salin selepas log masuk

Parent内部所有局部变量对其子函数来说都是可见的,但其子函数内的局部变量对其父函数是不可见的,这就是js特有的链式作用域结构,子对象会一级一级地向上查找所有父对象的变量,父对象的所有变量对子对象都是可见的,反之不成立!上面的son函数就是闭包。

闭包:函数内部定义函数,连接函数内部和外部的桥梁,闭包的作用有2个:

  • 一是前面提到的读取函数内部的变量,

  • 二是让这些变量的值保存在内存中,实现数据共享

下面是几个闭包的例子

1、匿名函数实现闭包:

<script type="text/javascript">
var cnt=(function(){
    var i=0;
    return function(){
        alert(i);
        i++;
    }
})();
cnt();//0
cnt();//1
cnt();//2
cnt();//3
Salin selepas log masuk

把匿名函数的执行结果(即对里面子函数的声明赋给全局变量cut),i就保存在内存里了执行cut()时就直接从内存取值了,i只有cnt()函数才能调用,直接alert(i)是不行的。

2、向闭包内传递参数:

var cnt=(function(num){
return function(){
    alert(num);
    num++;
  }
})(5);
cnt();//5
cnt();//6
cnt();//7
//当然还可以调用时传参
var cnt=(function(){
    var i=0;
return function(num){
    num+=i;
    alert(num);
    i++;
  }
})();
cnt(1);//1
cnt(2);//3
cnt(3);//5
Salin selepas log masuk

 相关推荐:

js闭包 和 prototype

一分钟理解js闭包_javascript技巧

Atas ialah kandungan terperinci js闭包有什么用处?js闭包的用法实例(附代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Ganti aksara rentetan dalam javascript Ganti aksara rentetan dalam javascript Mar 11, 2025 am 12:07 AM

Ganti aksara rentetan dalam javascript

jQuery mendapatkan padding/margin elemen jQuery mendapatkan padding/margin elemen Mar 01, 2025 am 08:53 AM

jQuery mendapatkan padding/margin elemen

periksa jQuery jika tarikh sah periksa jQuery jika tarikh sah Mar 01, 2025 am 08:51 AM

periksa jQuery jika tarikh sah

10 Tab Accordion JQuery 10 Tab Accordion JQuery Mar 01, 2025 am 01:34 AM

10 Tab Accordion JQuery

10 patut diperiksa plugin jQuery 10 patut diperiksa plugin jQuery Mar 01, 2025 am 01:29 AM

10 patut diperiksa plugin jQuery

Tutorial Persediaan API Carian Google Custom Tutorial Persediaan API Carian Google Custom Mar 04, 2025 am 01:06 AM

Tutorial Persediaan API Carian Google Custom

HTTP Debugging dengan Node dan HTTP-Console HTTP Debugging dengan Node dan HTTP-Console Mar 01, 2025 am 01:37 AM

HTTP Debugging dengan Node dan HTTP-Console

jQuery tambah bar scroll ke div jQuery tambah bar scroll ke div Mar 01, 2025 am 01:30 AM

jQuery tambah bar scroll ke div

See all articles