📌 4-1 생성자 함수란?
ES6 문법 이전에 함수를 클래스형태로 사용할 수 있는 함수이다.
💡 new 연산자를 사용하여 클래스처럼 객체를 생성한다. (인스턴스 생성)
💡 this를 사용하여 외부에서 접근할 수 있도록 한다.
💡 var, let, const 사용하여 변수를 생성하면 생성자함수 안에서만 연산이 된다.
💡 Class Naming 처럼 파스칼 표기법을 사용하여 구별할 수 있도록 한다.
📌 4-2 생성자 함수를 사용이유
인스턴스를 생성하는 클래스처럼 객체를 효율적으로 생성할 수 있다.
// 좌항 피연산자가 10 우항 피연산자가 2 더하기 연산을 수행하는 add()를 포함하는 Obj생성 const sum1 = { num1 : 10, num2 : 2, add() { return this.num1 + this.num2; } } // 좌항 피연산자가 10 우항 피연산자가 10 더하기 연산을 수행하는 add()를 포함하는 Obj생성 const sum2 = { num1 : 10, num2 : 10, add() { return this.num1 + this.num2; } } console.log(sum1.add()); // 12 출력 console.log(sum2.add()); // 20 출력객체리터럴로 생성하면 다른 결과값을 얻기 위해서 계속 동일한 프로퍼티를 갖는 객체를 여러개 생성한다.
// 생성자 함수를 이용한 Obj 생성 function Sum(num1, num2) { this.num1 = num1; this.num2 = num2; this.add = function() { return this.num1 + this.num2; } } // 인스턴스 sum1 생성 const sum1 = new Sum(10, 2); // 인스턴스 sum2 생성 const sum2 = new Sum(10, 10); console.log(sum1.add()); // 12 출력 console.log(sum2.add()); // 20 출력이와 같이 효율적으로 다른 결과값의 객체를 생성할 수 있다.
📌 4-3 생성자 함수의 외부접근 내부접근
-
생성자 함수를 이용하면 외부접근이 가능한 변수 this와 외부접근이 불가능한 변수를 만들수 있다.
-
var를 사용하여도 함수 레벨 스코프이기 때문에 외부로 전역변수화가 일어나진 않지만 내부에서는 일어나기 때문에 const와 let을 사용한다.
function Sum(num1, num2) { this.num1 = num1; this.num2 = num2; const numPrivate = 2; this.add = function() { return this.num1 + this.num2 - numPrivate; } } // 인스턴스 생성 const sum1 = new Sum(10, 2); // 외부에서 접근 가능 console.log(sum1.num1); // 10 출력 console.log(sum1.numPrivate); // undefined 출력 console.log(sum1.add()); // 10 출력이와 같이 내부에서만 사용가능한 변수와 외부에서 접근 가능한 변수를 생성한다.
📌 4-4 생성자 함수의 생성조건
생성자 함수로 인스턴스를 생성할려면 일반 함수로 정의된 함수만 가능하다.
// 함수 선언문 function Sum(num1, num2) { this.num1 = num1; this.num2 = num2; this.add = () => { return this.num1 + this.num2; } } // 함수 표현식 const FunSum = function (num1, num2) { this.num1 = num1; this.num2 = num2; this.add = () => { return this.num1 + this.num2; } } // 화살표 함수 정의식 const ArrowSum = (num1, num2) => { this.num1 = num1; this.num2 = num2; this.add = () => { return this.num1 + this.num2; } } // 각각 인스턴스 생성 const sum1 = new Sum(10, 2); const sum2 = new FunSum(10, 2); const sum3 = new ArrowSum(10, 2); console.log(sum1.add()); // 12 출력 console.log(sum2.add()); // 12 출력 console.log(sum3.add()); // 오류 출력 👉 'ArrowSum is not a constructor' (오류)이유는 함수를 생성할 때 가지고 있는 내부 메서드에 의한 현상이다.
1. 일반 함수로 호출을 하면 내부메서드 [[Call]]이 호출된다.
2. new 연산자와 생성자 함수가 호출이 되면 내부 메서드 [[Construct]]가 호출되기 때문이다.💡 그러므로 생성자 함수 안에서 사용한 화살표 함수는 메서드로는 사용이 가능하지만 생성자 함수로는 사용이 불가능하다.
📌 4-5 Callable, Constructor
함수 표현식의 prototype과 화살표 함수 정의식의 prototype을 확인해보면 생성자 함수로 사용할 수 없는 이유를 확인이 가능하다.
const generalFunction = function () {} // 함수 표현식 const arrowFunction = () => {} // ES6 화살표 함수 정의식 console.log(generalFunction.prototype); // 이미지 참고 console.log(arrowFunction.prototype); // undefined 출력👀 generalFunction의 프로토타입에 constructor의 메서드로 인해 생성자함수로 호출이 가능하다.
📌 4-6 생성자 함수의 this
this가 가르키는 객체는 크게 3가지로 바인딩 된다.
1. 함수호출 this -> 전역 객체
2. 객체 메서드로서 호출 -> 메서드 호출 객체
3. 생성자 함수로서 호출 -> 생성한 인스턴스 객체// 함수 생성 function generalFunction(num1, num2) { console.log(this); return num1 + num2; } // 객체 생성 const object = { num1 : 10, num2 : 10, add : function() { console.log(this); return this.num1 + this.num2; } } // 생성자 함수 생성 function ConstructorFunction(num1, num2) { this.num1 = num1; this.num2 = num2; this.add = () => { console.log(this); return this.num1 + this.num2; } } // sum1에 함수호출값 저장 const sum1 = generalFunction(10, 10); // sum2에 오브젝트 저장 const sum2 = object; // sum3, sum4에 인스턴스 생성 const sum3 = new ConstructorFunction(10, 10); const sum4 = new ConstructorFunction(10, 10); // this가 인스턴스를 가르키는지 확인하기 위해서 sum5에 obj 저장 const sum5 = object; // obj안에 있는 num1에 20 재할당 sum2.num1 = 20; // 인스턴스 객체 sum4에 this.num1 = 20 재할당 sum4.num1 = 20; console.log(sum1); // 20 출력 전역객체 this console.log(sum2.add()); // 30 출력 객체 Obj 가르키는 this 출력 console.log(sum3.add()); // 20 출력 새롭게 생성된 인스턴스를 가르키는 this 출력 console.log(sum4.add()); // 30 출력 새롭게 정의된 인스턴스를 가르키는 this 출력 console.log(sum5.add()); // 30 출력 객체 obj 가르키는 this 출력
📃 4-6 설명
- 객체와 배열은 원시값이 아니므로 변수에 값이 저장되는 것이 아닌 배열과 객체를 가리키는 주소값이 저장된다고 생각하면 이해가 빠르다.
- sum2.num1를 20으로 바꾸면 sum5도 obj 주소값이 저장되어 있으므로 sum5의 출력값도 obj의 값이 변했으므로 바뀌게 되는것이다.
- sum4.num1를 20으로 바꾸더라도 인스턴스는 새롭게 생긴 객체이기 때문에 sum3과 sum4는 주소값을 다르게 가지는 객체 2개가 생성이 된다. 그래서 결과값도 바뀌지 않는다.
📌 4-7 생성자 함수의 결과값 반환
생성자 함수의 결과값은 this 객체이다.
// 생성자 함수 생성 function ConstructorFunction(num1, num2) { // 1. 빈 객체를 생성하고 this를 바인딩한다. (빈 객체 생성) // 2. this에 바인딩 값을 초기화 하고 생성자 함수가 받은 초기값을 할당한다. this.num1 = num1; this.num2 = num2; this.add = () => { return this.num1 + this.num2; } /* 3. 생성자 함수의 실행문이 종료되면 암묵적으로 생성자 함수가 받은 초기값으로 바인딩된 this를 반환한다. */ // 명시적으로 return 값을 원시값으로 지정한다. return 0; } const sum = new ConstructorFunction(10, 10); console.log(sum);
// 생성자 함수 생성 function ConstructorFunction(num1, num2) { this.num1 = num1; this.num2 = num2; this.add = () => { return this.num1 + this.num2; } // 명시적으로 return 값을 객체로 지정한다. (함수도 객체이다.) return {}; // function () {} 바꾸면 함수가 출력된다. } const sum = new ConstructorFunction(10, 10); console.log(sum);
function ConstructorFunction(num1, num2) { this.num1 = num1; this.num2 = num2; this.add = () => { return this.num1 + this.num2; } // 명시적으로 return 값을 this로 지정 return this; } const sum = new ConstructorFunction(10, 10); console.log(sum);
💡 생성자 함수는 생성된 인스턴스의 this 객체를 return 한다.
📌 4-8 생성자 함수 메서드를 prototype으로 생성하기
졸업작품 프로젝트를 하다가 본 템플릿 모듈에서는 생성자 함수 메서드를 prototype으로 생성하고 있었다. 이것도 깔끔해보여서 졸업작품 프로젝트에서는 모듈을 만들 때 이렇게 사용했었다.
function ConstructorFunction(num1, num2) { this.num1 = num1; this.num2 = num2; } ConstructorFunction.prototype.add = function() { return this.num1 + this.num2; } const sum = new ConstructorFunction(10, 10); console.log(sum.add()); // 20 출력👉 bind(), call(), apply(), ES6 new.target 등등 생성자 함수의 개념들이 아직 많은것 같다... 너무 길어질꺼 같아서 다음에 다시 정리해 봐야겠다.
