JavaScript匿名函数和闭包

最新推荐文章于 2019-08-10 14:31:18 发布
置顶 最新推荐文章于 2019-08-10 14:31:18 发布
阅读量580 收藏 3
点赞数 1
分类专栏： 前端 文章标签： 函数 闭包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gy_u_yg/article/details/72629756
版权

1，把匿名函数赋值给变量

var test = function() {
    return 'guoyu';
};
alert(test);//test是个函数
alert(test());

2，把匿名函数自我执行的返回值赋值给变量

var test = (function() {
    return 'GY';
})();
alert(test);//弹出  GY

3，自我执行，第一个圆括号放匿名函数，第二个括号执行并传参

(function(a, b) {
    alert(a+b);
})(2,5);//直接弹出7

4，自我执匿名函数的传参

alert((function() {
    return 'guoyu';
})());

5，函数里面放一个匿名函数

function test() {
    return function() {
        return 'guoyu';
    };
}
alert(test());//执行test(),结果是一个函数体
alert(test()());//弹出guoyu

var t = test();
alert(t());//弹出guoyu

闭包

闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的常见方式，就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量

1，通过闭包可以返回局部变量

function test() {
    var age = 28;
    return function() {
        return age;
    };
}
alert(test()());//直接弹出 28

2，使用闭包有个优点，同时也是缺点：局部变量驻留内存中，可以避免使用全局变量（全局变量污染导致应用程序的不可预知性，每个模块都可以调用必将引来灾难，推荐使用私有的，封装的局部变量）

使用全局变量进行累加
var age = 20;
function test() {
    age++;
    return age;
}
alert(test());//21
alert(test());//22
如果你把var age = 20;放进test()函数内，那么每次执行都会重新初始化为20，每次弹出的都是21，无论执行多少次！

3，使用匿名函数实现局部变量驻留内存中从而累加

function test() {
    var age = 20;
    return function() {
        age++;
        return age;
    }
}
var t = test();
alert(t());//21
alert(t());//22
alert(t());//23
alert(t());//24
/*如果每次都初始化age = 20；那么每次返回都是21，不能实现累加，因此要避免初始化那一句，只要调用第一个return 语句即可，每次只调用t()即可*/
t = null;//解除引用，等待垃圾回收

循环里的匿名函数的取值问题

function test() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        arr[i] = function() {
            return i;
        };
    }

    //循环执行完毕，i最终是4++，就是5
    return arr;
}

/*
    alert(test());
    打印出5个并列的“function() {return i;}”，
    因为arr数组的每个元素都是一个匿名函数，每个匿名函数都是返回"i",
    并不是返回1，2，3....,因为这个匿名函数是死的，没有执行（自执行）
*/
alert(test()[0]);//弹出“function() {return i;}”

var t = test();

for (var i = 0; i < 5; i++) {
    //alert(t[i]);//数组里面都是一个没有自执行的匿名函数


    //现在让数组里的每个死函数执行起来，但是全都是弹出‘5’
    //因为执行test()里的循环后，i已经为5了，但每个数组里面都存的是个死函数，返回一个死i
    alert(t[i]());
}

如何解决上述的问题呢？

修改1

function test() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        arr[i] = i;//这里不用匿名函数，直接给个i，
    }
    return arr;
}

var t = test();

for (var i = 0; i < 5; i++) {
    alert(t[i]);//依次弹出0,1,2,3,4
}

修改2，通过自我即时执行匿名函数:

//将匿名函数里面的变量驻留到内存感觉像全局变量
function test() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        arr[i] = (function(num) {
            return num;
        })(i);
    }
    return arr;
}

var t = test();

for (var i = 0; i < 5; i++) {
    alert(t[i]);//依次弹出0,1,2,3,4
}

修改3：

function test() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        arr[i] = (function(num) {
            //return num;
            return function() {//这么写就是闭包了，闭包将变量驻留在内存，和前例中累加一个道理
                return num;
            };
        })(i);
    }
    return arr;
}

var t = test();

for (var i = 0; i < 5; i++) {
    //alert(t[i]);这里返回的是5个依次“function() {return num;}”
    alert(t[i]());//依次打印出0，1，2，3，4
}

闭包中的this

var test = {
    getThis: function() {
        return this;
    }
};

alert(test.getThis());//[object Object]

再看看闭包中：

var test = {
    getThis: function() {
        return function() {//这么写就是闭包了
            return this;
        };
    }
};

alert(test.getThis()());//[object Window]

结论：this 对象在运行时基于函数的执行环境绑定的，如果this在全局范围就是widow，如果在对象内部就指向这个对象。而闭包在运行时指向window的，因为闭包不属于这个对象的属性或方法，再看下面

var user = 'The Window';
var box = {
    user:'The Box',
    getUser: function() {
        //return this.user;
        return function() {//这么写就是闭包了
            return this.user;
        };
    }
};

alert(box.getUser()());//The Window

那么有的同学想问了，怎么才能让它弹出 The box呢？
方法有两个：对象冒充，变量保存_this

