什么是闭包：
- 闭包是函数和函数声明所在其词法作用域的组合(MDN)
- 函数连同它作用域链上的要找的这个变量，共同构成闭包
看懂之前博客
- 函数在执行的过程中，先从自己内部找变量
- 如果找不到，再从创建当前函数所在的作用域(词法作用域)去找, 以此往上
- 注意找的是变量的当前的状态
列如：
function init() {
var name = xiaohui"; // name 是一个被 init 创建的局部变量
function displayName() { // displayName() 是内部函数,一个闭包
alert(name); // 使用了父函数中声明的变量
}
displayName();
}
init();
这就是一个闭包
函数模型方式
function fn1(){
let i = 1;
return function(){
i+=1;
console.log(i);
}
}
let add=fn1();
add();//2
add();//3
add();//4
对象模型方式
function createNumber(){
let num= 1;
return {
getnum:()=>{
return num;
},
setnum:(value)=>{
num = value;
}
}
}
var n = createNumber();
n.setnum(2);
console.log(n.getnum())
一般情况下使用闭包主要是为了
- 封装数据
- 暂存数据`
案例
理解了下面几个案例，你就能熟练理解运用闭包了
如下代码输出多少？如果想输出3，那如何改造代码？
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = function(){
return i
};
}
console.log( fnArr[3]() ) //10
闭包
var fnArr = [];
for(var i=0 ;i<10;i++){
fnArr[i]=(function(j){
return function(){
return j;
}
}(i));
}
console.log(fnArr[3]());
立即执行函数
var fnArr = [];
for(var i=0;i<10;i++){
( function(i){
fnArr[i]= function(){
return i;
}
}(i))
}
console.log(fnArr[3]());
es6
var fnArr = [];
for(let i = 0;i<10;i++){
fnArr[i]=function(){
return i;
}
}
console.log(fnArr[3]());
封装一个 Car 对象。
var Car = (function(){
var speed = 0;
function set(s){
speed=s;
}
function get(){
return speed;
}
function speedUp(){
speed++;
}
function speedDown(){
speed--;
}
return {
set: set,
get: get,
speedUp: speedUp,
speedDown: speedDown
}
})()
如下代码输出多少？如何连续输出 0,1,2,3,4？
for(var i=0; i<5; i++){
setTimeout(function(){
console.log('delayer:' + i )
}, 0)
} //5 5 5 5 5;
for(var i=0; i<5; i++){
(function(j){
setTimeout(function(){
console.log('delayer:' + j )
}, 0)
}(i))
}
for (var i=0;i<5;i++){
setTimeout((function (j) {
return function(){
console.log('delayer:'+j)
}
}(i))
,0)
}
如下代码输出多少？
function makeCounter() {
var count = 0;
return function() {
return count++
};
}
var counter = makeCounter();
console.log(counter());\\0
console.log(counter());\\1
console.log(counter());\\2
console.log(counter());\\3
var counter2 = makeCounter();
console.log(counter2());\\0
console.log(counter2());\\1
console.log(counter2());\\2
console.log(counter2());\\3
补全代码，实现数组按姓名、年纪、任意字段排序
var users = [
{ name: "John", age: 20, company: "Baidu" },
{ name: "Pete", age: 18, company: "Alibaba" },
{ name: "Ann", age: 19, company: "Tecent" }
]
function byName(v1,v2){
return v1.name>v2.name;
}
function byAge(v1,v2){
return v1.age>v2.age;
}
function byCompany(v1,v2){
return v1.company>v2.company;
}
function byField(field){
return function(v1,v2){
return v1[field]>v2[field]
}
}
console.log(users.sort(byName))
console.log(users.sort(byAge))
console.log(users.sort(byCompany))
console.log(users.sort(byField('age')))
console.log(users.sort(byField('company')))
写一个 sum 函数，实现如下调用方式
function sum(a){
return function(b){
return a+b;
}
}
console.log(sum(1)(2))
