웹개발/JavaScript

[JavaScript] 객체와 상속, 프로토타입

ss__jae2 2022. 5. 15. 02:00
반응형

1. 객체

- 추상적인 개념이 실체화 된 것

- 프로퍼티(자바에서 필드)들로 이루어진 하나의 집합

2. 객체 선언

  • 리터널을 이용한 객체 생성
    - 장점 : 객체를 빠르고 간단하게 만들 수 있음
    - 단점 : 비슷한 형태의 객체가 또 필요하다면 오히려 불편함(틀이 따로 없기 때문에)

    const 객체명 = {
           프로퍼티1명:프로퍼티1값,
           프로퍼티1명:프로퍼티1값,
           ...,
           메소드명: function() {

           },
           ...
    }
    - 객체 안에 있는 메소드 안에서 프로퍼티를 쓰기 위해서는 명시적으로 this를 써줘야 한다. 왜냐하면 프로퍼티는 변수가 아니기 때문에 this를 안 쓰면 프로퍼티와 이름이 같은 위에 선언된 변수를 쓰게 된다. 그렇기에 this를 명시적으로 적어줘야 한다.

  • 생성자를 이용한 객체 생성
    - 자바 스크립트에는 클래스가 따로 없고 글자로만의 클래스는 존재함
    - 클래스를 써서 만들면 자동으로 생성자를 만드는 코드로 변환되어서 실행됨
    - 그래서 사실 클래스라는 개념은 존재하지 않고 생성자만 있음

    자바 class : 붕어빵 틀
    JS 생성자 : 붕어빵 제조법
    - 생성자를 위부터 차례때로 읽으면서 실행
    - 그래서 객체를 만들고 프로퍼티를 만들게 된다. 안에 아무것도 없다면 프로퍼티 없이 객체만 만들어지는 것

    function 생성자명(매개변수1, 매개변수2, ..) {
           this.변수명 = 값1;
           this.변수명 = 값2;
           ...
           this.메소드명 = function() {};
    }

    - 람다식 : ()=>을 씀으로서 익명함수 선언할 때 간단하게 하는 방법
       () 안에는 매개변수를 넣으면 된다.

3. 상속(inheritance)과 프로토타입

- 자바 스크립트는 객체간의 상속이 일어남

- 자바 스크립트의 모든 객체는 프로토타입이라는 객체를 상속받고 있으며, 모든 객체는 프로토타입으로부터 프로퍼티와 메소드를 상속 받음

- 우리가 생성자를 만들고 실행시키면 생성자에 맞는 객체가 자동으로 만들어짐 --> 이게 프로토타입

- 우리가 이제 생성자를 이용해 진짜 객체를 만들게 되면 처음에 만들어진 프로토타입을 상속해서 사용됨

const mycar = new Car();
Car.prototype --> 생성자를 만들 때 생기는 것
      ↓
    mycar

- 프로토타입 기반 언어는 클래스라는 개념이 없고, 객체에서 객체를 바로 상속 받을 수 있음

- 따라서 자바 스크립트는 현재 존재하고 있는 객체를 프로토타입으로 사용하며 해당 객체를 복제 후 사용

객체명.prototype.프로퍼티 = "값";

- 새롭게 프로퍼티를 추가하면 상속받는 프로토타입 밑에 그 객체만의 새로운 필드가 만들어져 사용됨
생성자명.prototype.프로퍼티 = "값";

- 프로토타입에 프로퍼티가 추가되기 때문에 이 프로토타입을 상속받는 객체들에게 다 추가가 됨
- 프로토타입에 추가하는 것은 호이스팅이 되기 때문에 먼저 실행이 됨

반응형