JavaScript_Basic 지식을 바탕으로 상속 메커니즘을 구현하기 위해 call() 및 apply()를 호출하는 방법에 대한 자세한 설명

call() 메소드

call() 메소드는 고전적인 객체 가장 메소드와 가장 유사합니다. 첫 번째 매개변수가 이것의 객체로 사용됩니다. 다른 모든 매개변수는 함수 자체에 직접 전달됩니다. 예:

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

function sayHello(sPrefix ,sSuffix) {
Alert(this.name ”says” sPrefix sSuffix);
};

var obj = new Object();
obj.name = "Tom";

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

이 예에서 sayHello() 함수는 객체에 속하지 않더라도 객체 외부에 정의됩니다. 모든 객체. 키워드 this는 인용될 수 있습니다. 객체 obj의 name 속성은 blue와 같습니다. call() 메서드를 호출할 때 첫 번째 매개 변수는 obj이며, 이는 sayHello() 함수의 this 키워드 값이 obj에 할당되어야 함을 나타냅니다. 두 번째와 세 번째 매개변수는 문자열입니다. 이는 sayHello() 함수의 sPrefix 및 sSuffix 매개변수와 일치하며 "Tom presents Hello World"라는 결과 메시지가 표시됩니다.

상속 메커니즘의 객체 가장 방법과 함께 이 방법을 사용하려면 할당, 호출 및 삭제 코드의 처음 세 줄을 바꾸면 됩니다.

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

function ClassA(sColor) {
this.color = sColor;
this.sayColor = function() {
경고(this.color);
};
}

function ClassB(sColor, sName) {
//this.newMethod = ClassA;
//this.newMethod(color);
//this.newMethod 삭제;
ClassA.call(this, sColor);

this.name = sName;
this.sayName = function () {
Alert(this.name);
};
}

여기서, ClassA의 키워드 this를 새로 생성된 ClassB 객체와 동일하게 만들어야 하므로 이것이 첫 번째 매개변수입니다. 두 번째 매개변수인 sColor는 두 클래스 모두에 대한 유일한 매개변수입니다.

apply() 메소드

apply() 메서드는 두 개의 매개변수, 즉 이 매개변수로 사용되는 객체와 함수에 전달될 매개변수 배열을 사용합니다. 예:

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

function sayColor(sPrefix ,sSuffix) {
Alert(sPrefix this.color sSuffix);
};

var obj = new Object();
obj.color = "blue";

sayColor.apply(obj, new Array("색상은 ", "정말로 아주 좋은 색상입니다."));

이 예는 이전 예와 동일합니다. 호출되는 것은 apply() 메소드입니다. apply() 메서드를 호출할 때 첫 번째 매개 변수는 여전히 obj입니다. 이는 sayColor() 함수의 this 키워드 값이 obj에 할당되어야 함을 나타냅니다. 두 번째 매개변수는 sayColor() 함수의 sPrefix 및 sSuffix 매개변수와 일치하는 두 개의 문자열로 구성된 배열입니다. 최종 생성된 메시지는 여전히 "색상은 파란색입니다. 정말 멋진 색상입니다."가 표시됩니다. .

이 방법은 새 방법을 할당, 호출 및 삭제하기 위한 코드의 처음 세 줄을 대체하는 데에도 사용됩니다.

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

function ClassB(sColor, sName) {
//this.newMethod = ClassA;
//this.newMethod( color);
//this.newMethod 삭제;
ClassA.apply(this, new Array(sColor));

this.name = sName;
this.sayName = function () {
Alert(this.name);
};
}

동일 , 첫 번째 매개변수는 여전히 this이고, 두 번째 매개변수는 color라는 하나의 값만 갖는 배열입니다. ClassB의 전체 인수 객체를 apply() 메소드에 두 번째 매개변수로 전달할 수 있습니다:

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

function ClassB(sColor, sName) {
//this.newMethod = ClassA;
//this.newMethod(color);
//this.newMethod 삭제;
ClassA.apply(this, 인수);

this.name = sName;
this.sayName = function () {
Alert(this.name);
};
}

물론이죠 , 슈퍼클래스의 매개변수 순서가 하위클래스의 매개변수 순서와 정확히 동일한 경우에만 매개변수 객체를 전달할 수 있습니다. 그렇지 않은 경우 올바른 순서로 매개변수를 사용하여 별도의 배열을 만들어야 합니다. 추가적으로 call() 메소드를 사용할 수도 있습니다.

우리는 이 두 가지 방법이 원본 개체 가장을 매우 잘 대체하여 작성을 약간 더 간단하게 만들 수 있음을 알 수 있습니다. 그러나 이러한 메소드의 단점은 서브클래스가 프로토타입 체인에서 상위 클래스에 의해 선언된 메소드나 속성을 상속할 수 없다는 것입니다. 이 문제를 해결하기 위해 다음 기사에서는 JavaScript에서 상속을 구현하는 또 다른 방법인 프로토타입 체인 상속을 소개할 것입니다.