JavaScript 精粹 基础 进阶(7)函数和作用域(闭包、作用域)

闭包在JavaScript 中是一个非常重要的概念。

闭包例子

function outer() {
    var loc = 30;
    return loc;
};
console.log(outer()); //30

outer函数是一个函数声明,有一个局部变量loc赋值为30,返回loc

当这个函数调用之后,局部变量就会被释放了,

function outer() {
    var loc = 30;
    return function() {
        return loc;
    };
};
var func = outer();
console.log(func()); //30

这个outer函数有一个loc的局部变量,返回值是一个匿名函数表达式,在这个函数表达式又返回outer函数的loc局部变量,这种情况loc是不会被释放掉的。

调用var func = outer();返回的是一个匿名函数,这个匿名函数里面仍然能够访问到outer()de 局部变量loc,当outer()函数被调用之后,func()这个函数再次调用的时候任然能访问到它外层outer()函数的局部变量loc
这种情况就是我们通常所说的闭包

那么闭包的作用是什么呢?在前端编程里,闭包是非常常见的

闭包无处不在

<body>
<input type="button" value="按钮" id="but">
<script type="text/javascript">
var but = document.getElementById("but");
! function() {
    var loc = 0;
    but.onclick = function() {
        console.log(loc++);
    };
}();
</script>
</body>
Paste_Image.png
<input type="button" value="按钮" id="but">
<script type="text/javascript">
var but = document.getElementById("but");
! function() {
    var loc = "locc";
    but.addEventListener('click', function() {
        console.log(loc);
    }, false);
}();
</script>

比如说我们可能有一些自己的局部变量,或者说我们的函数有一些外函数的变量,我们在做点击事件的时候,这个点击事件可能会用到外层的一些局部变量,有了闭包我们可以在数据的传递上更为灵活。

! function() {
    var loc = "loc";
    var url = "http://www.huanghanlian.com/";
    $.ajax({
        url: url,
        success: function() {
            //do sth
            console.log(loc);
        }
    });
}();

有一个异步的请求,用jq的$.ajax方法也可以在success的回调函数中去用到外层具体的一些变量。

因为闭包的缘故,在最外层匿名函数调用结束后,success的回调函数仍然可以访问外层的局部变量。locurl

闭包-常见错误之循环闭包

document.body.innerHTML = "<div id=a1>aa</div>" + "<div id=a2>bb</div>" + "<div id=a3>cc</div>" + "<div id=a4>dd</div>";
for (var i = 1; i < 4; i++) {
    document.getElementById("a" + i).addEventListener('click', function() {
        console.log(i);//始终都是4
    }, false);
};

这里面在网页上面添加三个元素,通过循环来给这三个元素绑定事件,想当点击第一个元素的时候,输出1点击第二个输出2第三个输出3。实现方式是先循环获取元素,给元素增加点击事件,点击事件里面会输出i的值。

