Javascript_javascript 기술의 call() 메소드 소개

Mozilla 공식 웹사이트의 call() 소개는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

call() 메소드는 지정된 this 값과 지정된 여러 매개변수 값을 사용하여 함수 또는 메소드를 호출합니다.

Call() 구문

코드 복사 코드는 다음과 같습니다.

fun.call(thisArg[, arg1[, arg2[, ...]]])

Call() 매개변수

thisArg

코드 복사 코드는 다음과 같습니다.

fun 함수가 실행 중일 때 지정되는 this 값입니다. 함수가 실행될 때 지정된 this 값이 반드시 실제 this 값일 필요는 없습니다. 함수가 엄격하지 않은 모드에 있는 경우 null 및 undef로 지정된 this 값은 자동으로 전역 개체를 가리킵니다. 브라우저의 경우 창 개체입니다. 값이 기본 값(숫자, 문자열, 부울 값)인 이 개체는 기본 값의 자동 래핑 개체를 가리킵니다.

인수1, 인수2, ...

코드 복사 코드는 다음과 같습니다.

지정된 매개변수 목록입니다.

Javascript의 call() 메소드

위의 복잡한 설명에 신경 쓰지 말고 단계별로 프로세스를 시작하세요.

Call() 메서드 인스턴스

그래서 또 다른 Hello, World를 썼습니다:

코드 복사 코드는 다음과 같습니다.

함수 인쇄(p1, p2) {
console.log( p1 ' ' p2);
}
print("안녕하세요", "세계");
print.call(정의되지 않음, "안녕하세요", "세계");

두 메서드 모두 동일한 출력을 갖습니다. 그러나 이와 대조적으로 call 메서드도 정의되지 않은 상태로 전달됩니다.

다음으로 또 다른 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

var obj=function(){};
함수 인쇄(p1, p2) {
console.log( p1 ' ' p2);
}

print.call(obj, "Hello", "World");

여기서만 전달하는 내용은 여전히 ​​정의되지 않은 상태입니다. 이전 예에서 정의되지 않은 것은 매개변수를 전달해야 하기 때문입니다. 이것은 실제로 call의 사용법을 반영하지 않습니다. 더 나은 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

함수 인쇄(이름) {
console.log( this.p1 ' ' this.p2);
}

var h={p1:"hello", p2:"world", print:print};
h.print("fd");

var h2={p1:"hello", p2:"world"};
print.call(h2, "아무것도");

콜(Call)은 자신의 전화를 걸듯이 다른 사람의 방법과 객체를 빌려서 전화하는 것을 의미합니다. h.print에서 함수가 메소드로 호출되면 해당 객체를 가리킵니다. 단지 이 예에서는 h2가 print를 호출했는지, 아니면 h2를 호출했는지 이해하지 못했을 뿐입니다. 그래서 Mozilla의 사례를 인용했습니다

코드 복사 코드는 다음과 같습니다.

기능 제품(이름, 가격) {
This.name = 이름;
이.가격=가격;

if (가격 < 0)
          throw RangeError('음수 가격으로 "' 이름 '" 제품을 생성할 수 없습니다.');
이것을 돌려주세요;
}

기능식품(명칭, 가격) {
Product.call(이것, 이름, 가격);
This.category = '음식';
}
Food.prototype = 새 제품();

var Cheese = new Food('feta', 5);
console.log(치즈);

여기서 우리는 어떤 객체가 어떤 메소드를 호출했는지 실제로 확인할 수 있습니다. 예제에서 Food 생성자를 사용하여 생성된 객체 인스턴스에는 Product 생성자에 추가된 name 및 Price 속성이 있지만, Category 속성은 해당 생성자에서 정의됩니다.

코드 복사 코드는 다음과 같습니다.

함수 인쇄(이름) {
console.log( this.p1 ' ' this.p2);
}

var h2= 함수(아니요){
This.p1 = "안녕하세요";
This.p2 = "세계";
Print.call(this, "아무것도");
};
h2();

여기서 h2는 print 함수를 호출하는 수신자 역할을 합니다. Food 예제에서와 같이 하위 생성자 내에서 상위 생성자의 호출 메서드를 호출하여 상속을 구현할 수 있습니다.

Call 메소드의 장점은 "Effective JavaScript"에서 소개합니다.

1. 호출 메서드를 사용하여 함수를 호출하도록 수신기를 맞춤설정합니다.
2. 주어진 객체에 존재하지 않는 메소드를 호출하려면 call 메소드를 사용하십시오.
3. call 메서드를 사용하여 사용자가 콜백 함수에 대한 수신자를 지정할 수 있도록 하는 고차 함수를 정의합니다.