프론트엔드 발전 (8): 심층적인 기능 커링-JS 튜토리얼-php.cn

프론트엔드 발전 (8): 심층적인 기능 커링

사진은 본 글과 무관

커링은 기능을 비교적 고급으로 응용한 것인데 쉽지 않습니다. 간단합니다. 그래서 어떻게 하면 모두가 이해하기 쉽도록 표현을 더 많이 해야 할지 고민을 하게 됐어요. 오랫동안 고민한 끝에 카레에 대한 개념은 제쳐두고 중요하지만 간과하기 쉬운 두 가지 지식 포인트를 추가하기로 결정했습니다.

1. 암시적 함수 변환에 대한 보충 지식 포인트

JavaScript약한 유형의 언어로서 암시적 변환은 매우 유연하고 흥미롭습니다. 암시적 변환에 대한 깊은 이해가 없으면 4 + true = 5과 같은 일부 연산의 결과로 인해 혼란스러울 수 있습니다. 물론, 암시적 변환에 대해 충분히 깊이 이해하고 있다면 js 사용 능력을 크게 향상시킬 수 있을 것입니다. 단지 모든 암시적 변환 규칙을 여러분과 공유할 계획은 없습니다. 여기서는 함수의 암시적 변환에 대한 일부 규칙만 공유하겠습니다.

간단한 질문을 해보자.

function fn() {
    return 20;
}

console.log(fn + 10); // 输出结果是多少？

로그인 후 복사

살짝 수정해서 어떤 결과가 나올지 생각해 보세요.

function fn() {
    return 20;
}

fn.toString = function() {
    return 10;
}

console.log(fn + 10);  // 输出结果是多少？

로그인 후 복사

계속 수정 가능합니다.

function fn() {
    return 20;
}

fn.toString = function() {
    return 10;
}

fn.valueOf = function() {
    return 5;
}

console.log(fn + 10); // 输出结果是多少？

로그인 후 복사

// 输出结果分别为
function fn() {
    return 20;
}10

20

15

로그인 후 복사

console.log를 사용하거나 작업을 수행할 때 암시적 변환이 발생할 수 있습니다. 위의 세 가지 예에서 우리는 함수의 암시적 변환에 대한 몇 가지 결론을 도출할 수 있습니다.

toString 및 valueOf를 재정의하지 않으면 함수의 암시적 변환이 기본 toString 메서드를 호출하여 함수의 정의 내용을 문자열으로 반환합니다. toString/vauleOf 메소드를 적극적으로 정의하면 암시적 변환의 반환 결과가 스스로 제어됩니다. 그 중 valueOf는 toString 다음에

을 실행하므로 위 예제의 결론은 이해하기 쉽습니다. 한번 시도해 보시기 바랍니다.

2. call/apply를 사용한 array의 map 메소드

를 이용한 보충 지식 포인트 map(): 배열의 각 항목에 대해 지정된 함수를 실행하고 각 함수 호출 결과의 배열을 반환합니다.

일반인의 용어로는 배열의 각 요소를 순회하고 맵의 첫 번째 매개변수(콜백 함수)에서 연산을 수행한 다음 계산을 반환하는 것을 의미합니다. 결과. 모든 계산 결과로 구성된 새 배열을 반환합니다.

// 回调函数中有三个参数
// 第一个参数表示newArr的每一项，第二个参数表示该项在数组中的索引值
// 第三个表示数组本身
// 除此之外，回调函数中的this，当map不存在第二参数时，this指向丢失，当存在第二个参数时，指向改参数所设定的对象
var newArr = [1, 2, 3, 4].map(function(item, i, arr) {
    console.log(item, i, arr, this);  // 可运行试试看
    return item + 1;  // 每一项加1
}, { a: 1 })

console.log(newArr); // [2, 3, 4, 5]

로그인 후 복사

는 위 예시의 코멘트에서 지도 방식에 대해 자세히 설명하고 있습니다. 이제 우리는 지도를 캡슐화하는 방법에 대한 문제에 직면해야 합니다.

먼저 for 루프를 생각해 보세요. for 루프를 사용하여 맵을 구현할 수 있지만 캡슐화할 때 몇 가지 문제를 고려할 것입니다. for 루프를 사용할 때 루프 프로세스는 실제로 캡슐화하기 쉽지만 for 루프의 각 항목에 대해 수행해야 하는 작업에 대해 고정된 항목으로 캡슐화하기는 어렵습니다. 모든 시나리오에서 for 루프의 데이터 처리는 확실히 다르기 때문입니다.

