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

 

1. 객체란?

서로 연관된 함수와 변수를 그룹핑한 그릇으로, 객체 내의 변수를 property, 함수를 method라고 부른다.

---

2. 함수 표현식 방식

- 자바스크립트에서 함수는 일급객체로, 함수도 하나의 값처럼 취급한다.

​

* 일급 객체란? : 다음과 같은 조건을 만족할 때 일급 객체라고 말할 수 있다.

1. 변수나 데이터 구조 안에 담을 수 있다.

2. 파라미터로 전달 할 수 있다.

3. 반환 값(return value)로 사용할 수 있다.

4. 할당에 사용된 이름과 관계없이 고유한 구별이 가능하다.

5. 동적으로 프로퍼티 할당이 가능하다.

2-(1). 선언문 방식

ex)

​

2-(2). 함수 표현식

​

- 생성된 함수를 변수에 할당하여 함수를 생성하는 것을 "함수 표현식"이라고 한다.

*(참고) 참고로, 함수 표현식 방식(변수에 넣는 형식)의 경우에는 함수 끝에 세미콜론을 붙이는 것을 권장한다.

​

2-(3). Function() 생성자 함수

문법

- 일단 상식 수준으로는 알아두자.

​

- 여기서 함수 표현식만 사용을 권장하는데 그 이유는 코드 구조를 엉성하게 할 수 있기 때문이다.

(자바스크립트의 변수생성과 초기화가 분리되어 진행되기 때문이다.)

 

---

3. 프로토타입이란?

- 모든 객체는 자신의 부모 역할을 하는 객체를 가리키는 [[Prototype]] 라는 숨겨진 프로퍼티를 가진다.

​

3-(1) _proto_ 란?

- 모든 객체는 자신의 부모 역할을 하는 프로토타입 객체를 가리키는 숨겨진 프로퍼티가 있다.

- 이 프로퍼티를 ECMA Script 에서는 [[Prototype]]라고 명시하고있는데, 크롬 브라우저에서는 _proto_프로퍼티 형태로 구현해 놓았다.

---

4. 배열과 객체

- 배열 역시 객체이다. 그러나, 약간의 차이가 있다.

​

* 배열

- 자바스크립트 엔진이 []연산자 내에 숫자 사용 시 자동으로 문자열 형태로 바꿔줍니다.

- type of 연산결과 배열, 객체 모두 object입니다.

- 그냥 객체에는 length 프로퍼티가 없는 반면에, 배열객체는 length 프로퍼티가 있습니다.

 

* (참고) 일반 객체에서 push()메서드가 사용 불가능한 이유

- 배열과 객체가 자신의 부모인 프로토타입 객체가 다르기 때문입니다.

배열 객체의 프로토타입 객체 => Array.prototype

일반 객체의 프로토타입 객체 => Object.prototype

---

5. 함수 객체

- 함수도 일반 객체처럼 프로퍼티를 가질 수 있다.

- 함수 코드는 함수 객체의 [[code]] 내부 프로퍼티에 자동으로 저장된다.

- 자바스크립트에서 함수는 일급 객체이다. (위 2번내용 확인)

- 함수 자체를 값으로 취급한다.

---

6. 함수 객체의 프로퍼티

ex)

- 모든 함수는 length와 prototype 프로퍼티를 가져야 한다.

- name 프로퍼티 : 함수의 이름을 나타낸다.

- caller 프로퍼티 : 자신을 호출한 함수를 나타낸다. ( 호출 안하면 NULL값이다.)

- argument 프로퍼티 : 함수 호출 때 전달된 인자값의 정보 ( 이 또한 호출 안하면 NULL값.)

​

6-(1) 함수의 length 프로퍼티

- ECMA Script에서 정한 모든 함수가 가져야 하는 표준 프로퍼티이다.

- 함수가 정상적으로 실행될 때 기대되는 인자의 개수.

6-(2) 함수의 prototype 프로퍼티

- 모든 객체의 부모를 나타내는 prototype 프로퍼티와 다르다. (관점의 차이이다.)

- [[prototype]]은 객체 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리킨다.

- 함수의 prototype 프로퍼티는 constructor 프로퍼티 하나만 들어가있는 객체를 가리킨다.

- 자바스크립트에서는 함수를 생성할 때 함수 자신과 연결된 프로토타입 객체를 생성하며, 이 둘은 위

그림처럼 constructor 과 prototype라는 프로퍼티를 참조하게 된다.

 

​

* 자바스크립트의 객체생성 규칙

- 자바스크립트의 객체는 자신을 생성한 생성자 함수(객체를 만드는 역할을 하는 함수)의 prototype 프로퍼티가 가리키는 객체를 자신의 프로토타입 객체로 설정한다.

=> 선언문 방식으로 함수를 선언했을 때 그 함수의 [[prototype]]이 object인 이유가 바로

이유이다.

---

​

* 함수 객체와 프로토타입 객체의 관계

ex)

=> 실행결과

console.dir(myfunction.prototype);의 실행결과이다.

console.dir(myfunction.prototype.constructor);의 실행결과이다.

​

​