闭包——回调函数

一、闭包

1、作用域

（1）全局作用域：在函数、类的外部声明的变量。具有全局作用域

（2）局部作用域：函数内部声明的变量（包括函数的形参）

（3）块级作用域：在语句块中声明的变量 

2、定义

闭包：在一个函数内部创建另一个函数。把内嵌的函数称为闭包，它可以访问外部函数的局部变量。

function fun(){
    let k = 0;
    function test(){  //test函数就是一个闭包函数
        let t = k + 5;
    }
}

3、闭包的使用场景

（1）用来返回值

function fun(){
    let  name = '小王八';
    //定义闭包
    return function f1(){
        return name;
    };
}
let ft = fun();  //因为fun函数的返回值是f1函数 ft实质是一个函数
let na = ft(); //调用ft函数,实际调用的就是f1函数
console.log(na)

 

var nAdd;
function out(){
    var n = 999;
    nAdd = function(){
        n++;
        console.log(n);
    }
    return function(){
        console.log(n)
    }
}
let getN = out();
 
getN(); //999
nAdd(); //1000
getN(); //1000

（2）函数赋值：在函数内部定义函数表达式

var f2; //定义全局变量f2
 
function fn(){
    let name ='小结巴'
    f2 = function(){  //闭包、将外部函数的name变量作为闭包的返回值 f2是一个函数
        return name;
    }
}
fn(); //必须先调用fn函数，否则f2就不是一个函数
console.log(f2())

（3）函数参数：把闭包作为函数的参数

function fn(){
    let name = '小哑巴';
 
    // 定义闭包
    return function callback(){
        return name;
    }
}
let f1 = fn();  //将fn函数的返回值callback赋给f1
 
function f2(temp){
    console.log(temp());//输出temp函数的返回值,实际调用了闭包callback
}
// 调用f2函数,将f1作为实参传递给temp
f2(f1);

（4）在立即执行函数中使用闭包

// 立即执行函数
(function(){
    let name = '毛栗子'
    let f1 = function(){ //f1是闭包
        return name;
    }
    fn2(f1); //调用fn2函数，将闭包f1作为实参传递给fn2函数
})()
 
function fn2(temp){  //temp是一个形参，接收实参f1
    console.log(temp()); //对temp的调用，实际调用闭包f1
}

（5）在循环中使用闭包

(function fn(){
    for(let i = 1;i<=10;i++){
        (
            function(j){
                setTimeout(function(){
                    console.log(j);
                },j*1000)
            }
        )(i)
    }
})()

（6）将闭包封装到对象中   getter/setter

function fun(){
    let name = '烤红薯'
    setName = function(uname){ //setName是闭包，用来设置外部函数的变量值
        name = uname;
    }
    getName = function(){ //getName也是一个闭包，用来返回外部函数的变量值
        return name;
    }
    //外部fun函数的返回值:将闭包封装到对象中返回
    return {
        setUserName : setName,
        getUserName : getName
    }
}
let obj = fun();  //将fun函数的返回值(对象)赋给obj
console.log('用户名:',obj.getUserName())
obj.setUserName('初雪');
console.log('用户名:',obj.getUserName())

（7）迭代器（执行一次函数往下取一个值）

var arr = ['aa','bb','cc'];
function fn(arr){ //外部函数的返回值是闭包
    let i = 0;
    // 定义闭包：迭代获取数组元素并返回
    return function(){
        return  arr[i++]||'数组已经遍历完成~';
    }
}
let f1 = fn(arr);
console.log(f1());
console.log(f1());
console.log(f1());
console.log(f1());

（8）首次区分(相同的参数，函数不会重复执行)

var fn = (function(){
    var arr = [];  //用来缓存的数组
    return function(val){
        if(arr.indexOf(val)==-1){  //缓存中没有则表示需要执行
            arr.push(val); //将参数添加到缓存数组中
            console.log('函数执行~',arr);
        }else{
            console.log('此次函数不需要执行~');
        }
        console.log('函数已调用完成~，查看数组：',arr);
    }
})();
 
fn(10);
fn(10);
fn(1000);
fn(200);
fn(1000);

注：（1）读代码时需要了解谁是闭包函数 （2）闭包的返回值，外部函数的返回值

二、回调函数

1、定义

将函数B作为实参传递给函数A，那么把函数B称为回调函数，也称为高阶函数。表示某个函数定义完成后并不立即执行，而是在完成某些操作之后再来调用该函数

function B(){} //定义B函数
function A(args){} //定义A函数
A(B) //将函数B作为实参传递给函数A，将函数B称为回调函数

2、使用

（1）先定义回调函数，然后在主调函数里面传递回调函数的函数名

function print(num){
    console.log(num);
}
function add(a,b,callback){  //a、b是普通参数，参数callback对应的是函数
    let s = a + b;
    callback(s);
}
add(10,10,print);//将print函数传递给形参callback。print函数就是回调函数

（2）定义匿名回调函数

function add(a,b,callback){
    let s = a + b;
    callback(s);
}
add(1,2,function(num){ //调用add函数时，给它传递一个匿名函数 (该匿名函数就是1个回调函数)
    console.log(num)
})

3、特点

（1）不会立即执行，在主调函数中执行回调函数时必须带'()'，如果有参数则需要带上参数

（2）回调函数是一个闭包，它可以访问主调函数中的变量

（3）执行前的类型判断，在主调函数中执行回调函数之前，建议先判断回调函数是否需是一个函数

function print(num){
    console.log(num);
}
function add(a,b,callback){ 
    let s = a + b;
    if(typeof callback == 'function'){
        callback(s);
    }else{
        console.log('第三个参数必须是函数~')
    }
}
add(10,10,1);

4、回调函数中this指向的问题

function creatData(callback){  //createData是主调函数，callback是回调函数
    callback();
}
let obj = {
    data : 100,
    tool:function(){
 
        creatData(function(){
            console.log(this,1111); //this指向window对象
        })
    }
}
 
obj.tool();  //window 1111

解决this指向问题

（1）使用箭头函数

function creatData(callback){  //createData是主调函数，callback是回调函数
    callback();
}
let obj = {
    data : 100,
    tool:function(){
 
        creatData(()=>{
            console.log(this,1111); //this指向window对象
        })
    }
}

（2）在调用该函数之前，定义一个变量将this保存起来

function creatData(callback){  //createData是主调函数，callback是回调函数
    callback();
}
let obj = {
    data : 100,
    tool : function(){
        let self = this;
        creatData(function(){
            console.log(self,1111); //this指向window对象
        })
    }
}
obj.tool();

5、JavaScript中使用回调函数的原因

JavaScript是一个事件驱动型的语言，在程序的执行过程中不会因为某一次的响应没有完成而停止程序，而是继续监听后续的事件，如果后续的某个事件被触发，则程序继续执行。