그래서 모두가 이러한 다양한 작업을 별도의 함수로 처리하는 좋은 방법을 생각했습니다. 구체적으로 이 콜백 함수에는 무엇이 포함될까요? 그것을 사용할 때. 따라서 이 아이디어를 바탕으로 한 encapsulation 구현은 다음과 같다.

Array.prototype._map = function(fn, context) {
    var temp = [];
    if(typeof fn == 'function') {
        var k = 0;
        var len = this.length;
        // 封装for循环过程
        for(; k < len; k++) {
            // 将每一项的运算操作丢进fn里，利用call方法指定fn的this指向与具体参数
            temp.push(fn.call(context, this[k], k, this))
        }
    } else {
        console.error('TypeError: '+ fn +' is not a function.');
    }

    // 返回每一项运算结果组成的新数组
    return temp;
}

var newArr = [1, 2, 3, 4]._map(function(item) {
    return item + 1;
})
// [2, 3, 4, 5]

로그인 후 복사

위 패키지에서는 먼저 최종 반환 결과를 저장하는 데 사용되는 빈 임시 배열을 정의했습니다. for 루프에서는 루프할 때마다 매개변수 fn 함수가 한 번 실행되고 fn의 매개변수가 call 메소드를 사용하여 전달됩니다.

Map의 캡슐화 과정을 이해한 후에는 Map을 사용할 때 첫 번째 콜백 함수에서 항상 반환 값을 기대하는 이유를 이해할 수 있습니다. eslint의 규칙에서는 map을 사용할 때 반환 값을 설정하지 않으면 오류로 판단합니다.

자, 이제 함수의 암시적 변환 규칙과 이 시나리오에서 호출/적용이 사용되는 방식을 이해했으므로 간단한 예를 통해 커링을 이해해 볼 수 있습니다.

3. 쉬운 것부터 깊은 것까지

프론트 인터뷰에서 널리 회자되는 카레링에 관한 면접 질문이 있습니다.

계산 결과가 다음 기대치를 충족할 수 있도록 add 메소드를 구현합니다.
add(1)(2)(3) = 6
add(1, 2, 3)(4) = 10
add(1)(2)(3)(4)(5) = 15

분명히 계산 결과는 모든 매개변수의 합입니다. add 메소드가 실행될 때마다 동일한 함수를 반환하고 나머지 매개변수를 계속 계산해야 합니다.

가장 간단한 예부터 단계별로 해결책을 찾을 수 있습니다.

当我们只调用两次时，可以这样封装。

function add(a) {
    return function(b) {
        return a + b;
    }
}

console.log(add(1)(2));  // 3

로그인 후 복사

如果只调用三次：

function add(a) {
    return function(b) {
        return function (c) {
            return a + b + c;
        }
    }
}

console.log(add(1)(2)(3)); // 6

로그인 후 복사

上面的封装看上去跟我们想要的结果有点类似，但是参数的使用被限制得很死，因此并不是我们想要的最终结果，我们需要通用的封装。应该怎么办？总结一下上面2个例子，其实我们是利用闭包的特性，将所有的参数，集中到最后返回的函数里进行计算并返回结果。因此我们在封装时，主要的目的，就是将参数集中起来计算。

来看看具体实现。

function add() {
    // 第一次执行时，定义一个数组专门用来存储所有的参数
    var _args = [].slice.call(arguments);

    // 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值
    var adder = function () {
        var _adder = function() {
            [].push.apply(_args, [].slice.call(arguments));
            return _adder;
        };

        // 利用隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
        _adder.toString = function () {
            return _args.reduce(function (a, b) {
                return a + b;
            });
        }

        return _adder;
    }
    return adder.apply(null, [].slice.call(arguments));
}

// 输出结果，可自由组合的参数
console.log(add(1, 2, 3, 4, 5));  // 15
console.log(add(1, 2, 3, 4)(5));  // 15
console.log(add(1)(2)(3)(4)(5));  // 15

로그인 후 복사

上面的实现，利用闭包的特性，主要目的是想通过一些巧妙的方法将所有的参数收集在一个数组里，并在最终隐式转换时将数组里的所有项加起来。因此我们在调用add方法的时候，参数就显得非常灵活。当然，也就很轻松的满足了我们的需求。

那么读懂了上面的demo，然后我们再来看看柯里化的定义，相信大家就会更加容易理解了。

柯里化（英语：Currying），又称为部分求值，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回一个新的函数的技术，新函数接受余下参数并返回运算结果。

