美文网首页
JavaScript闭包

JavaScript闭包

作者: Beatrice7 | 来源:发表于2016-03-10 10:35 被阅读60次

阮一峰的博客:http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

创建匿名函数并立即执行

理论上讲,创建一个匿名函数并立刻执行可以这么写:

function (x) { return x * x;}(3); // 9

由于JavaScript语法解析的问题,会报SyntaxError错误,因此需要用括号把整个函数定义括起来:

(function (x) { return x * x }) (3); //9

高阶函数

一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数。如map, reduce,sort,filter。通常情况下,求和的函数是这样定义的

var arr = [1, 2, 3, 4, 5]; 
function sum(arr){
    return arr.reduce(function(x,y){
        return x+y;
    })
}
sum(arr);
console.log(sum(arr)); // 15

函数作为返回值

高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回。某些时候我们不想立刻求结果,而是后面根据需要再求怎么办?可以不返回求和的结果,而是返回求和的函数!

function sum(arr){
     return function(){
        return arr.reduce(function(x,y){
            return x+y;
        })
     }
}
sum(arr)(); //15
console.log(sum(arr)());

实际上,我们就是在原来立刻返回结果的语句的外层又套了一层匿名函数并作为返回值,这样sum返回的是这个匿名函数,当再次调用这个匿名函数的时候,才是返回刚才想立刻返回的结果。我们也可以把这个匿名函数赋给一个变量来实现

function sum(arr){
var result = function(){
return arr.reduce(function(x,y){
return x+y;
})
}
return result;
}
sum(arr)(); //15

## 闭包
在上面例子中,我们在函数`sum`中又定义了函数result,并且,内部函数result可以引用外部函数sum
的参数和局部变量,当sum返回函数result时,相关参数和变量都保存在返回的函数中,这中程序结构就称为**闭包(Closure)**。

function count() {
var arr = [];
for (var i=1; i<=3; i++) {
arr.push(function () {
return i * i;
});
}
return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 16
f2(); // 16
f3(); // 16

**返回闭包时牢记的一点就是:返回函数不要引用任何循环变量,或者后续会发生变化的变量。**

如果一定要引用循环变量怎么办?方法是**再套一层匿名函数并立即执行,用该函数的参数绑定循环变量当前的值,无论该循环变量后续如何更改,已绑定到函数参数的值不变**:

//方法是再创建一个函数,用该函数的参数绑定循环变量当前的值,
//无论该循环变量后续如何更改,已绑定到函数参数的值不变:
function count() {
var arr = [];
for (var i=1; i<=3; i++) {
arr.push((function (n) {
return function(){
return n*n
}
})(i));
}
return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

console.log(f1()) //1
console.log(f2()) //4
console.log(f3()) //9

这里外层套了一层匿名函数,立即执行则相当于又把这层函数给抵消了,那么push的仍然是像我们在原来那个函数中push的函数,只不过这时push的那些函数的参数是我们创建的匿名函数带来的参数了。
我们这个立即执行的匿名函数就好像在原来的for循环和push的function之间加入了一层作用域,这个作用域变成了function () { return i \\* i; }的爹,使得里面的function () { return i * i; }的变量要先去找爹,再去找爷爷,爹中有参数,就不去找爷爷了?。
再来个例子巩固一下:
实现函数 makeClosures,调用之后满足如下条件:
1、返回一个函数数组 result,长度与 arr 相同
2、运行 result 中第 i 个函数,即 `result[i]()`,结果与 `fn(arr[i])` 相同 

var arr = [1, 2, 3, 4, 5];
var square = function (x) { return x * x; };
function makeClosures(arr, fn) {
var result = [];
for(var i = 0; i < arr.length; i++){

}
return result;

}
var funcs = makeClosures(arr, square);
console.log(funcs1); // answer: 4

首先我们肯定是要在for循环中添加内容。尝试1:

for(var i = 0; i < arr.length; i++){
result.push(fn(arr[i]));
}

这肯定是不对的,因为不符合题目要求,人家要返回函数啊,你这样直接result中存储的都是值了,还怎么能调用呢?虽然值是变了的,那是因为fn(arr[i])立即执行了(fn已经是写好的函数square了)。

那好吧,那我们外面加一层函数,然后把这个值通过这个函数返回不就得了么。尝试2:

for(var i = 0; i < arr.length; i++){
var tmp = arr[i]
result.push(function(){
return fn(tmp);
});
);
}
var funcs = makeClosures(arr, square);
// console.log(funcs)
console.log(funcs0); //25
console.log(funcs1); //25
console.log(funcs2); //25

这里就犯了和上面sum的例子的同样的错误,因为当我需要调用的时候,我的i循环变量已经结束循环,此时i=5, 所以输出的都是25了。
疑问:不写`var tmp = arr[i]`直接写成`return fn(arr[i])`为什么不行????

解决方法同理,就是再套一层函数,绑定参数,然后立即执行。这样就把作用域给变了。尝试3:
for(var i = 0; i < arr.length; i++){
     result.push((function(e){
        return function(){
            return fn(e);
        }
     })(arr[i]))
}

var funcs = makeClosures(arr, square);
// console.log(funcs)
console.log(funcs0);
console.log(funcs1);
console.log(funcs2);

这样就搞定了。。。


## 关于作用域
Q1:全局变量会绑定到window上,不同的JavaScript文件如果使用了相同的全局变量,或者定义了相同名字的顶层函数,都会造成命名冲突,并且很难被发现。这与模块的区别???
## 关于参数的作用域?

相关文章

  • JavaScript----闭包

    javascript之闭包 闭包的概念     闭包(closure)是 JavaScript 的一种语法特性。 ...

  • 学习JavaScript闭包和作用域笔记

    JS JavaScript闭包和作用域 闭包 JavaScript高级程序设计中对闭包的定义:闭包是指有权访问另外...

  • javascript中闭包是什么

    javascript中闭包是什么 JavaScript 变量可以是局部变量或全局变量。私有变量可以用到闭包。闭包就...

  • Javascript 闭包

    闭包 (注:所以案例以 javascript 实现) 初识闭包 什么是闭包 MDNClosures are fun...

  • 作用域闭包

    概览 背景知识:JavaScript内存管理、JavaScript作用域。 内容 1 闭包定义 闭包:当函数可以记...

  • JavaScript 作用域

    概览 背景知识:JavaScript内存管理、JavaScript作用域。 内容 1 闭包定义 闭包:当函数可以记...

  • 20170815 前端开发日报

    JavaScript闭包,只学这篇就够了 闭包不是魔法 这篇文章使用一些简单的代码例子来解释JavaScript闭...

  • JavaScript深入理解-闭包(Closure)

    推荐文章:学习Javascript闭包(Closure)- 阮一峰javascript深入理解-从作用域链理解闭包...

  • 闭包

    学习Javascript闭包(Closure)

  • JS之闭包与IIFE

    本篇文章主要讨论了: JavaScript引擎 全局对象 闭包 循环 + 闭包 IIFE + 闭包 1.JavaS...

网友评论

      本文标题:JavaScript闭包

      本文链接:https://www.haomeiwen.com/subject/clttlttx.html