“约见”面试官系列之常见面试题第二十二篇之函数闭包(建议收藏)

目录

 

1、概念

2、特点

3、闭包的创建:­­­

---------------------------------------------我是容易看懂的分界线-----------------------------------------------

4、闭包的应用场景

结论:闭包找到的是同一地址中父级函数中对应变量最终的值


1、概念

闭包函数:声明在一个函数中的函数,叫做闭包函数。

闭包:内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后。

2、特点

  让外部访问函数内部变量成为可能;

  局部变量会常驻在内存中;

  可以避免使用全局变量,防止全局变量污染;

  会造成内存泄漏(有一块内存空间被长期占用,而不被释放)

3、闭包的创建:­­­

闭包就是可以创建一个独立的环境,每个闭包里面的环境都是独立的,互不干扰。闭包会发生内存泄漏,每次外部函数执行的时 候,外部函数的引用地址不同,都会重新创建一个新的地址。但凡是当前活动对象中有被内部子集引用的数据,那么这个时候,这个数据不删除,保留一根指针给内部活动对象。

闭包内存泄漏为: key = value,key 被删除了 value 常驻内存中; 局部变量闭包升级版(中间引用的变量) => 自由变量;

上面的都是什么鬼,是人话么,能看懂早就看懂了,生气······

不过,答应我,看完例子再回看上面的概念,会理解的更!透!彻!

---------------------------------------------我是容易看懂的分界线-----------------------------------------------

4、闭包的应用场景

结论:闭包找到的是同一地址中父级函数中对应变量最终的值

最终秘诀就这一句话,每个例子请自行带入这个结论!!!!!!!!!!!!!

/* 例子1 */

 
function funA(){

var a = 10; // funA的活动对象之中;

return function(){ //匿名函数的活动对象;

alert(a);

}

}

var b = funA();

b(); //10

/* 例子2 */

function outerFn(){

var i = 0;

function innerFn(){

i++;

console.log(i);

}

return innerFn;

}

var inner = outerFn(); //每次外部函数执行的时候,都会开辟一块内存空间,外部函数的地址不同,都会重新创建一个新的地址

inner();

inner();

inner();

var inner2 = outerFn();

inner2();

inner2();

inner2(); //1 2 3 1 2 3

/* 例子3 */

var i = 0;

function outerFn(){

function innnerFn(){

i++;

console.log(i);

}

return innnerFn;

}

var inner1 = outerFn();

var inner2 = outerFn();

inner1();

inner2();

inner1();

inner2(); //1 2 3 4

/* 例子4 */

function fn(){

var a = 3;

return function(){

return ++a;

}

}

alert(fn()()); //4

alert(fn()()); //4

/* 例子5 */

function outerFn(){

var i = 0;

function innnerFn(){

i++;

console.log(i);

}

return innnerFn;

}

var inner1 = outerFn();

var inner2 = outerFn();

inner1();

inner2();

inner1();

inner2(); //1 1 2 2

/* 例子6 */

(function() {

var m = 0;

function getM() { return m; }

function seta(val) { m = val; }

window.g = getM;

window.f = seta;

})();

f(100);

console.info(g()); //100 闭包找到的是同一地址中父级函数中对应变量最终的值

/* 例子7 */

function a() {

var i = 0;

function b() { alert(++i); }

return b;

}

var c = a();

c(); //1

c(); //2

/* 例子8 */

function f() {

var count = 0;

return function() {

count++;

console.info(count);

}

}

var t1 = f();

t1(); //1

t1(); //2

t1(); //3

/* 例子9 */

var add = function(x) {

var sum = 1;

var tmp = function(x) {

sum = sum + x;

return tmp;

}

tmp.toString = function() {

return sum;

}

return tmp;

}

alert(add(1)(2)(3)); //6

/* 例子10 */

var lis = document.getElementsByTagName("li");

for(var i=0;i<lis.length;i++){

(function(i){

lis[i].onclick = function(){

console.log(i);

};

})(i); //事件处理函数中闭包的写法

}

/* 例子11 */

function m1(){

var x = 1;

return function(){

console.log(++x);

}

}


m1()(); //2

m1()(); //2

m1()(); //2


var m2 = m1();

m2(); //2

m2(); //3

m2(); //4

/* 例子12 */

var fn=(function(){

var i=10;

function fn(){

console.log(++i);

}

return fn;

})()

fn(); //11

fn(); //12

/* 例子13 */


function love1(){

var num = 223;

var me1 = function() {

console.log(num);

}

num++;

return me1;

}

var loveme1 = love1();

loveme1(); //输出224

/* 例子14 */

function fun(n,o) {

console.log(o);

return {

fun:function(m) {

return fun(m,n);

}

};

}

var a = fun(0); //undefined

a.fun(1); //0

a.fun(2); //0

a.fun(3); //0

var b = fun(0).fun(1).fun(2).fun(3); //undefined 0 1 2

var c = fun(0).fun(1);

c.fun(2);

c.fun(3); //undefined 0 1 1

/* 例子15 */

function fn(){

var arr = [];

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

arr[i] = function(){

return i;

}

}

return arr;

}

var list = fn();

for(var i = 0,len = list.length;i < len ; i ++){

console.log(list[i]());

} //5 5 5 5 5

/* 例子16 */

function fn(){

var arr = [];

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

arr[i] = (function(i){

return function (){

return i;

};

})(i);

}

return arr;

}

var list = fn();

for(var i = 0,len = list.length;i < len ; i ++){

console.log(list[i]());

} //0 1 2 3 4

本面试题为前端常考面试题,后续有机会继续完善。我是歌谣,一个沉迷于故事的讲述者。

欢迎一起私信交流。

“睡服“面试官系列之各系列目录汇总(建议学习收藏) 

猜你喜欢

转载自blog.csdn.net/weixin_43392489/article/details/108370816