[JavaScript] 함수와 프로토타입 체이닝(4)

 

*함수 리턴 규칙

1. 일반 함수나 메서드는 리턴값을 지정하지 않을 경우 undefined 값이 리턴된다.

2. 생성자 함수에서 리턴값을 지정하지 않을 경우 생성된 객체가 리턴된다.

(예외상황1. 생성자함수에서 this로 바인딩되는 객체가 아닌 다른 객체에 리턴했을 때.

=> 그 다른 객체가 리턴된다.)

(예외상황 2. 생성자 함수의 리턴값으로 넘긴 값이 객체가 아닌 boolean, 숫자, 문자열일때

=> 이러한 리턴값 무시하고 this바인딩된 객체가 리턴된다.)

​

---

​

9. 프로토타입 체이닝

​

- 자바스크립트는 객체지향 언어가 아닌 프로토타입 기반 객체지향 언어이다.

- 따라서 자바스크립트는 클래스 개념이 없다. 이 때문에 객체 리터럴 또는 생성자 함수로 객체를 생성하는데,

이렇게 생성된 객체의 부모 객체가 바로 '프로토타입 객체'인 것이다.

​

- 상속 개념과 마찬가지로, 자식 객체는 부모 객체가 가지고 있는 프로퍼티 접근이나 메서드를 상속받아 호출하는 것이 가능하다.

​

9-(1) [[Prototype]] 링크

​

- JS의 모든 객체는 자신의 부모인 프로토타입 객체를 가리키는 참조링크 형태의 숨겨진 프로퍼티가 있다.

- ECMA Script 에서는 이러한 링크를 "암묵적 프로토타입 링크" 라고 부르며 이러한 링크는 모든 객체의 [[Prototype]]프로퍼티에 저장된다.

​

* 여기서 자바스크립트의 객체 생성 규칙을 다시 한 번 알아보자.

- JS에서 모든 객체는 자신을 생성한 함수의 prototype프로퍼티가 가리키는 프로토타입 객체를 자신의 부모 객체로 설정하는 [[Prototype]]링크로 연결한다.

​

9-(2) 프로토타입 체이닝이란?

​

- 자바스크립트에서 객체는 자기 자신의 프로퍼티 뿐 아니라, 자신의 부모역할을 하는 프로토타입 객체의 프로퍼티 또한 마치 자신의 것처럼 접근하는 게 가능하다고 했다.

이것을 가능하게 하는 것이 "프로토타입 체이닝" 이다.

​

*hasOwnProperty() 메서드를 예시로 들어보자.

- hasOwnProperty() 메서드 : 이 메서드를 호출한 객체에 인자로 넘긴 문자열 이름의 프로퍼티나 메서드가 있는지 체크하는 자바스크립트 표준 API 함수다.

​

예시)

이 코드의 결과값은 true다.

- 여기서 myObject.hasOwnProperty('name')); 은 => myObject객체 안 name이란 프로퍼티/메서드가 있는가를 묻는 것이다.

​

* 객체 리터럴로 생성한 객체는 Object()라는 내장 생성자 함수로 생성된다.

(이 말은, Object()생성자 함수도 함수 객체이므로 prototype라는 프로퍼티 속성도 있다.)

​

​

* 아래 그림은 객체 리터럴로 myObject 라는 객체를 생성 했을 때를 사진으로 나타낸 것이다.

- 위 내용을 보고, 프로토타입 체이닝을 다시 설명하자면

JS에서 특정 객체의 프로퍼티나 메서드에 접근하려 할 때, 해당 객체에 접근하려는 프로퍼티 또는 메서드가 없다면 [[Prototype]]링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티를 차례대로 검색하는 것​을

"프로토타입 체이닝"이라고 하는 것이다.

​

- 여기서 Object.Prototype 객체는 JS의 모든 객체의 조상 역할을 하는 객체로서, JS 모든 객체가 호출할 수 있는 toString(), hasOwnProperty() 등과 같은 표준 메서드를 제공하고 있다.

(다시 말해, hasOwnProperty()는 JS 표준 API로 Object.Prototype에 포함된다는 것이다.)

​

- 9-(3) 생성자 함수의 프로토타입 체이닝

​

​

- 여기서 console.log(foo.hasOwnProperty('name')); 의 값은 true가 나온다.(값이 나옴.)

- Person.prototype 에 hasOwnProperty() 메서드가 없으므로 값이 안나올 것이라 생각할 수 있는데, 프로토타입 체이닝은 Object.Prototype객체로 계속 이어지기 때문에 에러가 발생하지 않는다.

​

- 위 코드에서 객체와 프로토타입 객체의 관계를 그린 그림이다.

​

---

10. 기본 데이터타입 확장

​

- JS의 모든 객체에서 호출 가능한 hasOwnProperty()나 isPrototypeOf()등과 같은 표준 메서드들은 Object.Prototype에 정의되어있다.

- 이와 같은 방식으로 JS의 문자열, 숫자, 배열 등에서 사용되는 표준 메서드들의 경우, 이들의 프로토타입인 Number.prototype, String.prototype. . . 등에 정의되어 있다.

- 물론, 이러한 기본 내장 프로토타입 객체 또한 Object.prototype을 자신의 프로토타입으로 가지고 있어 프로토타입 체이닝으로 연결된다.

​

* JS는 Object.prototype, String.ptototype 등과 같이 표준 빌트인 프로토타입 객체에도

사용자가 직접 정의한 메서드들을 추가하는 것을 허용한다.

​

ex)

결과값 = String.prototype 테스트 메서드

- 위 코드는 보다싶이 문자열의 표준 빌트인 프로토타입 객체 String.prototype에 testMethod를 추가한 것이다. 이제, 이후 문자열에서는 testMethod()를 문자열 API처럼 사용할 수 있다.

​

- 다시 말해, 프로토타입 체이닝으로 String.prototype에 정의한 testMethod()를

호출하는 것이 가능하다는 것이다.

​

위 코드를 그림으로 나타낸 것이다.

- 결론적으로, String.prototype 또한 자신의 프로토타입이 있으며,

그것이 바로 Object.prototype 이라는 것이다.

-> 따라서, 문자열 또한 프로토타입 체이닝으로 hasOwnProperty()

같은 메서드를 Object.prototype() 을 통해 호출이 가능한 것이다.

​

​