JavaScript의 프로토타입 상속

나는 최근에 JavaScript의 일부 루트를 살펴보았습니다. 모든 언어의 기본을 되돌아보면 항상 유익합니다.

내 마음에는 다음과 같은 몇 가지 질문이 있었습니다.

JS에서 프로토타입이란?

프로토타입 인허틱탄이란? OOPS Inhertictane과 다른 점.

클래스는 JS에서 어떻게 작동합니까?

모든 답을 얻기 위해 JS 버전(Es5 및 ES6) 모두에서 작은 프로그램을 만들었습니다.

실습을 하면 동영상을 읽고 보는 것보다 더 많은 이해를 얻을 수 있습니다.

시작하겠습니다.

이전 버전의 상속

1단계

기본 클래스 역할을 할 함수(Tile)를 만듭니다.

2단계

자식 클래스 역할을 할 함수(PushableTile)를 만듭니다.

3단계

Base 클래스의 Prototype을 Child 클래스 프로토타입에 할당합니다.

4단계

자식 클래스에 메서드를 추가하면 이 메서드를 사용하여 부모 클래스에 액세스합니다.

5단계

자식 클래스에서 개체 만들기

// Base Class 
function Tile (x,y,type){
    this.x = x;
    this.y = y;
    this.type = type;
}


// Child Class
function PushableTile(x, y, type) {
    Tile.call(this, x, y, type);
}

// Inheritence 
PushableTile.prototype = Object.create(Tile.prototype);

// Add Methods to the child class 
PushableTile.prototype.push = function(x, y) {
    this.x += x;
    this.y += y;
};

var object = new PushableTile(100,200,300);

새 JS 버전의 상속

1 단계

생성자를 사용하여 기본 클래스(Tile)를 만듭니다.

2 단계

생성자를 사용하여 자식 클래스를 만듭니다.

3단계

기본 클래스에 Super를 추가합니다. 동일한 매개변수를 Parent 클래스에 전달하는 데 도움이 됩니다.

기본적으로 아래 코드와 동일한 작업을 수행합니다.
javascript Tile.call(this, x, y, type);
4단계

자식 클래스에 메서드를 추가합니다.

5단계

자식 클래스에서 개체 만들기

// Base Class 
class Tile {
     constructor(x,y,type){
        this.x = x;
        this.y = y;
        this.type = type;
        console.log("CONSTRUCTOR");
     }
}

// extends is same as PushableTile.prototype = Object.create(Tile.prototype);
class PushableTile extends Tile{
    constructor(x, y, type) {
      // Tile.call(this, x, y, type);
      super(x, y, type);
    }

    push(x, y) {
        this.x += x;
        this.y += y;
    }
}

const object = new PushableTile(100,200,300);