但是上面的代码始终只会输出4,这其实是闭包的原因,addEventListener('click', function() {这里是回调函数}是回调函数,也就是说当点击时回调函数去做你想做的事情, 当我点击的湿乎乎回调函数回去动态的拿到 i的值,这个i的值在整个初始化过程中完成之后实际上i的值就已经是4了,所以始终输出4。

如果想想要实现效果就要用到闭包

document.body.innerHTML = "<div id=a1>aa</div>" + "<div id=a2>bb</div>" + "<div id=a3>cc</div>";
for (var i = 1; i < 4; i++) {
    ! function(i) {
        document.getElementById("a" + i).addEventListener('click', function() {
            console.log(i);//1,2,3
        }, false);
    }(i);
};

这个例子里面在每一层循环的时候,用一个匿名函数而且是立即执行的匿名函数给他包装起来,然后将每一次遍历的1.2.3分别的值去传到这个匿名函数里,然后匿名函数接到这个参数i再放到点击事件中去引用i当我们每次点击事件输出的值i就会取每一个闭包环境下的i。所以这样就能达到效果。

闭包-封装

闭包还有个好处就是可以封装一些变量

(function() {
    var _userId = 23492;
    var _typeId = 'item';
    var expor = {};

    function converter(userId) {
        return +userId;
    };

    expor.getUserId = function() {
        return converter(_userId);
    };

    expor.getTypeId = function() {
        return _typeId;
    };
    window.expor = expor;
}());
console.log(expor.getUserId()); //23492
console.log(expor.getTypeId()); //item
console.log(expor._userId); //undefined
console.log(expor._typeId); //undefined

比如说以上代码,有个立即调用函数,他有自己的函数作用域,在里面定义的局部变量外部是不可以访问到的,最后可以通过window.expor = expor;这样的方式来去把最终想输出的对象输出出去,那么外部就可以通过expor对象上提供的方法,就可以访问到函数里面的对象或变量。

闭包的概念

在计算机科学中,闭包(也称词法闭包或函数闭包)是指一个函数或函数的引用,与一个引用环境绑在一起。这个引用环境是一个存储该函数每个非局部变量(也叫自由变量)的表。

闭包,不同于一般函数,它允许一个函数在立即词法作用域外调用时,仍可访问非本地变量

作用域

全局,函数,eval [作用域]

JavaScript中的作用域,实际上是比较简单的。

全局作用域

var a = 10;
console.log(window.a); //10

在最外层声明变量a,这样就声明了全局作用域下的变量a。

for (var i = 0; i < 4; i++) {
    console.log(i); //0.1.2.3
}
console.log(i); //4

在全局范围内用for循环里面有个vae i=0定义了一个变量i,可能会误解为这个i只能在这个for循环里面可见,对外不可见,实际上这是错误的理解,JavaScript中是没有块级作用域的,也就是说不管是for循环while 循环里面去定义的变量,实际上和在外面定义的变量,也就是for循环所在的外面去定义变量实际上是没有差别的,所以 i在外面也能访问到。

函数作用域

(function() {
    var b = 20;
})();
console.log(b);//test_lt.html:13 Uncaught ReferenceError: b is not defined(…)

上面匿名立即执行函数表达式,在执行的时候声明局部变量b,在函数外面是拿不到的。函数有自己独立的作用域。

eval 作用域

eval("var a=1;");

作用域链

var le3 = 3;

function out() {
    var le = 1;

    function out2() {
        var le2 = 2;
        console.log(le, le2, le3); //1 2 3
    }
    out2()
}
out();

out()函数中有一个内部函数out2()它里面有一个局部变量le2,函数out2()能访问到自己的内部变量le2,也可以在向上访问le变量,也就是所谓的闭包,可以访问外层函数的局部变量,对于函数out2()来讲也叫作它的自由变量,还可以访问最外层的le3变量,也就是全局对象,这个作用域手机从内向外都可以访问的。

function out() {
    var le = 1;
    var func = new Function("var p=0;console.log(p);console.log(le)");
    func();
}
out();
//输出
//0
//Uncaught ReferenceError: le is not defined(…)

如果使用new Function去构造的一个函数,构造器,去调用构造器定义位置所在的变量le的。

利用函数作用域封装

(function() {
    //do sth here
    var a, b;
})();

! function() {
    //do sth here
    var a, b;
}();

利用函数作用域的特性,我们经常看到很多类库,或者代码最外层如果没有模块化的一些工具的话,会在最外层去写一个function这样一个匿名函数,这样的好处就是可以把函数内部的变量变成函数的局部变量,而不是全局变量,这样防止大量的全局变量和其他的一些类库或者其他代码引发冲突,! function() {}()这样的作用其实就是把函数变成函数表达式,而不是函数声明,如果省略掉这个!叹号的话,那么他会理解为函数声明,会被前置处理掉,那么最后留下一个括号或者你省略名字的话,都会报语法错误。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,752评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,100评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,244评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,099评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,210评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,307评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,346评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,133评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,546评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,849评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,019评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,702评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,331评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,030评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,260评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,871评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,898评论 2 351

推荐阅读更多精彩内容