JavaScript 프로토타입을 구성하고 상속 중에 `this` 컨텍스트를 유지하려면 어떻게 해야 합니까?

보존된 객체 참조 및 상속으로 JavaScript 프로토타입 구성

JavaScript에서는 애플리케이션이 커짐에 따라 프로토타입과 상속을 사용하여 코드를 구성하는 것이 어려울 수 있습니다. . 다음 시나리오를 고려해보세요. 여러 기능을 가진 캐러셀 클래스가 있습니다.

Carousel.prototype.next = function () {...}
Carousel.prototype.prev = function () {..}
Carousel.prototype.bindControls = function () {..}

코드 구성을 개선하기 위해 이러한 기능을 객체로 그룹화할 수 있습니다.

Carousel.prototype.controls = {
   next: function () { ... } , 
   prev: function() { ... },
   bindControls: function () { .. }
}

그러나, 이 접근 방식은 this 개체에 대한 참조를 중단하여 클래스에서 상속할 때 오류가 발생합니다. 이 문제를 해결하기 위해 다양한 전략을 모색할 수 있습니다.

컨트롤 클래스 생성:

한 가지 접근 방식은 다음과 같이 별도의 Controls 클래스를 정의하는 것입니다.

var Controls = function (controllable_object) {
    this.ref = controllable_object;
};
Controls.prototype.next = function () {
    this.ref.foo();
}
// ..

var Carousel = function () {
    this.controls = new Controls(this);
};
// ..

이를 통해 원본 객체에 대한 참조를 유지할 수 있지만 구현을 재정의하는 것은 허용되지 않습니다. 컨트롤.

종속성 주입 사용:

더 유연한 접근 방식은 종속성 주입을 활용하는 것입니다.

var Controls = function (controllable_object) {
    this.ref = controllable_object;
};
Controls.prototype.next = function () {
    this.ref.foo();
}
// ..

var Carousel = function () {
        this.controllers = [];
    };
Carousel.prototype.addController = function (controller) {
        this.controllers.push(controller);
    };
// ..

var carousel = new Carousel();
carousel.addController(new Controls(carousel));

이를 통해 여러 컨트롤러를 만들 수 있습니다. 이를 캐러셀에 동적으로 추가하면 유연성과 구현 재정의 기능이 제공됩니다.

위 내용은 JavaScript 프로토타입을 구성하고 상속 중에 `this` 컨텍스트를 유지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!