[모던 자바스크립트 딥다이브] 19장 프로토타입

FE/리뷰

[모던 자바스크립트 딥다이브] 19장 프로토타입

따봉치치 2024. 4. 11. 21:45

728x90

자바스크립트

명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어
객체 기반의 프로그래밍 언어
자바스크립트를 이루고 있는 거의 모든 것이 객체임

객체지향 프로그래밍

프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적인 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임
실세계의 실체를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작
실제는 특징이나 성질을 나타내는 속성을 가짐. 속성으로 실제를 인식하거나 구별함
다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현하는 것을 추상화라고 함
객체 : 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복잡적인 자료구조, 상태 데이터(프로퍼티)와 동작(메소드)을 하나의 논리적인 단위로 묶은 복합적인 자료구조
객체의 상태를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동작을 하나의 논리적인 단위로 묶어 생각함

상속과 프로토타입

동일한 생성자 함수에 의해 생성된 모든 인스턴스가 동일한 메서드를 중복 소유하는 것은 메모리 낭비
상속을 통해 불필요한 중복 제거 가능
자바스크립트는 프로토타입을 기반으로 상속 구현
상속은 코드의 재사용 관점에서 매우 유용
생성자 함수가 생성할 모든 인스턴스가 공통적으로 사용할 프로퍼티나 메서드를 프로토타입에 미리 구현해 두면 생성자 함수가 생성할 모든 인스턴스는 별도의 구현 없이 상위 객체인 프로토타입의 자산을 공유해서 사용 가능

function Circle(r) {
	this.r = r;
}

// Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메서드를
// 공유해서 사용할 수 있도록 프로토타입에 추가함
// 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있음
Circle.prototype.getArea = function() {
	return Math.PI * this.r ** 2;
}

const circle1 = Circle(1);
const circle2 = Circle(2);

// Circle 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는
// 프로토타입 Circle.prototype 으로부터 getArea 메서드를 상속받음
// 즉, Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메서드를 공유함
console.log(circle1.getArea === circle2.getArea); // true

프로토타입 객체

객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용함
프로토타입은 어떤 객체의 상위 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티를 제공함
프로토타입을 상속받은 하위 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용 가능
모든 객체는 [[Prototype]] 내부 슬롯을 가지며 값은 프로토타입의 참조임. 프로토타입은 객체 생성 방식에 의해 결정됨
모든 객체는 하나의 프로토타입을 갖음
모든 프로토타입은 생성자 함수와 연결됨
객체는 __proto__접근자로 자신의 프로토타입에 간접적으로 접근 가능, 프로토타입은 자신의 constructor 프로퍼티를 통해 생성자 함수에 접근 가능, 생성자 함수는 자신의 prototype 프로퍼티를 통해 프로토타입에 접근 가능

__proto__ 접근자 프로퍼티

모든 객체는 __proto__접근자로 자신의 프로토타입에 간접적으로 접근 가능
__proto__는 접근자 프로퍼티임
상속을 통해 사용됨 => 객체가 직접 소유하는 프로퍼티가 아닌 Object.prototype의 프로퍼티임
접근자 프로퍼티를 사용하는 이유는 상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지하기 위함
코드 내에서 직접 사용하는 것은 권장하지 않음 => Object,getPropertyOf , Object.setPropertyOf메서드 권장

Object.prototype은 프로토타입 체인의 최상위 객체임

함수 객체의 prototype 프로퍼티

함수 객체만이 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킴
생성자 함수로서 호출할 수 없는 함수는 prototype 프로퍼티를 소유하지 않음
__proto__ 접근자 프로퍼티와 함수 객체만이 가지는 prototype 프로퍼티는 결국 동일한 프로토타입을 가리킴

구분	소유	값	사용 주체	사용 목적
__proto__	모든 객체	프로토타입의 참조	모든 객체	객체가 자신의 프로토타입에 접근 또는 교체하기 위해 사용
prototype 프로퍼티	constructor	프로포타입의 참조	생성자 함수	생성자 함수가 자신이 생성할 객체의 프로토타입을 할당하기 위해 사용

프로토타입의 constructor 프로퍼티와 생성자 함수

모든 프로토타입은 constructor 프로퍼티를 갖음
자신을 참조하고 있는 생성자 함수를 가리킴
생성자 함수가 생성될 때 연결이 이뤄짐

리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입

리터럴 표기법에 의해 생성된 객체의 경우 프로토타입의 constructor 프로퍼티가 가리키는 생성자 함수가 반드시 객체를 생성한 생성자 함수는 아님
객체 리터럴이 평가될 때는 추상연산 OrdinaryObjectCreate를 호출해 빈 객체를 생성하고 프로퍼티를 추가하도록 정의되어 있음
리터럴 표기법에 의해 생성된 객체도 상속을 위해 프로토타입이 필요하므로 가상적인 생성자 함수를 갖음
프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재함

프로토타입의 생성 시점