接收单一参数，因为要携带不少信息，因此常常以回调函数的理由来解决。
将部分参数通过回调函数等方式传入函数中
返回一个新函数，用于处理所有的想要传入的参数

在上面的例子中，我们可以将add(1, 2, 3, 4)转换为add(1)(2)(3)(4)。这就是部分求值。每次传入的参数都只是我们想要传入的所有参数中的一部分。当然实际应用中，并不会常常这么复杂的去处理参数，很多时候也仅仅只是分成两部分而已。

咱们再来一起思考一个与柯里化相关的问题。

假如有一个计算要求，需要我们将数组里面的每一项用我们自己想要的字符给连起来。我们应该怎么做？想到使用join方法，就很简单。

var arr = [1, 2, 3, 4, 5];

// 实际开发中并不建议直接给Array扩展新的方法
// 只是用这种方式演示能够更加清晰一点
Array.prototype.merge = function(chars) {
    return this.join(chars);
}

var string = arr.merge('-')

console.log(string);  // 1-2-3-4-5

로그인 후 복사

增加难度，将每一项加一个数后再连起来。那么这里就需要map来帮助我们对每一项进行特殊的运算处理，生成新的数组然后用字符连接起来了。实现如下：

var arr = [1, 2, 3, 4, 5];

Array.prototype.merge = function(chars, number) {
    return this.map(function(item) {
        return item + number;
    }).join(chars);
}

var string = arr.merge('-', 1);

console.log(string); // 2-3-4-5-6

로그인 후 복사

但是如果我们又想要让数组每一项都减去一个数之后再连起来呢？当然和上面的加法操作一样的实现。

var arr = [1, 2, 3, 4, 5];

Array.prototype.merge = function(chars, number) {
    return this.map(function(item) {
        return item - number;
    }).join(chars);
}

var string = arr.merge('~', 1);

console.log(string); // 0~1~2~3~4

로그인 후 복사

机智的小伙伴肯定发现困惑所在了。我们期望封装一个函数，能同时处理不同的运算过程，但是我们并不能使用一个固定的套路将对每一项的操作都封装起来。于是问题就变成了和封装map的时候所面临的问题一样了。我们可以借助柯里化来搞定。

与map封装同样的道理，既然我们事先并不确定我们将要对每一项数据进行怎么样的处理，我只是知道我们需要将他们处理之后然后用字符连起来，所以不妨将处理内容保存在一个函数里。而仅仅固定封装连起来的这一部分需求。

于是我们就有了以下的封装。

// 封装很简单，一句话搞定
Array.prototype.merge = function(fn, chars) {
    return this.map(fn).join(chars);
}

var arr = [1, 2, 3, 4];

// 难点在于，在实际使用的时候，操作怎么来定义，利用闭包保存于传递num参数
var add = function(num) {
    return function(item) {
        return item + num;
    }
}

var red = function(num) {
    return function(item) {
        return item - num;
    }
}

// 每一项加2后合并
var res1 = arr.merge(add(2), '-');

// 每一项减2后合并
var res2 = arr.merge(red(1), '-');

// 也可以直接使用回调函数，每一项乘2后合并
var res3 = arr.merge((function(num) {
    return function(item) {
        return item * num
    }
})(2), '-')

console.log(res1); // 3-4-5-6
console.log(res2); // 0-1-2-3
console.log(res3); // 2-4-6-8

로그인 후 복사

大家能从上面的例子，发现柯里化的特征吗？

四、柯里化通用式

通用的柯里化写法其实比我们上边封装的add方法要简单许多。

var currying = function(fn) {
    var args = [].slice.call(arguments, 1);

    return function() {
        // 主要还是收集所有需要的参数到一个数组中，便于统一计算
        var _args = args.concat([].slice.call(arguments));
        return fn.apply(null, _args);
    }
}

var sum = currying(function() {
    var args = [].slice.call(arguments);
    return args.reduce(function(a, b) {
        return a + b;
    })
}, 10)

console.log(sum(20, 10));  // 40
console.log(sum(10, 5));   // 25

로그인 후 복사

五、柯里化与bind

Object.prototype.bind = function(context) {
    var _this = this;
    var args = [].slice.call(arguments, 1);

    return function() {
        return _this.apply(context, args)
    }
}

로그인 후 복사

这个例子利用call与apply的灵活运用，实现了bind的功能。

在前面的几个例子中，我们可以总结一下柯里化的特点：