[JS]回调函数

函数在 JavaScript 中可以作为参数或作为返回值,在异步编程中回调函数被大量使用,当回调函数被调用,说明满足了某个触发条件,有时还会包含结果,提供更多的细节。

若实现一个简单的计算器,其功能有加、减、乘、除等运算,通常情况下会想到一个函数获得两个参数,并将运算类型作为字符串传递给函数参数以实现不同需求。

function calculate(x, y, type) {
    if (type == ‘minus‘) {
        return x - y
    } else if (type == ‘add‘) {
        return x + y
    } ......
}

let result = calculate(10, 20, ‘minus‘) // -10

上述代码,存在一个明显的问题。如果在减法中做其他的限制条件(或增加源代码的功能),它会影响到整个 calculate 函数本身。再者,如果我扩展 calculate 函数功能,它也会影响到函数本身。对于这种情况,我们寄希望于回调函数,通过它来解决这个问题。

// calculate本体做一些基本的判断(限制)
function calculate(x, y, callback) {
    if (x < 0 || y < 0) {
        throw new Error(`Numbers must not be negative!`)
    }
    if (typeof x !== ‘number‘ || typeof y !== ‘number‘) {
        throw new Error(`Args must be number type!`)
    }
    return callback(x, y, ‘not problem!!!‘) // 向外提供更多细节
}

// 没有做任何附加限制
calculate(10, 20, function (x, y, more) {
    console.log(more) // ‘not problem!!!‘
    return x * y
})

// 做了一些附加限制
calculate(5, 5, function (x, y, more) {
    console.log(more) // ‘not problem!!!‘
    if (x + y <= 10) {
        throw new Error(
            ‘The sum of the two numbers must be greater than 10‘
        )
    }
    return x * y
})

现在,调用 calculate 函数时,可以在回调函数中做一些附加限制条件,它不会影响到 calculate 这个函数本体。

并且,回调函数可以从 calculate 函数本体中获取更多的细节(信息),通过这些信息我们又能做出更多的操作。

let points = [40, 100 ,10, 5, 25]

points.sort(function (a, b) => {
    return a - b
}) // [5, 10, 25, 40, 100]

// ...另一种比较方式...
points.sort(function (a, b) => {
    if (a < b) {
        return -1
    }
    if (a > b) {
        return 1
    }
    return 0
}) // [5, 10, 25, 40, 100]

在回调函数中不同的排序方式可以决定最后的结果。回调函数使得程序更加灵活

[JS]回调函数

上一篇:C++Builder 中 Enter键或者Tab键无效


下一篇:CSS样式