기능적 JavaScript: .apply(), .call() 및 인수 객체

우리는 진정한 함수형 프로그래밍을 할 수 있도록 JavaScript를 조정하는 방법을 찾고 있습니다. 이를 위해서는 함수 호출과 함수 프로토타입을 자세히 이해하는 것이 필요합니다.

함수 프로토타입

이제 위에 링크된 기사를 읽었든 무시했든 다음 단계로 넘어갈 준비가 되었습니다!
우리가 선호하는 브라우저 + JavaScript 콘솔을 클릭하면 Function.prototype 객체의 속성을 살펴보겠습니다.

; html-script: false ]
Object.getOwnPropertyNames(Function.prototype)
//=> ["length", "name", "arguments", "caller", 
//    "constructor", "bind", "toString", "call", "apply"]

여기서 출력은 사용 중인 브라우저와 JavaScript 버전에 따라 다릅니다. . (저는 Chrome 33을 사용하고 있습니다.)
관심 있는 몇 가지 속성이 표시됩니다. 이 기사의 목적에 따라 다음 사항에 대해 논의하겠습니다.

Function.prototype.length

Function.prototype.call

Function.prototype.apply

첫 번째는 속성이고 나머지 두 개는 메서드입니다. 이 세 가지 외에도 Function.prototype.arguments(더 이상 사용되지 않음)와 약간 다른 이 특수 변수 인수에 대해서도 논의하고 싶습니다.

먼저 무슨 일이 일어나고 있는지 파악하는 데 도움이 되는 '테스터' 기능을 정의하겠습니다.

; html-script: false ]
var tester = function (a, b, c){
    console.log({
        this: this,
        a: a,
        b: b,
        c: c
    });
};

이 함수는 단순히 입력 매개변수의 값과 이 값인 "컨텍스트 변수"를 기록합니다.
이제 시도해 보겠습니다.

; html-script: false ]
tester("a"); 
//=> {this: Window, a: "a", b: (undefined), c: (undefined)}
 
tester("this", "is", "cool"); 
//=> {this: Window, a: "this", b: "is", c: "cool"}

2번째와 3번째 매개변수를 입력하지 않으면 프로그램이 정의되지 않은 것으로 표시되는 것을 확인했습니다. 또한 이 함수의 기본 "컨텍스트"는 전역 개체 창이라는 것을 알 수 있습니다.

Function.prototype.call 사용

함수의 .call 메소드는 컨텍스트 변수 this를 첫 번째 입력 매개변수의 값으로 설정하는 방식으로 함수를 호출합니다. 나머지 매개변수도 함수에 하나씩 전달됩니다.
구문:

; html-script: false ]
fn.call(thisArg[, arg1[, arg2[, ...]]])

따라서 다음 두 줄은 동일합니다.

; html-script: false ]
tester("this", "is", "cool"); 
tester.call(window, "this", "is", "cool");

물론 원하는 매개변수를 전달할 수 있습니다.

; html-script: false ]
tester.call("this?", "is", "even", "cooler"); 
//=> {this: "this?", a: "is", b: "even", c: "cooler"}

이 메소드의 주요 기능은 호출하는 함수의 이 변수 ​​값을 설정하는 것입니다.

Function.prototype.apply 사용

함수의 .apply 메소드가 .call보다 더 실용적입니다. .call과 마찬가지로 .apply도 컨텍스트 변수 this를 입력 매개변수 시퀀스의 첫 번째 매개변수 값으로 설정하여 호출됩니다. 입력 매개변수 시퀀스의 두 번째와 마지막 매개변수는 배열(또는 배열과 유사한 객체)로 전달됩니다.

구문:

; html-script: false ]
fun.apply(thisArg, [argsArray])

따라서 다음 세 줄은 모두 동일합니다.

; html-script: false ]
tester("this", "is", "cool"); 
tester.call(window, "this", "is", "cool"); 
tester.apply(window, ["this", "is", "cool"]);

