자바 스크립트 상속

StackOverflow https://stackoverflow.com/questions/931660

  •  06-09-2019
  •  | 
  •  

문제

나는 비슷한 질문이 많이 있다는 것을 알고 있습니다. 나는 고전적인 상속 방법이나 그 폐쇄 방법 등을 보려고 노력했다. 어쨌든 나는 그들이 실제로 JavaScript가 설계된 것이 아니기 때문에 나에게 "해킹"방법이라고 생각한다. (내가 틀렸다면 누구든지 나를 고칠 수있는 사람을 환영합니다). 좋아, 그것이 작동하는 한, 나는 다음과 같은 고전적인 상속 패턴에 만족합니다.

PARENTClass = function (basevar) { do something here; };
PARENTClass.prototype = { a: b, c: d}; // prototype is auto gen 

// Inheritance goes here
CHILDClass = function (childvar) { do something; };
CHILDClass.prototype = new PARENTClass(*1); // Actual inheritance to the prototype statement
// Instance
CHILDInstance = new CHILDClass(whatever);

위는 어쨌든 JS의 상속을 이해하는 데 있습니다. 그러나 구현 방법을 모르는 한 가지 시나리오는 객체 생성 중에 초기화를하고 싶다면 (예 : 생성자 내) 즉시 사용될 수 있다는 것입니다. 너무 명확 해 보이므로 다음 C# psuedo를 사용하여 내가하고 싶은 일을 설명하겠습니다.

class PARENT {
    public PARENT (basevar) { ... }
}
class CHILD : PARENT {
    public CHILD (basevar) : PARENT (basevar) // constructor of child, and call parent constructor during construct.
    { ... }
}

어떤 이유로 init. UI 요소와 같은 경우 생성자에 넣는 것이 가장 좋은 방법 인 것 같습니다. 누구든지 내가 어떻게 할 수 있는지에 대한 아이디어가 있습니다.

추신 : *1에서, 나는 내가 거기에 무엇을 넣어야하는지 전혀 모른다. PS2 : 위의 상황은 jQuery.inherit 라이브러리를 찾을 수 있습니다. 라이브러리를 사용하지 않는 것이이를 달성 할 수 있는지 궁금합니다. PS3 : 또는 내 이해가 잘못되었습니다. JavaScript는 OOP를 모방하기위한 것이 아니기 때문에 (따라서 해킹이라고 부릅니다), 이것을 구현하기위한 "올바른"논리는 무엇입니까?

도움이 되었습니까?

해결책

그것은 아닙니다 마구 자르기 따라서; JavaScript는 정의 된 프로토 타입 언어입니다 위키 백과 어디서 :

.. 클래스가 존재하지 않으며, 동작 재사용 (클래스 기반 언어의 상속)은 프로토 타입 역할을하는 기존 객체를 복제하는 프로세스를 통해 수행됩니다.

말했듯이, 클래스는 JavaScript에서 사용되지 않습니다. 생성하는 각 객체는 JavaScript의 내려갑니다. Object; JavaScript의 모든 객체는 다음에 있습니다 prototype 객체 및 객체의 프로토 타입 객체에서 '상속'메소드와 속성을 만드는 모든 객체 인스턴스. MDC를 살펴보십시오 원기 자세한 내용은 객체 참조.

이로 인해 라인을 호출 할 때 :

CHILDClass.prototype = new PARENTClass();

이것은 허용합니다 CHILDClass 객체에서 프로토 타입 객체에 메소드와 특성을 PARENTClass 수업 기반 언어로 존재하는 상속의 아이디어와 유사한 효과를 만듭니다. 이후 prototype 객체는 해당 객체의 모든 인스턴스에 영향을 미치므로 부모 객체의 방법과 속성이 자녀의 모든 인스턴스에 존재할 수 있습니다.

자녀 수업의 생성자에서 부모 클래스의 생성자에게 전화하려면 JavaScript를 사용합니다. call 기능; 이를 통해 아동 클래스의 생성자의 맥락에서 부모 클래스의 생성자를 호출 할 수 있으므로 자식 클래스의 새로 프로토 타입 된 속성을 부모 클래스에서와 같이 설정 한 내용으로 설정합니다.

또한 지정한 곳에 아무것도 넣을 필요가 없습니다. *1, 그 라인은 단지 아동 클래스의 프로토 타입 객체에 메소드와 속성을 추가하는 데 사용되기 때문입니다. 그러나 부모 클래스의 생성자를 호출한다는 사실을 명심하십시오. 따라서 부모 클래스 생성자의 작동에 기본적인 인수가있는 경우 JavaScript 오류를 피하기 위해 이것이 존재하는지 확인해야합니다.

다른 팁

다음과 같이 서브 클래스 생성자에서 부모 생성자를 수동으로 호출 할 수 있습니다.

CHILDClass = function (basevar) {
  PARENTClass.call(this, basevar);
  // do something;
};

여기의 트릭은 call 다른 객체의 맥락에서 메소드를 호출 할 수있는 방법. 보다 문서 call 자세한 사항은.

