回调函数

正确理解回调函数 - 小记

示例

setTimeout(() => {
    console.log('定时器函数');
})

document.addEventListener('click', () => { 
    console.log('事件回调函数');
})

Promise

ES6很多方法

...

我们发现，在js中，我们总是在潜移默化的使用各类回调函数，并且感觉很好用，但是正常开发中，我们去封装函数的时候，通常不会去想到要给函数传一个callback当参数

举个例子

1. 首先有一组数据

// 简单示例理解
// 有一组狗的信息
const DogInfoList = [
    {
        name: '小白',
        age: 2,
        color: '白色',
        agent: '雄性',
    },
    {
        name: '小黑',
        age: 3,
        color: '黑色',
        agent: '雄性',
    },
    {
        name: '小黄',
        age: 1,
        color: '黄色',
        agent: '雌性',
    },
    {
        name: '旺旺',
        age: 4,
        color: '花色',
        agent: '雄性',
    },
    {
        name: '富贵',
        age: 1,
        color: '黑色',
        agent: '雌性',
    },
]

2. 我想要拿到其中部分条件下的信息数据

练气期：直接写逻辑

// 我想要拿到其中所有黑色狗的信息
const blackDogInfoList = [];
for (let i = 0; i < DogInfoList.length; i++) {
   if (DogInfoList[i].color === '黑色') {
       blackDogInfoList.push(DogInfoList[i]);
    }
}


// 我想要拿到其中所有雌性狗的信息
const femaleDogInfoList = [];
for (let i = 0; i < DogInfoList.length; i++) {
    if (DogInfoList[i].agent === '雌性') {
        femaleDogInfoList.push(DogInfoList[i]);
    }
}

3. 同样的数据获取

筑基期：封装函数，同样条件下可直接复用

// 我想要拿到其中所有黑色狗的信息
function getBlackDogInfo() {
    const blackDogInfoList = [];
    for (let i = 0; i < DogInfoList.length; i++) {
        if (DogInfoList[i].color === '黑色') {
            blackDogInfoList.push(DogInfoList[i]);
        }
    }
    return blackDogInfoList;
}


// 我想要拿到其中所有雌性狗的信息
function getFemaleDogInfo() {
    const femaleDogInfoList = [];
    for (let i = 0; i < DogInfoList.length; i++) {
        if (DogInfoList[i].agent === '雌性') {
            femaleDogInfoList.push(DogInfoList[i]);
        }
    }
    return femaleDogInfoList;
}

4. 深层次封装

金丹期：回调函数

这样来看，getDogInfo函数 不就是 ES6 filter 函数吗

// 我们发现，每次都会出现重复的代码  有通用的遍历逻辑  & 不同的条件判断
// 通用的遍历逻辑我们将它抽成公共函数
// 不同的条件判断我们当做参数传递   但是这个参数我们怎么传递呢？
// 我们可以传递一个函数  这个函数就是条件判断的逻辑
// 这个函数我们称之为回调函数

function getDogInfo(conditionCallback) {
    const dogInfoList = [];
    for (let i = 0; i < DogInfoList.length; i++) {
        if (conditionCallback(DogInfoList[i])) {
            dogInfoList.push(DogInfoList[i]);
        }
    }
    return dogInfoList;
}

getDogInfo((dogInfo) => {
    return dogInfo.color === '黑色';
})

getDogInfo((dogInfo) => {
    return dogInfo.agent === '雌性';
})

5. 所以，封装函数，你悟了吗