JS 프로토타입과 클래스

waymo·2022년 7월 22일
0
post-thumbnail

프로토타입과 클래스

클래스의 특징중에 하나인 상속!
상속은 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 그대로 사용할 수 있는 것을 말한다.

프로토타입?

Javascript 는 프로토타입 기반 언어

  • 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다.
    자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 한다.

  • 프로토 타입 객체는 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그상위 프로토 타입도 마찬가지로 상속을 계속 받는다.
    이렇게 프로토타입이 상속되는 가상의 연결 고리를 프로토타입 체인(prototype chain)이라고 한다

  • 자바스크립트에 내장된 모든 생성자나 사용자 정의 생성자는 Object.prototype을 프로토타입으로 가진다.
    그러므로 Object.prototyp 객체는 이러한 프로토타입 체인에서도 가장 상위에 존재하는 프로토타입이다.


  • 모든 각각의 객체는 [[Prototype]]이라는 은닉(private) 속성을 가지는데 자신의 프로토타입이 되는 다른 객체를 가리킨다. 가장 상위에 있는 프로토타입 즉 객체 프로토타입은 null을 값으로 갖고 프로토타입 체인의 종점 역할을 한다.
    은닉 되어있는 [[Prototype]]__ proto__ 를 이용해 자신의 프로토타입을 확인할 수 있다.


  • 인스턴스의 __proto__를 이용하면 DOM으로 생성된 div 요소의 부모를 확인할 수 있다.

prototype 프로퍼티

unction Car(brand, name, color) {

    this.brand = brand;

    this.name = name;

    this.color = color;

}

// 현재 존재하고 있는 Car 프로토타입에 family 프로퍼티를 추가함.

Dog.prototype.family = "스포츠카";

// 현재 존재하고 있는 Car 프로토타입에 breed 메소드를 추가함.

Car.prototype.cartype = function() {

    return this.color + " " + this.family;

};

var myCar = new Car("porshe", "911", "blue");

var hisCar = new Car("bmw", "mini", "red");


prototype 프로퍼티를 이용하면 현재 존재하고 있는 프로토타입에 새로운 프로퍼티나 메소드를 손쉽게 추가할 수 있다.

profile
FE 개발자(진)가 되고 싶습니다

0개의 댓글