매개변수 목록을 배열로 지정할 수 있다는 점은 가장 유용합니다. (우리는 그렇게 함으로써 얻을 수 있는 이점을 찾을 것입니다).

예를 들어 Math.max는 가변 함수입니다(함수는 임의 개수의 매개변수를 허용할 수 있음).

; html-script: false ]
Math.max(1,3,2);
//=> 3
 
Math.max(2,1);
//=> 2

그래서 값 배열이 있고 가장 큰 값을 찾기 위해 Math.max 함수를 사용해야 하는 경우 코드 한 줄로 어떻게 이를 수행할 수 있습니까?

; html-script: false ]
var numbers = [3, 8, 7, 3, 1];
Math.max.apply(null, numbers);
//=> 8

.apply 메소드는 특수 인수 변수인 인수 객체

와 결합될 때 그 중요성을 실제로 보여주기 시작합니다.

각 함수 표현식에는 해당 범위에서 사용할 수 있는 특수 지역 변수인 인수가 있습니다. 해당 속성을 연구하기 위해 다른 테스터 함수를 생성해 보겠습니다.

; html-script: false ]
var tester = function(a, b, c) {
    console.log(Object.getOwnPropertyNames(arguments));
};

참고: 이 경우 인수에는 사용 가능한 것으로 표시되지 않은 일부 속성이 있으므로 위와 같이 Object.getOwnPropertyNames를 사용해야 합니다. 따라서 console.log(인수)만 사용하면 표시되지 않습니다.

이제 이전 방법을 따르고 테스터 함수를 호출하여 테스트합니다.

; html-script: false ]
tester("a", "b", "c");
//=> ["0", "1", "2", "length", "callee"]
 
tester.apply(null, ["a"]);
//=> ["0", "length", "callee"]

인수 변수의 속성에는 함수에 전달된 각 매개 변수에 해당하는 속성이 포함됩니다. .length 속성과 .callee 속성 사이에는 차이가 없습니다.

.callee 속성은 현재 함수를 호출한 함수에 대한 참조를 제공하지만 모든 브라우저에서 지원되는 것은 아닙니다. 지금은 이 속성을 무시합니다.
테스터 ​​기능을 더 풍부하게 만들기 위해 재정의해 보겠습니다.

; html-script: false ]
var tester = function() {
    console.log({
        'this': this,
        'arguments': arguments,
        'length': arguments.length
    });
};
 
tester.apply(null, ["a", "b", "c"]);
//=> { this: null, arguments: { 0: "a", 1: "b", 2: "c" }, length: 3 }

인수: 객체입니까 아니면 배열입니까?

인수는 다소 비슷하지만 전혀 배열이 아니라는 것을 알 수 있습니다. 대부분의 경우 배열이 아니더라도 배열로 처리하고 싶을 것입니다. 인수를 배열로 변환하는 아주 좋은 바로가기 함수가 있습니다:

; html-script: false ]
function toArray(args) {
    return Array.prototype.slice.call(args);
}
 
var example = function(){
    console.log(arguments);
    console.log(toArray(arguments));
};
 
example("a", "b", "c");
//=> { 0: "a", 1: "b", 2: "c" }
//=> ["a", "b", "c"]

여기서는 Array.prototype.slice 메소드를 사용하여 배열과 유사한 객체를 배열로 변환합니다. 이 때문에 인수 객체는 .apply와 함께 사용될 때 매우 유용합니다.

유용한 예

Log Wrapper

logWrapper 함수가 빌드되었지만 단항 함수에서만 올바르게 작동합니다.

; html-script: false ]
// old version
var logWrapper = function (f) {
    return function (a) {
        console.log('calling "' + f.name + '" with argument "' + a);
        return f(a);
    };
};

물론 기존 지식을 통해 모든 기능을 제공할 수 있는 logWrapper 함수를 구축할 수 있습니다.

; html-script: false ]
// new version
var logWrapper = function (f) {
    return function () {
        console.log('calling "' + f.name + '"', arguments);
        return f.apply(this, arguments);
    };
};

