闭包与回调函数

最新推荐文章于 2024-05-11 10:05:08 发布

。Idea

最新推荐文章于 2024-05-11 10:05:08 发布

阅读量382

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_46672437/article/details/127878055

版权

（1）先定义回调函数，在主调函数中传递回调函数的函数名

（2）定义匿名回调函数

3、回调函数的特点

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

（1）使用箭头函数（外层存在obj对象，故this会指向该对象）

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

(3) 函数劫持也可实现this指向

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

一、闭包

1、作用域

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

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

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

2、什么是闭包？

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

的局部变量

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

3、闭包的使用场景

（1）用来返回值：

function fun(){
    let name = 'woniu'
    //定义闭包
    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
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  str = 'Hello Word';
    let f1 = function(){ //f1是闭包
        return str;
    }
    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);//依次将i传递给闭包
    };
})();

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

function fn (){
    let name = '蜗牛----🐌';
    setName = function(na){ //setName是闭包：用来设置外部函数的变量值
        name = na;
    };

    getName = function(){//getName是闭包：用来返回外部函数的变量值
        return name;
    };
    //外部fun函数的返回值：将闭包封装到对象中返回
    return {
        setUserName : setName,// setUserName为对象的方法
        getUserName : getName
    };
};

let obj = fn();
console.log('用户名:',obj.getUserName());//使用对象返回的方法
obj.setUserName('兔子----🐇');
console.log('用户名:',obj.getUserName());

（7）通过闭包实现迭代

//通过闭包实现迭代
let arr = ['aa','bb','cc']

function fn(temp){//外部函数的返回值是闭包
    let i = 0;

    return function(){//定义闭包：迭代获取数组元素并返回
        return temp[i++] || '数组遍历已经结束';
    };
};

let f1 = fn(arr);
console.log(f1());
console.log(f1());
console.log(f1());
console.log(f1());

注意细节：

（1）搞清楚谁是闭包函数

（2）闭包的返回值、外部函数的返回值

二、回调函数

1、什么是回调函数？

将函数B作为实参传递给函数A，那么把函数B称为回调函数，也称为高阶函数。表示某个定

义完成后并不会立即执行，而是在完成某些操作之后再来调用该函数。

function B(){} ;//定义B函数

function A(args){}; //定义A函数

A(B) ;//调用A函数，将函数B作为实参传递给A函数。将B函数称为回调函数

2、回调函数的使用

（1）先定义回调函数，在主调函数中传递回调函数的函数名

function print(num){
    console.log(num);
}
function add(n1,n2,callback) { //三个参数，n1和n2是普通参数，参数callback对应的是函数
    let s = n1 + n2;
    callback(s);
}
add(12,23,print); //将print函数传递给形参callback。print函数就是回调函数

（2）定义匿名回调函数

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

3、回调函数的特点

（1）不会立即执行：在主调函数中执行回调函数时必须带’()’，

若有参数则需要传递参数

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

（3）执行前的类型判断：

在主调函数中执行回调函数之前，建议判断回调函数是否是函数

判断使用到运算符 typeof

let print = function (num) {
    console.log(num);
};

function add(n1, n2, callback) {
    let s = n1 + n2;

    if(typeof callback == 'function'){
        callback(s);
    }else{
        return false;
        // console.log('第三个参数应该传递函数');
    }

};

//将print传递给形参callback; print就是回调函数
add(10,100,print);

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

function createData(callback){ //createData是主调函数,callback是回调函数
    callback();
};

let obj = {
    data: '我是obj的属性',
    tool: function(){
        createData(function(){
            console.log(this,1111); //this指向window对象.为什么this指向window对象？
        });//因为主调函数的this仍是指向windo
    }
};

obj.tool();   //Window 1111

（1）使用箭头函数（外层存在obj对象，故this会指向该对象）

function createData(callback){ //createData是主调函数,callback是回调函数
    callback();
};
let obj = {
    data: '我是obj的属性',
    tool: function(){
        createData(()=>{
            console.log(this,1111) //this指向obj对象
        });
    }
};
obj.tool();  //{ data: '我是obj的属性', tool: [Function: tool] } 1111

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

function createData(callback){ //createData是主调函数,callback是回调函数
    callback();
};
let obj = {
    data:'我是obj的属性',
    tool: function(){
        let self  = this;  //定义self将this保存起来
        createData(function(){
            console.log("回调函数：",self) //self指向obj对象
        });
    }
};
obj.tool();  //  { data: '我是obj的属性', tool: [Function: tool] } 1111

(3) 函数劫持也可实现this指向

    tool: function(){
        createData(function(){//闭包函数createData调用匿名函数
            console.log(this,11111);//该函数this指向window
        });//bind劫持可改变this指向
    },