前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >知识总结:四个例子理解闭包//例一//例二//例三//例四

知识总结:四个例子理解闭包//例一//例二//例三//例四

作者头像
牛客网
发布2018-04-28 12:05:29
5280
发布2018-04-28 12:05:29
举报
文章被收录于专栏:牛客网牛客网牛客网

/**

* 闭包原理

* @date   2017-04-10 14:04:17

* @version 1

*/

//理解作用域、作用域链

//内部作用域可以通过作用域链引用外部作用域的变量

// function(){}() functionName() 立即执行函数

//例一

function exp1() {

var a = 1;

var b = function() {

//console.log(0);//exp1函数被调用的时候,0不会输出;b函数被调用时,0才输出。

console.log(a);

};//b是函数,被调用的时候输出才执行,通过作用域链找到a值。

a = a + 3;

return b;

}

var res1 = exp1(); //[function]

res1();//调用函数执行输出,a值已经被修改为4

console.log('------------------------');

//本质:exp1函数已执行完,b函数才被调用。

//例二

function exp2() {

var a = 1;

var b = function() {

console.log(a);

}(); //b是数值,匿名函数立即执行输出a值为1

a = a + 3;

return b;

}

var res2 = exp2(); //1

console.log('------------------------');

//例三

function exp3() {

var a = 1;

var b = function() {

return function(){

console.log(a);

};

}();  //再加一层闭包保持b是函数。外层匿名函数立即执行返回函数,b是函数,被调用的时候输出才执行,通过作用域链找到a值。

a = a + 3;

return b;

}

var res3 = exp3(); //[function]

res3();//调用函数执行输出,a值已经被修改为4

console.log('------------------------');

//例四

function exp4() {

var a = 1;

var b = function(num) {//参数num被赋值为1

return function(){

console.log(num);

};

}(a);//再加一层闭包保持b是函数,外层匿名函数传参立即执行。立即执行外层匿名函数返回函数,b是函数,被调用的时候输出才执行,通过作用域链找到num值。

a = a + 3;

return b;

}

var res4 = exp4(); //[function]

res4();//调用函数执行输出,num值为1

console.log('------------------------');

//拓展

function exp5() {

var b = [];

for (var i = 0; i < 4; i++) {

b[i] = function() {

console.log(i);

};

}

return b;

}

var res5 = exp5();

//[[function],[function],[function],[function]]

res5[1](); //4

console.log('------------------------');

function exp6() {

var b = [];

for (var i = 0; i < 4; i++) {

b[i] = function(num) {

return function(){

console.log(num);

};

}(i);

}

return b;

}

var res6 = exp6();

//[[function],[function],[function],[function]]

res6[1](); //1

本文来源于牛客网

作者:Mr.Apple

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.12.22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • //例一
  • //例二
  • //例三
  • //例四
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档