初见闭包和立即执行函数

时间:2020-03-01 前端爱好者080 人气:0

初见闭包

（1）闭包的概念

1) 但凡内部函数被保存到外部，必定产生闭包

2) 代码说明

function a(){

function b(){

var bbb = 234;

document.write(aaa); //123

}

var aaa = 123;

return b;

}

var glob = 100;

var demo = a();

demo();

（2）闭包导致的问题：

1) 闭包会导致作用域链不释放，造成内存泄漏（占内存空间）

2) 对于上述代码来说就会导致b函数永久存在

（3）闭包的作用：

1) 实现累加器

Html

Javascript

function add(){

var count = 0;

function test(){

count++;

console.log(count);

}

return test;

}

var counter = add();

2) 可以做缓存（存储结构）

function eater(){

var food = ""; //缓存器隐式的存储结构

var obj = {

eat:function (){

console.log('I am eating' + " " + food );

food = "";

push:function(myFood){

food = myFood;

}

return obj;

}

var eater1 = eater();

eater1.push('apple');

eater1.eat(); // I am eating apple

3) 可以实现封装，属性私有化

4) 模块化开发，防止污染全局变量

（4）闭包其他代码说明

代码一

function a(){

var num = 100;

function b(){

num++;

console.log(num);

function c(){

num++;

console.log(num);

}

return c;

}

return b;

}

var demo1 = a();

var demo2 = demo1();

demo2();

代码二

function test(){

var num = 100;

function a(){

num++;

console.log(num);

}

function b(){

num--;

console.log(num);

}

return [a,b];

}

var arr = test();

arr[0](); //101

arr[1](); //100

//a函数和b函数形成的闭包拿到的是test函数的同一个执行上下文(AO)

立即执行函数（为了解决闭包的一系列危害，如：导致作用域链不释放，造成内存泄漏）

（1）概念：此函数没有声明，在一次执行过后即释放，适合做初始化工作

（2）写法：

1） (function () { } ()) w3c建议用这一种

2） (function () { } )()

（3）补充说明：

1）立即执行函数是一个匿名函数，因为

① 立即执行函数是一种表达式

② 而能被执行符号执行的表达式，这个函数的名字就会被忽略

2）如果一个执行函数想要返回数据到外面，因此可以这样写

var 变量名 = (function () { return 数据 } ())

从而这个变量就接收了立即执行函数返回来的数据

3）初始化功能的函数就是只执行一次的函数

4）立即执行函数也有执行上下文

5）只有表达式才能被执行符号执行

① 定义函数的两种方法一种是函数表达式，它可以直接被执行符号执行；另一种是函数声明，它不可以直接被执行符号执行

② function test(){ console.log(‘a’) } test(); test也是一个表达式

③ 给函数声明前面加 +（正）-（负）！&& ||（与运算和或运算需要在前面再加一个表达式，才能计算）（）这些符号会调用隐式类型转换，将函数声明变成函数表达式

6）能被执行符号执行的表达式，这个函数的名字就会被忽略，因此当这个表达式执行后，再次访问这个函数名，就会显示undefined，但是如果是函数名/变量名去执行，那么这个函数体再执行后依旧存在，不会变成undefined

代码说明

① 源代码： ⑤ 我们退回到第③步，如果用函数名/

var demo = function () { 变量名执行，这里用demo执行

console.log('a'); demo()

} a

② 控制台访问demo ⑥ 再次访问demo

ƒ () { f () {

console.log('a'); console.log(‘a’);

} }

③ 源代码执行

var demo = function () {

console.log('a');

}()

④ 再次访问demo

undefined

（4）阿里巴巴经典立即执行函数问题

function test(a,b,c,d){

console.log( a + b + c + d );

}(1,2,3,4)

这个代码不会报错，但是也不会执行，系统会把程序解析为

function test(a,b,c,d){

console.log( a + b + c + d );

}

(1,2,3,4);

加载全部内容