Developer
DGENIE
전체 방문자
오늘
어제
  • 분류 전체보기 (9)
    • 자바 스크립트 (4)
    • 알고리즘 (1)
      • 이것이 코딩테스트다 스터디 (1)
      • 백준 (0)
    • Git (1)
    • MySQL (1)
    • Mac (1)
    • 컴퓨터 구조 (1)
    • 주간회고 (0)
    • 개발자 칼럼 (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Developer

DGENIE

자바 스크립트

[코어 자바스크립트 스터디] 6주차. 프로토타입

2021. 12. 23. 22:33

프로토타입의 정의

var instance = new Constructor();

  • prototype은 객체이며, prototype을 참조하는 __proto__ 도 객체이다.
  • prototype 이라는 프로퍼티와 __proto__ 라는 프로퍼티와의 관계가 프로토타입의 핵심 개념이다.
  • 생성자함수의 prototype에 어떤 메서드나 프로퍼티가 있다면, 인스턴스에서도 마치 자신의 것처럼 해당 메서드나 프로퍼티에 접근할 수 있게 된다.
  • "new 연산자로 constructor를 호출하면 instance가 만들어지는데, 이 instance 의 생략 가능한 프로퍼티인 __proto__ 는
    Constructor의 prototype을 참조한다"

  • __proto__ 의 경우, 생략 가능하며 실무에서는 잘 사용하지 않는다. 대신 Object.getPrototypeOf() , Object.create() 등을 이용하도록 합시다.

 

 

프로토 타입과 인스턴스 사이의 관계

 

Array를 new 연산자와 함께 호출해서 인스턴스를 생성하면, [1,2] 가 만들어집니다.

이 인스턴스의 __proto__은 Array.prototype 을 참조하는데, __proto__가 생략가능하도록 설계돼 있기 때문에 인스턴스가 push, pop, forEach 등의 메서드를 자신의 것처럼 호출할 수 있습니다.

한편 Array의 prototype 내부에 있지 않는 from, isArray 등의 메서드들은 인스턴스가 직접 호출할 수 없습니다.

 

 

이들은 Array 생성자 함수에서 직접 접근해야 실행이 가능합니다.
var arr = [1,2];
arr.isArray(); // 사용 불가
Array.isArray(arr); // 사용 가능

 

 

Constructor 프로퍼티

생성자 함수의 프로퍼티인 prototype 객체 내부에는 constructor 라는 프로퍼티가 있습니다.

인스턴스의 __proto__ 객체 내부에도 마찬가지입니다.

constructor 프로퍼티는 원래의 생성자 함수(자기 자신)을 참조합니다. 이 프로퍼티는 일반적으로는 값을 바꿀 수 있습니다.

 

constructor 프로퍼티 변경을 못 하는 경우 : number , string, boolean (기본형 리터럴 변수)

 

var NewConstructor = function () {
	console.log("newConstructor");
}

var dataTypes = [
	'test' , // String & false
    new Array() // NewConstructor & false
];

dataTypes.forEach(function (d) {
    d.constructor = NewConstructor;
    console.log(d,constructor.name , '&' , d instanceof NewConstructor);
});

모든 데어터가 d instanceof NewConstructor 결과값을 false 로 반환한다.

즉,

constructor를 변경하더라도 참조하는 대상이 변경될 뿐 이미 만들어진 인스턴스의 원형이 바뀌진 않는다는 것을 알 수 있습니다.
그러므로, 어떤 인스턴스의 생성자 정보를 알아내기 위해 constructor를 이용할 수는 있지만, 인스턴스의 원형을 알기위해 constructor를 이용한다는 것은 안전한 방법은 아닙니다.

 

 

 

메서드 오버라이드

정의 : 원본을 제거하고, 다른 대상으로 교체하는 것이 아니라 원본이 그대로 있는 상태에서 다른 대상을 그 위에 얹는 것

 

자바스크립트엔진이 getName 이라는 메서드를 찾는 방식은 가장 가까운 대상인 자신의 프로퍼티를 검색하고, 없으면 그다음으로 가까운 대상인 __proto__를 검색하는 순서로 진행된다.

 

 

프로토타입 체인

배열 리터럴의 __proto__ 에는 __proto__ 와 동일한 내용으로 또다시 __proto__ 가 등장합니다. 

prototype 객체가 "Object" 이기 때문입니다. 기본적으로 모든 객체의 __proto__ 에는 Object.prototype이 연결됩니다. 

어떤 데이터의 __proto__ 프로퍼티 내부에 다시 __proto__ 프로퍼티가 연쇄적으로 이어진 것을 프로토타입 체인 이라고 하고, 이 체인을 따라가며 검색하는 것을 프로토타입 체이닝 이라고 합니다.

'자바 스크립트' 카테고리의 다른 글

[코어 자바스크립트 스터디] 7주차. 클래스  (0) 2022.01.06
[코어 자바스크립트 스터디] 5주차. 클로저  (2) 2021.12.16
[코어 자바스크립트 스터디] 1주차. 데이터 타입  (0) 2021.12.03
    '자바 스크립트' 카테고리의 다른 글
    • [코어 자바스크립트 스터디] 7주차. 클래스
    • [코어 자바스크립트 스터디] 5주차. 클로저
    • [코어 자바스크립트 스터디] 1주차. 데이터 타입
    Developer
    Developer

    티스토리툴바