JavaScript 高级函数编程技巧

时间：02-04来源：作者：点击数：19

前言

本文将通过几个具体的代码片段，深入探讨 JavaScript 中的一些常见问题及其解决方案，包括节流函数、私有属性、柯里化函数以及继承机制等。

这些代码片段不仅展示了如何实现这些功能，还解释了其背后的原理和应用场景。通过阅读本文，读者可以更好地理解 JavaScript 的高级特性，并将其应用到实际项目中。

1. 节流函数 (Throttle)

代码片段

<!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>
    <style>
        body {
            height: 5000px;
        }
    </style>
</head>
<body>
    <input type="text" name="">
    <script>
        window.onscroll = throttle(() => {
            console.log('呵呵');
        }, 300);

        document.querySelector('input').oninput = function () {
            console.log(this.value);
        };

        function throttle(fn, interval) { // interval : 时间间隔
            let last = 0; // 上一次的时间
            return function () {
                let that = this;
                let args = arguments;
                let now = new Date();
                if (now - last >= interval) {
                    last = now;
                    fn.apply(that, arguments);
                }
            };
        }
    </script>
</body>
</html>

代码解析

节流函数（Throttle）是一种常见的优化技术，用于限制某个事件触发的频率。在上述代码中，throttle 函数通过记录上一次执行的时间 last 和当前时间 now 来判断是否应该执行传入的函数 fn。如果两次调用之间的时间间隔大于或等于指定的 interval，则执行该函数并更新 last。

这种技术特别适用于处理频繁触发的事件，如滚动、输入等。例如，在页面滚动时，我们可能希望每隔一段时间才执行一次日志输出或其他操作，以避免性能问题。

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>
        let Person = (function () {
            let user = null;

            class Person {
                constructor(name, age, gender) {
                    user = name;
                    this.age = age;
                    let sex = gender;
                }

                showName() {
                    return user;
                }

                showAge() {
                    return this.age;
                }
            }

            return Person;
        })();

        let ps = new Person('张三', 18);
        console.log(ps.user); // undefined
        console.log(ps.age); // 18
        console.log(ps.showName(), ps.showAge()); // '张三' 18
        console.log(ps.sex); // undefined
    </script>
</body>
</html>

代码解析

模块模式 是一种封装私有属性和方法的技术，通常使用立即执行函数表达式（IIFE）。在上述代码中，Person 构造函数被包裹在一个 IIFE 中，从而创建了一个封闭的作用域。在这个作用域内定义的变量 user 和 sex 是私有的，无法从外部直接访问。

通过这种方式，我们可以确保某些属性不会被意外修改或访问，同时仍然可以通过公共方法（如 showName 和 showAge）来间接操作这些私有属性。这有助于提高代码的安全性和可维护性。

3. 柯里化函数 (Currying)

代码片段

<!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>
        function fnSum(...args) {
            return args.reduce((prev, next) => prev + next);
        }

        function fnSort(...args) {
            return args.sort((a, b) => b - a);
        }

        function fnMax(...args) {
            return Math.max(...args);
        }

        function fnMin(...args) {
            return Math.min(...args);
        }

        function fnNoRepeatArr(...args) {
            return [...new Set(args)];
        }

        function currying(fn) {
            let arr = [];
            return function result(...args) {
                if (args.length === 0) {
                    return fn(...arr);
                } else {
                    arr.push(...args);
                    return result;
                }
            };
        }

        console.log(currying(fnSum)(1, 2)(3, 4, 5)(6, 7, 8, 9)());
        console.log(currying(fnSort)(5, 4, 6)(3)(7, 2, 8, 1, 9)());
        console.log(currying(fnMax)(5, 4, 6)(8, 3, 4, 2, 0)(9, 1, 2, 4)());
        console.log(currying(fnMin)(5)(2)(4)(2)(1)(6)());
        console.log(currying(fnNoRepeatArr)(3, 2)(1, 1, 2, 2, 3, 4)(6, 5, 6, 6, 3, 3, 4)(9, 9, 5, 4, 2)());
    </script>
</body>
</html>

代码解析

柯里化 是一种将多参数函数转换为一系列单参数函数的技术。在上述代码中，currying 函数接收一个原始函数 fn 并返回一个新的函数 result。每次调用 result 时，它会将传递的参数累积到数组 arr 中，直到没有任何参数传递为止，此时才会调用原始函数 fn 并传入累积的参数。

这种技术使得函数调用更加灵活，可以在不同的上下文中逐步传递参数。例如，fnSum 可以分多次传递参数，最终计算总和；fnSort 可以逐步添加需要排序的元素，最后进行排序操作。柯里化不仅提高了代码的可读性和复用性，还提供了一种优雅的方式来处理复杂的函数调用。

4. 继承机制

代码片段 1：构造函数继承

<!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>
        function Person(name, age) {
            this.name = name;
            this.age = age;
            this.showName = function () {
                return this.name;
            };
        }

        function SuperMan(name, age) {
            Person.call(this, name, age);
        }

        let sm = new SuperMan('小超', 18);
        console.log(sm.showName());
    </script>
</body>
</html>

代码解析

构造函数继承 是一种简单的继承方式，通过 call 或 apply 方法调用父类构造函数，从而将父类的属性和方法复制到子类实例中。在上述代码中，SuperMan 构造函数通过 Person.call(this, name, age) 继承了 Person 的属性和方法。

这种方法的优点是简单直观，但缺点是无法继承原型链上的方法和属性，因此通常与其他继承方式结合使用。

代码片段 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>
        function Person() {}
        Person.prototype.name = '张三';
        Person.prototype.age = 18;
        Person.prototype.showName = function () {
            return this.name;
        };

        function SuperMan() {}
        SuperMan.prototype = new Person();
        SuperMan.prototype.fly = function () {
            return '飞';
        };

        let sm = new SuperMan();
        console.log(sm.name, sm.age, sm.showName());
    </script>
</body>
</html>

代码解析

原型链继承 是 JavaScript 中最经典的继承方式之一。通过将子类的原型对象设置为父类的实例，子类可以继承父类的所有原型方法和属性。在上述代码中，SuperMan.prototype = new Person() 实现了原型链继承，使得 SuperMan 实例可以访问 Person 的原型方法和属性。

然而，这种方式存在一个问题：所有子类实例共享同一个父类实例，因此可能会导致数据冲突。为了避免这种情况，通常会结合构造函数继承一起使用。

代码片段 3：组合继承

<!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>
        function Person(name, age) {
            this.name = name;
            this.age = age;
        }

        Person.prototype.showName = function () {
            return this.name;
        };

        Person.prototype.showAge = function () {
            return this.age;
        };

        function SuperMan(name, age) {
            Person.apply(this, [name, age]);
        }

        SuperMan.prototype = new Person();

        let sm = new SuperMan('小超', 19);
        console.log(sm.name, sm.age, sm.showName(), sm.showAge());
    </script>
</body>
</html>

代码解析

组合继承 结合了构造函数继承和原型链继承的优点，既可以通过构造函数继承父类的实例属性，又可以通过原型链继承父类的原型方法。在上述代码中，SuperMan 构造函数通过 Person.apply(this, [name, age]) 继承了 Person 的实例属性，而 SuperMan.prototype = new Person() 则实现了原型链继承。

这种方式有效地解决了单一继承方式的局限性，是目前最常用的继承方式之一。