오브젝트 프로토타입 속성 및 Hunter x Hunter

최근에는 상속과 프로토타입 체인에 대해 배우고 있습니다. 내 게시물을 읽었다면 내가 Javascript의 기초에 뛰어들었다는 것을 이미 알고 있을 것입니다. 당신은 내가 헌터x헌터의 엄청난 팬이라는 것을 아마 모를 것입니다. Hunter 프로토타입 개체를 만들어서 배운 내용을 실제로 적용했습니다.

함수 생성자

함수 생성자는 특정 유형의 개체에 대한 청사진으로 볼 수 있습니다. 규칙은 대문자로 함수 생성자의 이름을 지정하는 것입니다. 예를 들어 내 함수 생성자는 Hunters를 만들기 위한 청사진입니다.

나는 모든 헌터가 name와 hatsu(또는 익숙하지 않은 사람들을 위한 특수 능력)의 두 가지 매개변수를 취할 것임을 선언합니다. 각 헌터는 powerLevel 100으로 초기화됩니다. 이제 헌터에 몇 가지 능력을 추가해 보겠습니다.

const Hunter = function(name, hatsu) {
    this.name = name;
    this.hatsu = hatsu;
    this.powerLevel = 100;
};

Hunter.prototype.charge = function(number) {
    if (typeof number !== 'number') {
        console.log('Please enter a number');
        return;
    }
    this.powerLevel += (100 * number);
    console.log(this.name + ' power level at ' + this.powerLevel);
};

Hunter.prototype.useHatsu = function() {
    if (this.powerLevel >= 300) {
        console.log(this.name + ' used ' + this.hatsu); 
        this.powerLevel = 0;
    } else {
        console.log(this.name + ' needs to charge.');
    };
};

prototype 속성을 사용하여 메서드charge 및 useHatsu를 저장함으로써 미래의 모든 사냥꾼은 충전하고 능력을 사용할 수 있습니다. 내 생성자에서 이러한 함수를 선언할 수 있습니다. 이는 생성된 각각의 새로운 Hunter가 고유한 charge 및 useHatsu 메서드를 갖게 됨을 의미합니다. 그건 좀 과하네요. 각 헌터가 방법을 소유할 필요는 없습니다. 각 헌터가 접근할 수 있으면 됩니다.

함수를 한 번 만들고 각 Hunter가 Hunter.prototype 속성에서 이러한 메서드를 상속하도록 허용하여 메모리를 절약합니다.

const gon = new Hunter("Gon", "Ja-Jan-Ken");
const killua = new Hunter("Killua", "Lightningbolt");

console.log(gon)
console.log(killua)

killua.charge(3);
gon.charge(1);
killua.useHatsu();
gon.useHatsu();

아직 콘솔에 코드를 입력하지 않았다면 모두 추가하십시오. 생성된 객체를 살펴보십시오. 예상대로 name , hatsu 및 powerLevel 이 있음을 알 수 있습니다. 우리가 만든 함수가 개체에 저장되지 않은 것을 알 수 있습니다. ___proto___ 속성에 저장됩니다.



프로토타입 체인 때문에 함수 호출에 prototype 속성을 포함할 필요가 없습니다. 와 유사하게 javascript는 객체 자체의 메소드와 속성을 확인합니다. 아무것도 발견되지 않으면 개체의 프로토타입을 확인합니다. 프로토타입 체인의 최상위 수준인 null에 도달할 때까지 이 프로세스를 계속합니다.

나는 매우 짧은 방식으로 많은 복잡한 주제를 다루었습니다. 이해가 되지 않는 사항이 있으면 문의해 주세요. This article by Tim Kadlec 많은 도움이 되었습니다.

읽어 주셔서 감사합니다!