var user = 'The Window';
var box = {
    user:'The Box',
    getUser: function() {//这个地方要冒充一下
        return function() {
            return this.user;
        };
    }
};

alert(box.getUser().call(box));//The Box
var user = 'The Window';
var box = {
    user:'The Box',
    getUser: function() {
        var _this = this;//保存到临时变量
        return function() {
            return _this.user;
        };
    }
};

alert(box.getUser()());//The Box

模仿块级作用域，for ，if 等块级里的东西封装起来，变量私有化，可以保护数据，防止泄露，js没有私有作用域这个概念

function test() {
    for(var i = 0; i < 5; i++) {//块级作用域，可惜JS没这个东西

    }
    var i;//重新声明也不影响
    alert(i);//即使超出for块级，依旧打印出5，说明js没有块级作用域这个概念
}
test();

开始使用块级作用域，也就是出了if ， for等块，里面的i就不再起效，方法就是包含自我执行的匿名函数，就可以实现私有作用域

function test() {
    (function() {
        for (var i = 0; i < 5; i++) {//包含自我执行的匿名函数，就可以实现私有作用域
            alert(i);
        }
    })();

    alert(i);
    //这里i就不认识了，相当于没定义i，i被销毁了，后面继续定义i和上面的i没任何关系，防止污染
}
test();
(function() {
    var age = 20;
    alert(age);
})();
alert(age);//报错，undefined
//这样可以全局变量私有化，防止污染

私有变量（外部不可访问）

function test() {
    var age = 20; //私有变量
}
function Test() {
    this.age = 20;//属性：公有的，外部可访问
    this.run = function() {//方法：公有的
        return 'is running...';
    };
}


var t = new Test();
alert(t.age);
alert(t.run());
function Test() {
    var age = 20;  //私有变量
    function run() {//私有函数
        return ' is running...';
    }

    this.publicGo = function() { //对外可见的公共接口，特权方法
        return age + run();
    };
}

var t = new Test();
alert(t.publicGo());
//20 is running...私有变量，私有函数，通过公共接口被访问
//把一些细节封装起来，通过一些接口去访问
GY_U_YG
关注
专栏目录
JavaScript函数进阶(闭包函数，嵌套和递归，回调函数，匿名函数，箭头函数)
2301_77135626的博客
03-24 647
函数进阶
匿名函数和闭包
weixin_30533797的博客
07-15 108
sub {} 是匿名函数的语法,匿名函数是引用 [root@wx03 1215]# cat a1.pl use Data::Dumper; my $a= sub {return 'aa'}; print $a; print "\n"; print Dumper($a); print &$a; [root@wx03 1215]# perl a1.pl CODE(0x111...
匿名函数与闭包
weixin_33728708的博客
07-13 86
2019独角兽企业重金招聘Python工程师标准>>> ...
Javascript 匿名函数与闭包
JeamKing的专栏
05-27 2241
Javascript 匿名函数与闭包一、函数的几种定义1、函数关键字(function) 语句      function func1(){         alert("func1");      }      func1();2、函数直接量(Function Literals)      varfunc2 = function(){         alert("func2");      }      func2();虽然函数直接量创建的是未命名函数
详解JavaScript匿名函数和闭包
10-15
JavaScript是一种广泛应用于前端开发的脚本语言，其中匿名函数和闭包是JavaScript编程中非常重要的概念。通过理解这两者的工作原理和使用方法，可以极大地提升编程能力和代码的模块化、封装化程度。 首先来看匿名...
JavaScript 匿名函数和闭包介绍
10-24
在讨论JavaScript编程语言时，匿名函数和闭包是两个重要的概念，它们在函数式编程和模块化代码设计中扮演着核心角色。匿名函数是没有具体名称的函数，它们可以是独立的，也可以是表达式的一部分，通常用于定义临时...
javascript笔记之匿名函数和闭包
12-10
JavaScript中的匿名函数和闭包是两个非常重要的概念，它们在函数式编程和模块化开发中起着关键作用。 首先，让我们来理解匿名函数。匿名函数，顾名思义，是没有名称的函数。在JavaScript中，我们可以直接定义一个不...
JS中的匿名函数和闭包
yihuoZhou的博客
02-04 622
JS中的匿名函数和闭包
JavaScript之匿名函数与闭包
Danie_wu的博客
01-25 265
一、匿名函数   匿名函数就是没有名字的函数， 函数的定义大致分为三种方式： 第一种：普通函数 function f1(){ return 'Danie_wu'; }
匿名函数、闭包
忘川的博客
08-10 136
1、匿名函数 匿名函数，顾名思义就是不指定函数名的函数，匿名函数的优点为可以节约内存，一个函数只会使用一次，用完了就自动释放，比如回调、自调。 （1）、回调函数 将函数作为参数传递给另一个函数去调用 arr.sort(function(a,b){return a-b}) str.replace(/reg/g,function(kw...){return...}) （2）、自调函数 创...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值