; html-script: false ]
f.apply(this, arguments);

我们确定这个函数f会在和它之前完全相同的上下文中被调用。于是，如果我们愿意用新的”wrapped”版本替换掉我们的代码中的那些日志记录函数是完全理所当然没有唐突感的。
把原生的prototype方法放到公共函数库中
浏览器有大量超有用的方法我们可以“借用”到我们的代码里。方法常常把this变量作为“data”来处理。在函数式编程，我们没有this变量，但是我们无论如何要使用函数的！

; html-script: false ]
var demethodize = function(fn){
    return function(){
        var args = [].slice.call(arguments, 1);
        return fn.apply(arguments[0], args);
    };
};

다른 예:

; html-script: false ]
// String.prototype
var split = demethodize(String.prototype.split);
var slice = demethodize(String.prototype.slice);
var indexOfStr = demethodize(String.prototype.indexOf);
var toLowerCase = demethodize(String.prototype.toLowerCase);
 
// Array.prototype
var join = demethodize(Array.prototype.join);
var forEach = demethodize(Array.prototype.forEach);
var map = demethodize(Array.prototype.map);

물론 훨씬 더 많습니다. 이것이 어떻게 실행되는지 살펴보겠습니다.

; html-script: false ]
("abc,def").split(",");
//=> ["abc","def"]
 
split("abc,def", ",");
//=> ["abc","def"]
 
["a","b","c"].join(" ");
//=> "a b c"
 
join(["a","b","c"], " ");
// => "a b c"

여담:

실제로 디메소다이즈 기능을 사용하는 더 좋은 방법은 매개변수 뒤집기라는 것을 나중에 보여드리겠습니다.

在函数式编程情况下，你通常需要把“data”或“input data”参数作为函数的最右边的参数。方法通常会把this变量绑定到“data”参数上。举个例子，String.prototype方法通常操作的是实际的字符串（即”data”）。Array方法也是这样。

为什么这样可能不会马上被理解，但是一旦你使用柯里化或是组合函数来表达更丰富的逻辑的时候情况会这样。这正是我在引言部分说到UnderScore.js所存在的问题，之后在以后的文章中还会详细介绍。几乎每个Underscore.js的函数都会有“data”参数，并且作为最左参数。这最终导致非常难重用，代码也很难阅读或者是分析。:-(

管理参数顺序

; html-script: false ]
// shift the parameters of a function by one
var ignoreFirstArg = function (f) {
    return function(){
        var args = [].slice.call(arguments,1);
        return f.apply(this, args);
    };
};
 
// reverse the order that a function accepts arguments
var reverseArgs = function (f) {
    return function(){
        return f.apply(this, toArray(arguments).reverse());
    };
};

组合函数

在函数式编程世界里组合函数到一起是极其重要的。通常的想法是创建小的、可测试的函数来表现一个“单元逻辑”，这些可以组装到一个更大的可以做更复杂工作的“结构”

; html-script: false ]
// compose(f1, f2, f3..., fn)(args) == f1(f2(f3(...(fn(args...)))))
var compose = function (/* f1, f2, ..., fn */) {
    var fns = arguments,
        length = arguments.length;
    return function () {
        var i = length;
        // we need to go in reverse order
        while ( --i >= 0 ) {
            arguments = [fns[i].apply(this, arguments)];
        }
        return arguments[0];
    };
};
 
 
// sequence(f1, f2, f3..., fn)(args...) == fn(...(f3(f2(f1(args...)))))
var sequence = function (/* f1, f2, ..., fn */) {
    var fns = arguments,
        length = arguments.length;
    return function () {
        var i = 0;
        // we need to go in normal order here
        while ( i++ < length ) {
            arguments = [fns[i].apply(this, arguments)];
        }
        return arguments[0];
    };
};

例子：

; html-script: false ]
// abs(x) = Sqrt(x^2)
var abs = compose(sqrt, square);
 
abs(-2); // 2