- 클래스란
하나의 객체 프로토타입을 생성하여 해당 객체 프로토타입의 자식들이라고 할 수 있는 인스턴스 객체 들이 해당 클래스의 프로퍼티나 메소드를 사용할 수 있는 문법이다.
- 인스턴스란
하나의 클래스나 생성자 함수가 가지는 프로토타입, 메서드를 사용할 수 있는 새로운 객체를 말한다. === 클래스를 통해 만들어진 객체예를 들자면
Array 배열은
f Array()
로 보아하니 하나의 생성자 함수라고 할 수 있겠다.(추측..)
Array라는 생성자 함수 내부에는 prototype이 존재하고 prototype 내부에는 수많은 프로퍼티들이있다. (값들이 함수로 담겨 있다)
배열이 가지는 프로토타입을 사용할 수 있는 인스턴스(새로운 객체)를 만드는 방법은
num 의 내부를 보면 Array.prototype 들이 나열되어 있는 걸로 보아하니 num은 Array를 부모로 가지는 새로운 인스턴스라고 할 수 있겠다.
new Array 를 통해서 인스턴스를 만드는 것도 당연히 가능하다.
클래스는
ES6
부터 도입된 객체 프로토타입 생성 방식으로 이전까지는
생성자 함수 방식으로 객체 프로토타입 생성을 구현 했다.
- 생성자 함수 방식
- 생성자 함수는 일반 함수 사용법과 비슷하다. 다만 내부에 프로퍼티를 만들어주기 위해
this
를 사용해 주고
- 생성자함수 메서드를 정의하기 위해서는
prototype
키워드를 이용해야한다.
new
키워드를 이용해 인스턴스를 만들어 주는 것은 클래스와 동일하지만new
를 작성하지 않게 되면 그냥 일반함수로 동작한다.
- 클래스 방식
- 생성자 함수와 달리
class
키워드를 이용하여 작성한다
constructor
의 이름은 변경 불가능 하고 인스턴스가 생성될 때 가지고 있는 프로퍼티 정보를 작성한다.
this 는 인스턴스 객체를 가르킨다.
new
키워드가 없으면 오류가 난다.* prototype 생성 방식도 생성자 함수보다 간결하다.
- 객체 지향 언어 (Object-Oriented Programming)
객체 지향 언어의 정의는 아직 감이 안와서 찾아본 바로
- 객체지향 프로그래밍은 속성과 메서드를 가지고 있는 객체를 말하며
데이터를 기능과 묶어서 처리할 수 있고
객체(Object)를 추상화(abstraction)를 통해 모델링하려는 프로그래밍 패러다임을 말한다.이를 자바스크립트에선
Class
라고 부른다.
즉,Class === 객체 지향 프로그래밍
이다.
- 객체 지향 프로그래밍의 핵심 개념
- Encapsulation 캡슐화
- Abstraction 추상화
- Inheritance 상속
- Polymorphism 다향성
- Encapsulation 캡슐화
같은 기능을 하는 메소드,프로퍼티들을 하나의
클래스
에 담고 외부에 공개될 필요가 없는 정보는 숨기는 것. 은닉화라고 부르기도 한다.외부에서의 접근을 제한적으로 허용하기 때문에
클래스
내에 담겨 있는 데이터나 기능들을 보호하는 작용을 한다.코드가 복잡하지 않게 만들고, 재사용성을 높인다는 장점이 있다.
- Abstraction 추상화
복잡한 내부 로직은 숨기고 외부에 노출되는 부분은 단순하게 만드는 것으로
많은 기능들이 노출되어 있지 않기 때문에 예상치 못한 오류나 변화가 일어나는 것을 방지할 수 있다.캡슐화 와 비슷한 개념이나
캡슐화 - 데이터와 기능을 은닉하는 것에 초점이 맞춰져 있다면
추상화 - 클래스에 있는 복잡한 로직이나 메서드 등을 노출시키지 않고, 단순한 이름으로 정의하는 것에 초점이 맞춰져 있다캡슐화와 마찬가지로 코드를 단순하게 만들고 변화를 최소화 시킨다.
- Inheritance 상속
부모클래스의 프로퍼티와 메서드들을 자식 클래스에서 사용할 수 있도록 상속 기능이 구형되어 있다.
클래스가 코드의 재사용성을 장점으로 가지는 이유가 아닐까 싶다
- Polymorphism 다향성
객체의 속성이나 메서드가 상황에 따라 여러 가지 형태를 가질 수 있는 성질이라고 할 수 있고
같은 이름의 메서드가 상황에 따라 다른 역할을 수행하는 것 이라고도 말할 수 있겠다.
복잡한 코드를 단순하게 만들어 추상화를 높이고 재사용성과 효율성을 증대하는 프로그래밍 방식이 객체 지향 프로그래밍 이 아닐까 생각해본다.
- 프로토타입이란 부모 유전자 라고 생각하니까 이해가 된다!.
어떤 객체의 특성을 다른 객체가 상속 할 수 있는 매커니즘?자바스크립트에서 함수로 이루어진 객체가 생성되면
prototype 프로퍼티
를 가지고 태어나고 또 그 객체의prototype Object
도 생성 되는데
prototype 프로퍼티
는prototype Object
를 가르키게 되고prototype Object
의 속성 중 constructor 은 해당 함수 객체를 가르키게 된다.
즉,prototype Object
가 프로토타입이라는 것이다.
- Prototype 가 참조하는 객체 === 프로토 타입
<이미지 참조 : 생활코딩>
mdn 설명으로는
- 프로토타입이란
모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다.즉, 하나의 객체가 찾고자 하는 프로퍼티가 없다면 해당 객체가 가지고 있는 [[Prototype]] 에서 프로퍼티를 찾게 된다. 이렇게 동작하는 걸 프로토타입 체인이라 한다.
그렇다고 합니다..! "자식은 부모의 객체에 있는 프로퍼티나 메서드를 사용할 수 있다"
Object.prototype
함수 객체만 가지고 있는 프로퍼티이고
생성자 함수의 prototype 객체를
가르킨다 일반 객체에 사용 시 undefined 반환한다.
console.dir(num.prototype)
함수 객체가 아니니 undefined 반환console.dir(Array.prototype)
는 함수 객체이니 Array의 prototype 프로퍼티를 보여 줌.
- 객체들은
__Proto__
를 통해서만 생성자 함수의Prototype 프로퍼티
에 접근할 수 있다.그 이유는 [[Prototype]] 내부 슬롯에는 직접 접근이 불가하다. 이는 프로토타입 체인의 단방향을 지키기 위해서다. 만약 직접 접근가능하다면, 서로가 서로의 프로토타입이 되면서 프로토타입 체인이 무한루프에 빠지게 되기 때문
상속의 경우에도 자식들은
__Proto__
프로퍼티 를 통해야만 생성자 함수의Prototype 프로퍼티
에 접근할 수 있다.이렇게
__Proto__
를 통해서 자식에서 부모로 부모에서 상위 부모로 타고 올라가 프로퍼티나 메소드를 사용할 수 있는 것을 프로토타입 체인이라고 한다!위의 사진에 나온 원시 자료형(숫자,문자열,불린 값 만 해당!)은 객체가 아니다. 객체가 아니지만 원시 자료형의 프로퍼티에 접근하려고 하면 임시 래퍼(wrapper) 객체가 생성된다. 그래서 String.prototype, Number.prototype, Boolean.prototype 을 사용할 수 있는 것이고 해당 프로퍼티를 제공하고 나면 사라진다.
아닐 수도 있음 ... 나의 뇌는 활동을 멈춘건가 ㅎㅎ🤯
Object.prototype
는 함수 객체만 가지고 있는 프로퍼티이다.
그래서 그냥 객체인kimcoding.prototype
이 undefined 가 나온 것이다!
__Proto__
은 모든 객체가 가지고 있다 그래서kimcoding.__proto__
를 이용해 생성자 함수(부모)의 prototype 객체를 참조 할 수 있는 것!