Javascript : 생성자 함수에 의한 객체 생성 : 함수와 일급 객체

스파로스 아카데미에서 진행중인 Javascript 스터디 2주차 모던 자바스크립트 Deep Dive를 통해 진행중 이번주 내가 발표한 내용은 생성자 함수에 의한 객체 생성, 함수와 일급 객체 부분이다. 저번주에 비해 난이도가 확 올라간 느낌! 발표를 진행하면서 질문 들어오면 대답 못할까봐 걱정 많이 했다. (질문이 안들어왔다) 책을 보고 정리한거지만 제 생각이 들어가면서 잘못된 부분이 있을 수 있습니당.......,,,,,,＼(º □ º l|l)/ 혹시 있다면 댓글 남겨주세요

---

객체 생성 방법

객체 리터럴 Object 생성자 함수 생성자 함수 Object.create 메서드 클래스(ES6)

생성자 함수에 의한 객체 생성

Object 생성자 함수

new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환

Object 생성자 함수를 사용해 객체를 생성하는 방식은 특별한 이유가 없다면 그다지 유용하지 않아 보임

 

생성자 함수

생성자 함수 방식의 장점

생성자 함수에 의한 객체 생성 방식은 객체를 생성하기 위한 템플릿처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있음

마치 붕어빵 틀을 사용하는 것 처럼 비슷한 모양의 객체 생성 가능

팥이 든 붕어빵... 슈크림이 든 붕어빵...

New 연산자와 함께 호출하면 생성자 함수로 동작한다

"안녕 나는수아"를 출력하는 객체 생성 왼쪽< Object생성자 함수 오른쪽> 생성자 함수

생성자 함수의 인스턴스 생성 과정

생성자 함수의 역할은 프로퍼티 구조가 동일한 인스턴스를 생성하기 위한 템플릿으로서 동작하여 인스턴스를 생성하는 것과 생성된 인스턴스를 초기화(인스턴스 프로퍼티 추가 및 초기값 할당)하는 것이다.

 

인스턴스 생성과 this 바인딩 -> 인스턴스 초기화 -> 인스턴스 반환

 

내부 메서드 [[Call]]과 [[Construct]]

함수는 객체이므로 일반 객체와 동일하게 동작할 수 있다.

하지만 함수는 일반 객체와 다른데, 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다.

 

함수가 일반 함수로서 호출되면 함수 객체의 내부 메서드 [[Call]]이 호출되고 new연산자와 함께 생성자 함수로서 호출되면 내부 메서드 [[Construct]]가 호출된다.

constructor와 non-constructor의 구분

Constructor	non-constructor
[[Construct]]를 가지는 함수 객체 일반 함수 또는 생성자 함수로서 호출할 수 있는 객체	[[Construct]]를 가지지 않는 함수 객체 일반 함수로서만 호출할 수 있는 객체
함수 선언문 함수 표현식 클래스	메서드 화살표 함수

new 연산자

• new연산자와 함께 함수를 호출하면 해당 함수는 생성자 함수로 동작
• new 연산자와 함께 호출하는 함수는 non-constructor가 아닌 constructor이어야 한다.

함수와 일급 객체

일급객체

일급객체란

• 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.
• 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
• 함수의 매개변수에 전달할 수 있다.
• 함수의 반환값으로 사용할 수 있다.

자바스크립트의 함수는 일급 객체

 

함수 객체의 프로퍼티

arguments 프로퍼티

• arguments 프로퍼티 값은 arguments 객체다

 

매개변수 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용

 

Caller 프로퍼티

• 비표준 프로퍼티
• 함수 자신을 호출한 함수를 가리킨다
• 참고로만 알아두고 지나쳐도 좋다

length 프로퍼티

• 함수를 정의할 때 선언한 매개변수의 개수를 가리킨다

function foo() {}
console.log(foo.length); //0

function bar(x){}
console.log(bar.length); //1

function sua(x,y,z){}
console.log(sua.length); //3

name 프로퍼티

• 함수 이름을 나타낸다

// 기명 함수 표현식
var nameFunc = function foo(){}
console.log(namedFunc.name); //foo

// 익명 함수 표현식
var anonymousFunc = functon() {}
console.log(anonymousFunc.name) // anonymousFunc

// 함수 선언문
function bar() {}
console.log(bar.name) // bar

__proto__접근자 프로퍼티

• [[Prototype]]내부 슬롯이 가리키는 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티
• 접근자 프로퍼티를 통해 간접적으로 프로토타입 객체에 접근할 수 있다

prototype 프로퍼티

• constructor만이 소유하는 프로퍼티
• 생성자 함수로 호출할 수 없는 non-constructor에는 prototype프로퍼티가 없다.

---

다른 내용은 여기서

프로퍼티 어트리뷰트	https://ccamanglab.tistory.com/60