码迷,mamicode.com
首页 > Web开发 > 详细

JS中的闭包

时间:2017-03-11 15:33:03      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:连接   family   问题   性能   nbsp   class   何事   事物   div   

想必JS闭包都再熟悉不过了,老生常谈的问题,但是还是要啰嗦几句

有人想问,什么是闭包?用它来做什么?

那么我告诉你,自己去百度搜??

开个玩笑;闭包就是在函数外边可以读取到函数内部变量,本质上就是将函数内部和函数外部连接起来的一座桥梁。

那么它有哪些用途呢?

其实刚刚已经提到了,就是在函数外部可以读取到函数内部的变量,让变量持久化(变量的值会始终保存在内存中)

闭包的原理和机制

在函数func1内部再定义一个函数func2,将局部变量作为函数func2的返回值,在函数func2的外边(func1的里边)将func2返回,此时执行函数func1()();两次即可得到

其实我个人对于一些文字的描述不太感冒,让我看很多遍可能都看不懂,但是如果给我举例子的话我是极其感兴趣的,那么己所欲,施于人(语言表达不好,硬拽??),我也来讲个案例阐述一下

 

function func1(){
		var num1=20;//局部变量num1
		function func2(){
		  console.log(num1);
                  return   num1;//将num1作为函数func2的函数返回值
	   }
		return func2;将函数func2作为函数func1的返回值,返回的是func2函数
}
    var a=func1()();//func1()得到的是func2这个函数,func1()()得到的就是函数func2的返回值num1或者这样写
   var a=func1();
   console.log(a());
   此时就从func1中拿到了num1

 

  这段代码貌似没有什么难度,但是却实现了想要的到的效果(从func1函数中取出num1的值),此时可能有人不明白,想得到num1很简单啊,直接在函数func1里面返回num1不就能得到了吗,好的下面我们来尝试一下

function func1(){
        var num1=20;    
        return num1;
    }
console.log(func1());
此时这段代码结果确实是得到了20(也就是函数内部的num1)

此时感觉脸火辣辣的热??,尴尬极了。后来又仔细又思索几番,觉得不是这么回事,回头看了看闭包的用途,其中有一条是让变量持久化,什么叫持久化?(动手去查),此时我又要讲个案例了??

function func1(){
        var num1=20;    
        return num1++;
   }
var a=func1;
var b=a();
var c=b();
console.log(a(),b,c);
此时打印的结果都是20

那么问题来了,变量并没有持久化?自加操作没有任何作用,那么有什么办法让这个变量像其它的变量一样,此时闭包又派到用场了,

function func1{
            var num1=20;
            function func2(){
                console.log(num1);
                return num1++;
            }
            return func2;
        }
var a=func1();
var b=a();
var c=b();
console.log(a(),b,c);
此时得到的结果为22,2021,那么显然实现了变量自增的操作

那么实现变量持久化了(也就是保存在内存中了),而不是执行完函数丢掉了

其实说了这么多,闭包的用途确实挺大,但是任何事物都有两面性,有利有弊,闭包也不例外

闭包的缺点就是内存消耗很大,就像刚刚说的,它会使变量始终保存咋内存中,所以不能滥用这个闭包,否则后果网页性能肯定..??

如果接触过作用域的话,那么理解闭包应该更容易些(不过我觉得我讲的还算清楚了??),简单提一下作用域

作用域就是变量与函数的可访问范围,作用域控制着变量与函数的可见性和生命周期

作用域分为两种:全局作用域和局部作用域,顾名思义,全局作用域就是代码中的任何地方都能访问到的对象;局部作用域就是只有自己函数内部才可以访问的对象

好了,再好的记性都不如动手去操练一下,尝试一下以上的代码,基本就差不多了??

 

JS中的闭包

标签:连接   family   问题   性能   nbsp   class   何事   事物   div   

原文地址:http://www.cnblogs.com/lantianhaijiao/p/6534938.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!