Object, Class, Prototype

cutiepazzipozzi·2023년 8월 16일

Challenge

목록 보기

6/7

(여기는 너무 어려운 개념이라, 문서들을 읽으며 내가 이해된 부분을 계속해서 추가해볼 예정이다. 아직은 반의반의반의반의반만 아는 것 같다)

자바스크립트도 자바와 마찬가지로 타입은 원시타입과, 참조타입으로 나뉜다. (그냥 알아보자면) 원시 타입 그니까 기본형에는 symbol, number, string, boolean, null, undefined가 있다.

다음으로 알아볼 참조형이 제목에서 스포된 Object(객체)이다.

객체(Object)

다양한 Key나, 엔티티들(Array, Function, ..)을 나타내기 위해 등장한 개념이다.

객체는 key와 value로 구성된 프로퍼티들의 집합이며, 이 프로퍼티가 함수라면 이는 메서드로 부른다. (여기서 JS의 함수는 일급 객체이기 때문에 함수를 값처럼 취급할 수 있음)

++ Prototype과의 연관성

JS에서 객체는 객체 간의 상속 개념을 구현하기 위해 Prototype 이라 불리는 (프로퍼티, 메서드)를 상속받는다.

Prototype은 쉽게 말하면 자신의 부모 역할을 담당하는 객체이다.

공통된 특성이 프로토타입 객체에 모이기에 참조만 하면 되어 메모리 자원의 효율성이 높지만, 링크를 통해 프로퍼티가 동적으로 수정되어 부수효과가 발생할 수 있다.
(메모리 자원의 효율성이 Prototype을 사용하는 이유이기도 함)

** 프로퍼티: 해당 객체의 특징!
-> 인스턴스와 정적 프로퍼티가 여기에
(ex. 객체명.프로퍼티 or 객체명[프로퍼티])

간단히 알아보는 프로토타입

JS는 프로토타입 기반 언어이므로, 다른 객체지향 언어들과는 달리 클래스 선언 없이도 프로토타입을 활용해 객체를 만들 수 있다.

부모 객체 = 프로토타입 객체
모든 객체는 [[Prototype]]이라는 내부 슬롯을 가짐.
일반 객체와 같이 프로퍼티 추가/삭제 모두 가능

[[Prototype]]

= Prototype Link
= 객체가 가지는 내부 슬롯
-> null or prototype 객체
-> 상속을 구현할 때 사용
-> __proto__(내부는 Object.getPropertyOf())를 통해 접근할 수 있다.

** 내부 슬롯?
ECMAScript 문서에서 JS 내부 동작 설명을 위해 정의해놓은 가상 메서드(Pseudo Property)
-> 내부 로직이기 때문에 직접 접근 or 호출이 불가능 하나 [[prototype]] 과 같은 내부 슬롯/메서드에 한해 간접 접근 수단을 제공한다.
(ex. Object.__proto__)
-> 여기서 데이터/접근자 프로퍼티에 따라 내부 슬롯도 달라짐
-> (실은 [[]]로 감싸진 개념들이 내부 슬롯/메서드이다)

[[Prototype]] VS Prototype 프로퍼티

둘 모두 프로토타입 객체를 가리키지만, 전자는 모든 객체가 가지고 있으면서 부모 객체나 함수 객체(Function.Prototype)를 가리키고 후자는 함수 객체'만' 가진다. Prototype 프로퍼티는 객체가 생성자로 사용되면 이 함수 객체를 통해 생성된 객체의 부모 역할을 한다.

`proto`

= 접근자 프로퍼티 (모든 객체가 가짐)
= 자신의 부모 객체를 가리킴

constructor 프로퍼티

= 객체의 입장에서 자신을 생성한 객체

프로토타입 객체는 constructor 프로퍼티를 가지며, 함수가 정의되면 그 함수에 constructor 자격이 주어진다.

function Student(name) {
	this.name = name;
}

const student = new Student("sk");

console.log(Student.prototype.constructor === Student); //true
console.log(student.constructor === Student); //true
console.log(Student.constructor === Function); //true

Prototype chain

[[Prototype]] 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메서드를 차례로 검색한다.

let student = {
	name: "judy",
  	age: 24
}

console.log(student.hasOwnProperty("name")); //true
//hasOwnProperty라는 메서드를 student가 직접적으로 가지진 X
//Prototype chain을 통해 프로토타입(Object) 메서드에 접근
console.log(student.__proto__ === Object.prototype) //true
//__proto__는 student의 부모 객체를 호출하고 
//이는 프로토타입 객체, 즉 Object.prototype를 말함

객체 생성 방식

리터럴 방식
Object 생성자 함수
생성자 함수

클래스 (ES6~)

공통된 속성이나 기능을 갖는 특정 객체를 생성하기 위해 변수 or 메서드를 정의하는 틀

JS에서는 함수의 한 종류
(내가 몰랐던 사실) get, set을 통해 getter, setter(계산된 프로퍼티) 지원

JS에서의 클래스

기존의 클래스는 인스턴스를 생성하게 되면 하나의 새로운 객체이기 때문에 서로 참조하지 않는다 (클래스를 설계도처럼 사용). 그러나 프로토타입 기반의 JS에서는 ‘클래스-인스턴스’ 개념이 아닌 ‘객체’ 개념만 갖는다. 이 말은 생성된 객체가 함수의 프로토타입 객체(부모)와 연결되어 있다는 말이다.