JavaScript는 유형 확장이 집계를 통해 수행되어야하기 때문에 상속 계층에 대한 내장 지원이 없습니다. 즉, 인스턴스간에 속성을 공유하려면 원하는 기능을 객체 자체에 직접 추가합니다.

그럼에도 불구하고, JS는 고전적인 상속을 포함하여 다른 형태의 객체 구성을 구현할 수있을 정도로 강력합니다.

주어진 a 클론 기능 - 이는 '진정한'프로토 타입 상속을 추가하기에 충분하며 JavaScript의 놈화가 아니라 exampe를 구현할 수 있습니다.

function ParentClass(baseVar) {
    // do stuff
}

// don't overwrite the prototype object if you want to keep `constructor`
// see http://joost.zeekat.nl/constructors-considered-mildly-confusing.html
ParentClass.prototype.a = 'b';
ParentClass.prototype.c = 'd';

function ChildClass(childVar) {
    // call the super constructor
    ParentClass.call(this, childVar);
}

// don't inherit from a ParentClass instance, but the actual prototype
ChildClass.prototype = clone(ParentClass.prototype);
ChildClass.prototype.e = 'f';

클래스 기반 상속을 위해 일부 구문 설탕을 추가 할 수도 있습니다. 여기에서 찾을 수 있습니다.

그런 다음 위의 예는 읽습니다

var ParentClass = Class.extend({
    constructor: function(baseVar) {
        // do stuff
    },
    a: 'b',
    c: 'd'
});

var ChildClass = ParentClass.extend({
    e: 'f'
});

기본 방법을 무시하거나 기본 생성자 또는 멤버를 호출 할 수있는 '클래스와 같은'상속을 제공하는 가벼운 JavaScript OOP 래퍼가 있습니다.

당신은 다음과 같이 수업을 정의합니다.

//Define the 'Cat' class
function Cat(catType, firstName, lastName)
{
    //Call the 'Animal' constructor.
    Cat.$baseNew.call(this, firstName, lastName);

    this.catType = catType;
}
//Extend Animal, and Register the 'Cat' type.
Cat.extend(Animal, { type: 'Cat' }, {
    hello: function(text)
    {
        return "meaoow: " + text;
    },
    getFullName: function()
    {
        //Call the base 'Animal' getFullName method.
        return this.catType + ": " + Cat.$base.getFullName.call(this);
    }
})

//It has a built-in type system that lets you do stuff like:

var cat = new Cat("ginger", "kitty", "kat");
Cat.getType()                     // "Cat"
cat.getBaseTypesAndSelf()         // ["Cat","Animal","Class"]
cat.getType()                     // "Cat"
cat.isTypeOf(Animal.getType())    // "True"

var dynamicCat = Class.createNew("Cat", ["tab","fat","cat"])
dynamicCat.getBaseTypesAndSelf()  // ["Cat","Animal","Class"]
dynamicCat.getFullName()          // tab: fat cat

사용 가능한 소스 코드 : class.js

또한 내 블로그 게시물에 자세한 내용이 있습니다. JavaScript의 OOP

당신이하려는 고전적인 패턴의 몇 가지 문제를 언급 할 것이라고 생각했습니다.

  1. 슈퍼 클래스 (ES)의 참조 Vars는 모든 인스턴스에서 본질적으로 정적으로 사용할 수 있습니다. 예를 들어, 슈퍼에 var arr = [1,2,3]가 있고 인스턴스 _1.arr.push (4) instance_2.arr.push (5)를 수행하는 경우 이러한 모든 인스턴스는 변경 사항을 "확인"합니다.

  2. 따라서 Zakas가 "생성자 도둑질"이라고 부르는 Ayman의 솔루션으로 1. 그러나 이제는 프로토 타입과 생성자 도둑질을 위해 한 번에 생성자를 두 번 호출합니다. 솔루션 - 프로토 타입의 경우 inheritPrototype와 같은 도우미를 사용하십시오 (이 게시물 에서이 게시물의 전체 구현을 보여주었습니다. 상속 프로토 타입 방법 FWIW, 이것은 본질적으로 Zakas의 책 181 페이지와 일부 Crockford 연구의 조합에서 나왔습니다.

  3. 프라이버시가 없지만 (그러나 다시, 당신은 이것을 얻기 위해 내구성있는 객체 패턴과 같은 것을 사용해야하고 그것이 당신이 원하는 것이 아닐 수도 있습니다)

  4. 객체 정의가 "매달려"상태로 남아 있습니다. 솔루션 - 프로토 타입의 기능을 확인한 다음 프로토 타입으로 프로토 타입을 정의하는 IF 문을 확인하십시오.

나는 github 에서이 모든 것의 예제를 실행했다 !!!

Zakas와 Crockford Books에 대한 사물 창조와 상속에 관한 책을 진정으로 맥주하는 것은 많은 도전이었습니다. 또한 다른 JavaScript TDD 프레임 워크를 시도해야했습니다. 그래서 나는 TDD 프레임 워크와 JavaScript 객체 생성 및 상속에 대한 에세이를 만들기로 결정했습니다. 실행중인 코드 및 JSPEC 테스트가 있습니다! 링크는 다음과 같습니다.*내 github 오픈 소스 에세이/책

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top