프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성됨
생성자 함수는 사용자 정의 생성자 함수와 자바스크립트가 기본 제공하는 빌트인 생성자 함수로 구분됨
객체가 생성되기 이전에 생성자 함수와 프로토타입은 이미 객체화되어 존재함!

사용자 정의 생성자 함수와 프로토타입 생성 시점

생성자 함수로서 호출할 수 있는 함수는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성됨
함수 선언문이 런타임 이전에 실행되므로 이 때, 함수 객체가 생성되면서 프로토타입도 더불어 생성됨

빌트인 생성자 함수와 프로토타입 생성 시점

일반 함수와 마찬가지로 빌트인 생성자 함수가 생성되는 시점에 프로토타입이 생성됨
모든 빌트인 생성자 함수는 전역 객체가 생성되는 시점에 생성됨

객체 생성 방식과 프로토타입의 결정

추상 연산 OrdinaryObjectCreate는 필수적으로 자신이 생성할 객체의 프로토타입을 인수로 전달 받음
자신이 생성할 객체에 추가할 프로퍼티 목록을 옵션으로 전달할 수 있음
빈 객체를 생성한 후, 객체에 추가할 프로퍼티 목록이 인수로 전달된 경우 프로퍼티를 객체에 추가함
프로토타입은 추상 연산에 전달되는 인수에 의해 결정됨
객체 리터럴에 의해 생성되는 객체의 프로토타입은 Object.prototype임 (리터럴 내부에 프로퍼티 추가)
Object 생성자 함수에 의해 생성되는 객체의 프로토타입은 Object.prototype임 (빈 객체에 프로퍼티 추가)
new 연산자와 함께 생성자 함수에 의해 생성되는 객체의 프로토타입은 생성자 함수의 prototype 프로퍼티에 바인딩되어 있는 개체임

프로토타입 체인

자바스크립트는 객체의 프로퍼티에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색함
이를 프로토타입 체인이라 함
프로토타입 체인은 자바스크립트가 객체지향 프로그래밍의 상속을 구현하는 매커니즘
프로토타입 체인의 최상위(종점)는 언제나 Object.prototype
프로토타입 체인의 종점에서도 프로퍼티를 검색할 수 없는 경우 null이 아닌 undefined 반환함
프로토타입 체인은 상속과 프로퍼티 검색을 위한 매커니즘
스코프 체인과 프로토타입 체인은 서로 연관없이 별도로 동작하는 것이 아니라 서로 협력하여 식별자와 프로퍼티를 검색하는 데 사용함

call 메서드

this로 사용할 객체를 전달하면서 함수를 호출함

오버라이딩과 프로퍼티 섀도잉

const Person = (function() {
	// 생성자 함수
	function Person(name) {
    	this.name = name;
    }
    
    //프로토타입 메서드
    Person.prototype.sayHello = function () {
    	console.log(`Hi! My name is ${this.name}`);
    }
    
    //생성자 함수를 반환
    return Person;
}());

const me = new Person('Lee');

//인스턴스 메서드
me.sayHello = function () {
	console.log(`Hey! My name is ${this.name}`);
};

//인스턴스 메서드가 호출됨. 프로토타입 메서드는 인스턴스 메서드에 의해 가려짐
me.sayHello();

프로토타입이 소유한 프로퍼티를 프로토타입 프로퍼티라고 함
인스턴스가 소유한 프로퍼티를 인스턴스 프로퍼티라고 함
프로토타입 프로퍼티와 같은 이름의 프로퍼티를 인스턴스에 추가하면 프로토타입 프로퍼티를 덮어쓰는 것이 아니라 인스턴스 프로퍼티로 추가됨
프로퍼티 섀도잉 : 상속 관계에 의해 프로퍼티가 가려지는 현상
오버라이딩 : 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용하는 방식

오버로딩 : 함수의 이름은 동일하지만 매개변수의 타입 또는 개수가 다른 메서드를 구현하고 매개변수에 의해 메서드를 구별하여 호출하는 방식
자바스크립트는 오버로딩을 지원하지 않지만 구현할 수는 있음

delete me.sayHello(); // 인스턴스 프로퍼티 삭제

delete Person.prototype.sayHello(); // 프로토타입 프로퍼티 삭제

하위 객체를 통해 프로토타입의 프로퍼티를 변경 또는 삭제하는 것은 불가능
프로토타입 프로퍼티를 변경 또는 삭제하려면 하위 객체를 통해 프로토타입 체인으로 접근하는 것이 아닌 프로토타입에 직접 접근해야함!

프로토타입 교체

프로토타입은 임의의 다른 객체로 변경가능함
생성자 함수 또는 인스턴스에 의해 교체됨

생성자 함수에 의한 프로토타입의 교체

const Person = (function() {
	function Person(name) {
    	this.name = name;
    }
  	// 생성자 함수의 prototype 프로퍼티를 통해 프로토타입 교체
    Person.prototype = {
    	constructor : Person, // constructor 프로퍼티와 생성자 함수 간의 연결 설정 추가!
    	sayHello() {
        	console.log(`Hi! My name is ${this.name}`);
        }
    	
    }
    return Person;
}());

