提高代码质量——偏函数（带案例讲解）

LiuJie_Boom

已于 2022-04-28 20:22:17 修改

阅读量564

点赞数 1

分类专栏： # js函数式编程文章标签：前端 javascript 基础

于 2022-04-26 22:22:03 首次发布

本文链接：https://blog.csdn.net/weixin_44242181/article/details/124437487

版权

js函数式编程专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章结构

什么是偏函数
怎么使用偏函数
场景1判断变量类型
场景2动态生成一个标签
为什么要用偏函数
复杂场景感受一下偏函数的好处

什么是偏函数

偏函数是函数柯里化的其中一种表现，固化之前函数的一部分参数，将其设置为默认值，
然后返回一个新的函数。

怎么使用偏函数

我们需要将原本函数中的的一部分参数设置成默认值。使用一个函数返回一个函数，并将这个默认值作为return出来的函数的函数体内容被使用。当我们下次调用这个外层函数时，给这个默认值赋值。

场景1判断变量类型

// 以前我们要实现一个函数用来判断变量的类型是不是传入的类型时，可能是这么实现的
const isType = function(type, variable) {
    return Object.prototype.toString.call(variable) === "[object " + type + "]";
};
console.log(isType("Object", {})); // true

/* 如果现在我们的业务逻辑并没有那个复杂了，假如只需要判断是不是某一个类型时，这时
我们可以对原始函数进行修改 */
const isTypeCurrying = function(type) {
    return function(variable) {
        return Object.prototype.toString.call(variable) === "[object " + type + "]";
    }
}

const isTypeCurryingFunction = isTypeCurrying("Function");
console.log(isTypeCurryingFunction(function() {})); // true

场景2动态生成一个标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 以前我们动态生成一个标签函数可能是这样子的

        const createTags = function(tagType, content) {
            const startTag = "<" + tagType + ">";
            const endTag = "</" + tagType + ">";
            return `${startTag + content + endTag}`;
        };

        document.write(createTags("h1", "标题"));

        // 使用偏函数允许设置标签默认值
        const createTagsCurrying = function(tagType) {
            const startTag = "<" + tagType + ">";
            const endTag = "</" + tagType + ">";
            return function(content) {
                return `${startTag + content + endTag}`;
            }
        }
        const createDiv = createTagsCurrying("div");
        document.write(createDiv("我是一个div"));
        const createP = createTagsCurrying("p");
        document.write(createDiv("我是一个p"));
    </script>
</body>

</html>

在这里插入图片描述

为什么要用偏函数

不知道大家看见上面两个案例有没有发现，两个案例的原始函数涉及的业务，换句话说，
实现的功能是比较大的。专业一点的讲：就是代码耦合度过大，原始函数使用起来需要
考虑的事情比较多。但是我们使用偏函数就可以将业务拆分成小业务，判断所有类型到
判断是否是函数，生成所有类型的标签到生成div标签。不管是使用起来还是后续维护起
来都会方便很多。（单单是看函数命名就能感觉到代码和事情变简单了不是）

复杂场景感受一下偏函数的好处

// 现在你接手了公司的一个项目，你发现项目中有一段代码如下
function select(type, num) {


    if (type == 'a') {
        // 模拟一段业务
        console.log(num + 1);
    } else if (type == 'b') {
        // 模拟一段业务
        console.log(num * 1);
    } else if (type == 'c') {
        // 模拟一段业务
        console.log(num ** 2);
    } else if (type == 'd') {
        // 模拟一段业务
        console.log(num / 2);
    }
}

// 现有实现的一些功能
select("a", 10); // 11
select("b", 10); // 10
select("c", 10); // 100
select("d", 10); // 5

现在领导让你在这个功能里面加一段业务，你可能会这么做。

function select(type, num) {


    if (type == 'a') {
        // 模拟一段业务
        console.log(num + 1);
    } else if (type == 'b') {
        // 模拟一段业务
        console.log(num * 1);
    } else if (type == 'c') {
        // 模拟一段业务
        console.log(num ** 2);
    } else if (type == 'd') {
        // 模拟一段业务
        console.log(num / 2);
    } else if (type == 'e') {
        console.log("新加的功能" + num % 2);
    }
}

// 现有实现的一些功能
select("a", 10); // 11
select("b", 10); // 10
select("c", 10); // 100
select("d", 10); // 5
select("e", 10); // 新加的功能0

这不是实现了，这不挺好的。but，现在是五个业务，看起来还行。但是业务多起来之后怎么
办每次调用select都会走一次循环语句，循环语句是会消耗性能的。咱们每次调用我们自己
的业务都要去跑一次循环语句？打开联机版GTA 5一条if语句跑了19.8亿次及其占用cpu性能。
导致打开时间过长这个事大家听说过没有？

如果使用偏函数会怎么样呢？

function select(type, num) {
    if (type == 'a') {
        // 模拟一段业务
        return function() {
            console.log(num + 1);
        }
    } else if (type == 'b') {
        // 模拟一段业务
        return function() {
            console.log(num * 1);
        }
    } else if (type == 'c') {
        // 模拟一段业务
        return function() {
            console.log(num ** 2);
        }
    } else if (type == 'd') {
        // 模拟一段业务
        return function() {
            console.log(num / 2);
        }
    } else if (type == 'e') {
        console.log("走循环了");
        return function() {
            console.log("新加的功能" + num % 2);
        }
    }
}

// 现有实现的一些功能
const selectA = select("a", 10);
const selectB = select("b", 10);
const selectC = select("c", 10);
const selectD = select("d", 10);
const selectE = select("e", 10);
selectB(); // 1210
selectC(); // 100
selectD(); // 5
selectE(); // 新加的功能0
selectE(); // 新加的功能0
selectE(); // 新加的功能0
selectE(); // 新加的功能0
selectE(); // 新加的功能0

在这里插入图片描述

不管我们调用了多少次我们写的功能函数，都只会走一次循环。Salute to you这个知识点
讲完啦。不知道大家有没有学会呢？

LiuJie_Boom

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
提高代码质量——偏函数（带案例讲解）

文章结构什么是偏函数怎么使用偏函数场景1判断变量类型场景2动态生成一个标签为什么要用偏函数复杂场景感受一下偏函数的好处什么是偏函数偏函数是函数柯里化的其中一种表现，固化之前函数的一部分参数，将其设置为默认值，然后返回一个新的函数。怎么使用偏函数我们需要将原本函数中的的一部分参数设置成默认值。使用一个函数返回一个函数，并将这个默认值作为return出来的函数的函数体内容被使用。当我们下次调用这个外层函数时，给这个默认值赋值。场景1判断变量类型// 以前我们要实现一个函数用来判断变量的类型是不
复制链接

扫一扫