JavaScript_jquery의 적용 및 호출 함수에 대한 자세한 설명

처음으로 기술 기사를 번역했는데 정말 재밌었어요!

원문 번역:

JavaScript의 Function.apply 및 Function.call

첫 번째 문단은 생략합니다.

각 JavaScript 함수에는 toString(), call() 및 apply()를 포함하여 많은 첨부 메소드가 있습니다. 함수에 자체 메서드가 있다는 것이 이상하게 들릴 수도 있지만 JavaScript의 모든 함수는 객체라는 점을 기억하세요. JavaScript 기능을 (새롭게) 검토하려면 이 기사를 살펴보십시오. JavaScript의 함수와 메서드의 차이점을 알고 싶을 수도 있습니다. "함수"와 "메서드"에 대한 설명은 단지 JavaScript 규칙일 뿐이라고 생각합니다. 함수는 그 자체로 존재하며(예: 경고()), 메서드는 함수 내부의 개체 속성(사전)입니다. 각 JavaScript 개체에는 toString() 메서드가 있습니다. 다음은 함수 개체에서 toString() 메서드를 사용할 수 있는 코드의 예입니다.

function foo(){
 alert('x');
}
alert(foo.toString());

함수는 객체이기 때문에 고유한 속성과 메서드를 갖습니다. 우리는 그것들을 데이터라고 생각할 수 있습니다. 이 기사에서는 두 가지 함수 메서드인 apply()와 call()에만 중점을 둡니다.

다음 코드로 시작합니다.

var x = 10;
function f(){
 alert(this.x);
}
f();

전역 함수 f()를 정의합니다. f()는 this 키워드를 통해 변수 x에 액세스하지만 객체의 인스턴스를 통해 이 함수를 호출할 수 없다는 점에 유의해야 합니다. 이것은 어떤 대상을 가리키는가? 이는 이 전역 객체를 가리킬 것입니다. 변수 x는 이 전역 개체에 정의되어 있습니다. 위의 코드는 정상적으로 실행될 수 있으며 결과는 대화 상자에 10이 표시된 대화 상자가 됩니다.

이를 통해 call()과 apply()를 호출할 수 있습니다. 다음 예에서는 call()을 사용하는 방법을 보여줍니다.

var x = 10;
var o = { x : 15};
function f(){
 alert(this.x);
}
f();
f.call(o);

f()를 먼저 호출하면 대화 상자 10이 표시됩니다. 이는 이때 전역 객체를 가리키기 때문입니다. 그런 다음 f 함수의 call() 메서드를 호출합니다. 들어오는 매개 변수는 o이고 실행 결과는 o, 15의 x 속성 값을 표시합니다. call() 메소드는 첫 번째 매개변수를 f 함수의 this 포인터로 사용합니다. 즉, f 함수에서 this가 가리키는 객체가 무엇인지 런타임에 알려줍니다.

C, Java 및 C# 프로그래머에게는 이 점프가 약간 우스꽝스럽고 심지어 약간 이상하게 들립니다. 이것이 ECMAScript의 재미있는 부분입니다.

call()을 통해 함수에 매개변수를 전달할 수도 있습니다.

var x = 10;
var o = { x : 15};
function f(){
 alert(this.x);
}
f();
f.call(o);

apply()는 call()과 유사하지만 apply()의 두 번째 매개변수는 배열이어야 한다는 점만 다릅니다. 이 배열은 대상 함수에 매개변수로 전달됩니다.

var x = 10;
var o = {x : 15};
function f(message) {
 alert(message);
 alert(this.x);
}
f('invoking f');
f.apply(o, ['invoking f through apply']);

apply() 메소드는 타겟 메소드의 매개변수에 신경쓰지 않고 함수를 생성할 수 있기 때문에 유용합니다. 이 함수는 apply()의 두 번째 배열 매개변수를 통해 메소드에 추가 매개변수를 전달할 수 있습니다.

var o = {x : 15};
function f1(message1) {
 alert(message1 + this.x);
}
function f2(message1, message2) {
 alert(message1 + (this.x * this.x) + message2);
}
function g(object, func, args) {
 func.apply(object, args);
}
g(o, f1, ['the value of x = ']);
g(o, f2, ['the value of x squared = ', '. Wow!']);

이 구문에는 문제가 있습니다. apply() 메소드를 호출하기 위해 대상 함수가 배열의 매개변수를 사용하도록 강제합니다. 다행히도 이 구문을 더 간단하게 만드는 방법이 있습니다. 그 전에 매개변수 식별자 중 하나를 소개해야 합니다.

JavaScript에서 각 함수에는 실제로 가변 길이 매개변수 목록이 있습니다. 즉, 함수에 매개변수가 하나만 있는 경우에도 5개의 매개변수를 전달할 수 있습니다. 다음 코드에는 오류가 없으며 결과는 "H"입니다.

function f(message) {
 alert(message);
}
f('H', 'e', 'l', 'l', 'o');

f()에서 다른 매개변수를 허용하지 않으려면 키워드 인수를 사용할 수 있습니다. 인수는 배열과 유사한 길이를 나타내는 속성을 갖는 매개변수 객체를 나타냅니다.

function f(message) {
 // message的值和arguments[0]是一样的
 for(var i = 1; i < arguments.length; i++){
  message += arguments[i];
 }
 alert(message);
}
// 结果显示“Hello”
f('H', 'e', 'l', 'l', 'o');

엄격히 말하면 인수는 배열이 아니라는 점을 알아야 합니다. 인수에는 길이 속성이 있지만 분할, 푸시 또는 팝 메서드는 없습니다. 이전 g() 함수에서는 인수에서 필수 매개변수를 복사하여 배열을 형성한 다음 이 배열을 apply()에 전달할 수 있습니다.

var o = {x : 15};
function f(message1, message2) {
 alert(message1 + ( this.x * this.x) + message2);
}
function g(object, func) {
 // arguments[0] = object
 // arguments[1] = func
 var args = [];
 for(var i = 2; i < arguments.length; i++) {
  args.push(arguments[i]);
 }
 func.apply(object, args);
}
g(o, f, 'The value of x squared = ', '. Wow!');

g()를 호출할 때 인수를 배열에 채우는 대신 추가 인수를 매개변수로 전달할 수 있습니다.