생성자 함수의 prototype 프로퍼티를 사용해 프로토타입 교체 => 미래에 생성할 인스턴스의 프로토타입 교체
Person 생성자 함수가 생성할 객체의 프로토타입을 객체 리터럴로 교체
이때, 프로토타입으로 교체한 객체 리터럴에는 constructor 프로퍼티가 없음 => 자바스크립트 엔진이 프로토타입을 생성할 때 암묵적으로 추가하는 프로퍼티이므로

인스턴스에 의한 프로토타입의 교체

인스턴스의 __proto__ 접근자 프로퍼티를 통해 프로토타입 교체 => 이미 생성된 객체의 프로토타입 교체
역시 constructor 프로퍼티 연결이 파괴됨

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

const me = new Person('Lee');

const parent = {
	sayHello() {
    	console.log(`Hi! My name is ${this.name}`);
    }
};

// me 객체의 프로토타입을 parent 객체로 교체
Object.setPrototypeOf(me, person);

instanceof 연산자

이항 연산자
좌변의 객체를 가리키는 식별자, 우변에 생성자 함수를 가리키는 식별자를 피연산자로 받음
만약 우변의 피연산자가 함수가 아닌 경우 TypeError를 반환
우변의 생성자 함수의 prototype에 바인딩된 객체가 좌변의 객체의 프로토타입 체인 상에 존재하면 true, 아니면 false
생성자 함수의 prototype에 바인딩된 객체가 프로토타입 체인 상에 존재하는지 확인함

객체 instaneof 생성자 함수

function Person(name) {
	return this.name;
}

const me = new Person('d');

console.log(me instaneof Person); // true, Person.prototype이 me 객체의 프로토타입 체인 상에 존재하므로
console.log(me instaneof Object); // true, Object.prototype이 me 객체의 프로토타입 체인 상에 존재하므로

직접 상속

Object.create에 의한 직접 상속

Object.create 메서드는 명시적으로 프로토타입을 지정해 새로운 객체를 생성함
첫 번째 매개변수에 전달한 객체의 프로토타입 체인에 속하는 개체를 생성함
즉, 객체를 생성하면서 직접적으로 상속을 구현하는 것
new 연산자 없이도 객체를 생성할 수 있음
프로토타입을 지정하면서 객체 생성 가능
객체 리터럴에 의해 생성된 객체 상속 가능

객체 리터럴 내부에서 __proto__에 의한 직접 상속

객체 리터럴에 의해 객체를 생성하면서 프로토타입을 지정하여 직접 상속받기 가능

정적 프로퍼티/메서드

생성자 함수로 인스턴스를 생성하지 않아도 참조/호출할 수 있는 프로퍼티/메서드
생성자 함수가 생성한 인스턴스로 참조/호출 불가
정적 프로퍼티/메서드는 인스턴스의 프로토타입 체인에 속한 객체의 프로퍼티/메서드가 아님!
Object.create는 정적 메서드임
인스턴스/프로토타입 메서드 내에서 this를 사용하지 않으면 정적 메서드로 변경 가능
정적 메서드는 인스턴스 생성하지 않아도 호출 가능

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

Person.staticProp = 'static';

Person.staticMethod = function () {
	console.log('static method');
}

Person.staticMethod(); // static method

me.staticMethod(); // TypeError : me.staticMethod is not a function

프로퍼티 존재 확인

in 연산자

객체 내에 특정 프로퍼티가 존재하는지 여부 확인
확인 대상 객체의 프로퍼티뿐만 아니라 확인 대상 객체가 상속받는 모든 프로토타입의 프로퍼티를 확인함
ES6에 도입한 Reflect.has 대신 사용 가능

key in object

Object.prototype.hasOwnProperty 메서드

객체에 특정 프로퍼티가 존재하는지 확인 가능
인수로 전달받은 프로퍼티 키가 객체 고유의 프로퍼티 키일 경우에만 true 반환, 상속받은 프로퍼티 키인 경우 false 반환

프로퍼티 열거

for ... in 문

객체의 모든 프로퍼티를 순회하며 열거하기 위해 사용
객체의 프로퍼티 개수만큼 순회함
in 연산자 처럼 상속받은 프로퍼타입의 프로퍼티까지 열거함
이때 Object.prototype의 프로퍼티 키가 열거되지 않는 이유는 해당 프로퍼티의 프로퍼티 어트리뷰트 [[Enumerable]] 값이 false이기 때문
객체의 프로토타입 체인 상에 존재하는 모든 프로토타입의 프로퍼티 중에서 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true인 프로퍼티를 순회하며 열거함
키가 심벌인 프로퍼티는 열거하지 않음
키의 순서가 보장되지 않음

for (변수 선언문 in 객체) {...}

Object.keys / values / entries 메서드

Object.keys : 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환
Object.values : 객체 자신의 열거 가능한 프로퍼티 값을 배열로 반환
Object.entries : 객체 자신의 열거 가능한 프로퍼티 키와 값의 쌍의 배열을 배열에 담아 반환

728x90