JS 클래스, 프로토타입, 생성자

HARIBO·2021년 10월 5일
0

클래스

  • 일반명사, 대문자로 시작
  • 인스턴스 : 클래스 바탕의 객체
  • 생성자 함수는 return 값을 만들지 않는다
  • 메소드 : 객체의 값으로 함수를 가진다
  • this : 인스턴스 객체를 의미한다
  • 객체는 한 번 만들고 나면 메모리에서 반환되기 전까지 유지된다

객체 지향 프로그래밍의 특징

  • 캡슐화
    • 기능들을 한 단위로 묶는 것. 사람 중심의 코딩
    • 은닉 : 내부 속성이나 구현은 노출시키지 않고 메소드(동작)만 노출시킴
  • 추상화
    • 내부 구현은 복잡하지만 노출되는 부분은 단순
    • 인터페이스는 추상화를 위한 것. 코드의 단순화
  • 상속
    • 부모의 속성, 메소드를 자식 클래스에서 사용 가능
  • 다양성
    • 같은 이름을 가진 메소드라도 다르게 동작

생성자

  • new 연산자로 호출하면 해당 함수는 생성자로 동작한다

프로토타입

  • 원형 객체. JS는 프로토타입을 기반으로 상속 구현
  • __proto__ 는 prototype에 접근하기 위한 접근자 프로퍼티. 모든 객체는 __proto__을 통해 자신의 프로토타입에 간접적으로 접근 가능
  • hasOwnProperty 메소드는 인수로 받은 키가 객체 고유의 프로퍼티인 경우에만 true를 반환한다. 상속받은 프로토타입의 키일 경우 false를 반환
let fruit = {
    name: 'apple'
}

console.log(fruit.hasOwnProperty('name')); //true
//Object.prototype 객체의 프로퍼티인 __proto__
console.log(fruit.hasOwnProperty('__proto__'));  //false
  • prototype프로퍼티는 constructor만이 소유하는 프로퍼티다. 생성자 함수가 생성할 인스턴스의 프로토타입 객체를 가리킨다.
function Fruit(name){
    this.name = name;
}

//프로토타입은 Fruit생성자 함수의 prototype프로퍼티에 바인딩 된다
Fruit.prototype.getName = function(){
    return this.name;
}

let apple = new Fruit('apple');
let grape = new Fruit('grape')

console.log(apple.getName()); //apple
console.log(grape.getName()); //grape

//apple.__proto__는 get __proto__를 호출해서 Fruit객체의 프로토타입에 접근
console.log(apple.__proto__ === Fruit.prototype); //true
  • constructor 프로퍼티는 prototype 프로퍼티로, 생성자 함수를 가리킨다.
//생성자 함수
function Fruit(name){
    this.name = name;
}


let apple = new Fruit('apple');

// constructor는 생성자 함수를 가리킨다
console.log(apple.constructor === Fruit); //true

출처
이웅모, 모던 자바스크립트 Deep Dive(2021)

0개의 댓글