객체 참조 및 상속을 유지하면서 프로토타입 기반 JavaScript 코드를 어떻게 구성할 수 있습니까?

객체 참조 및 상속을 유지하면서 프로토타입 기반 JavaScript 구성

딜레마: 구조 향상을 위한 코드 재구성

프로토타입 상속은 강력한 JavaScript 패러다임입니다. 하지만 대규모 애플리케이션을 관리하는 것은 어려울 수 있습니다. 다양한 기능이 있는 캐러셀 클래스를 생각해 보세요.

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

더 나은 코드 구성을 위한 리팩토링에는 기능을 하위 개체로 그룹화하는 작업이 포함될 수 있습니다.

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

그러나 이 변경으로 인해 문제가 발생합니다. 이러한 함수 내의 this" 키워드는 더 이상 캐러셀 인스턴스를 참조하지 않습니다.

"this" 문제 극복

"this" 컨텍스트를 유지하는 것은 특히 클래스가 상위 클래스에서 상속되는 시나리오에서 중요합니다. . 상속된 클래스의 재정의 함수는 적절한 "this" 동작을 유지해야 합니다.

솔루션

하위 개체 래핑

한 가지 접근 방식은 컨트롤을 별도의 클래스로 정의하고 참조를 저장하는 것입니다. 캐러셀 인스턴스에:

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

이 솔루션은 "이" 문제를 해결하지만 컨트롤 구현을 재정의하는 것을 방지합니다.

종속성 주입

더 유연합니다. 접근 방식에는 종속성 주입이 포함됩니다.

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);
    };
// ..

이 시나리오에서 캐러셀 클래스는 여러 컨트롤러를 추가하여 여러 기능 세트를 수용하고 쉽게 재정의할 수 있습니다.

위 내용은 객체 참조 및 상속을 유지하면서 프로토타입 기반 JavaScript 코드를 어떻게 구성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!