[JS] 프로토타입(Prototype) 다뤄보기

안녕하세요 Foma 💻 입니다.

 

오늘도 역시 모던 자바스크립트를 통해 배운 프로토타입을 복습하는 차원에서 다시 한번 정리하도록 하겠습니다.

 

바로 시작할게요~

---

Prototype이란?

 

자바스크립트의 모든 객체는 숨김 프로퍼티로 Prototype을 가지고 있다.

 

이것은 null이거나 다른 객체를 참조할 수 있는데 이것을 통해서 해당 객체의 기능(메서드)을 복사하거나 추가할 수 있다.

 

이렇게 참조한 다른 객체를 현재 객체의 '프로토타입'이라고 부른다.

---

Prototype 설정하기

 

1. __proto__

 

운동선수를 지칭하는 'player'라는 객체를 생성하고

 

let player = {
    firstName:"Young",
    lastName:"An",
    get fullName() {
        return this.firstName + " " + this.lastName
    },
    set fullName(value) {
        [this.firstName,this.lastName] = value.split(" ")
    },
    jump: function() {
        print("jump")
    },
    run:function() {
        print("run")
    }
}

 

농구선수 'basketBallPlayer' 객체를 만들어 'player'를 프로토타입으로 참조한다.

 

이렇게 하면 'player'에 있는 jump() 메서드를 basketBallPlayer도 사용할 수 있다.

 

let basketBallPlayer ={
    shoot:function() {
        print("shoot")
    },
    //프로토타입 상속은 __proto__ 라고 프로퍼티명을 해줘야 함.
    __proto__:player
}

//프로토타입의 메서드를 사용할 수 있다.
basketballPlayer.jump() //jump

 

2. Object.create(obj)

 

__proto__를 직접 설정하는 것보다는 더 모던한 방식으로 프로토타입을 설정할 수 있다.

 

아래와 같이 설정해도 __proto__에서 설정한 것과 같이 채택한 객체의 메서드를 사용할 수 있다.

 

let baseBallPlayer = Object.create(player)

---

내장 객체 프로토타입 수정

 

물론 내장 객체 프로토타입에 메서드를 추가할 수도 있다.

 

아래와 같이 String의 프로토타입에 sayHi() 메서드를 추가할 수 있다.

 

String.prototype.sayHi = function() {
    print("hi")
}

 

하지만 이와 같이 내장 객체의 프로토타입을 수정하는 것은 모든 메서드를 덮어쓸 위험이 있으므로 쓰지 않는 것이 좋다.

 

단, 자바스크립트의 명세서에 있는 메서드와 동일한 기능을 하는 메서드를 추가하는 것(풀리필)은 허용된다.

 

또한 아래와 같이 내장 객체를 프로토타입으로 채택할 수도 있다.

---

상속받은 메서드인지 확인하기

 

hasOwnProperty(프로퍼티명) 으로 메서드가 상속받았는지 아닌지 확인할 수 있다.

 

for (let key in basketballPlayer) {
    //상속받은 메서드인지 아는 법
    if (basketballPlayer.hasOwnProperty(key)) {
        print("내 프로퍼티")
    }else {
        print("상속받은 프로퍼티")
    }
    print(key)
}

/*
내 프로퍼티
shoot
상속받은 프로퍼티
jump
상속받은 프로퍼티
firstName
상속받은 프로퍼티
lastName
상속받은 프로퍼티
fullName
상속받은 프로퍼티
run
*/

---

Reference

 

모던 JavaScript 튜토리얼