[모던 JavaScript 튜토리얼] - [4.5] new 연산자와 생성자 함수

IRISH·2024년 1월 26일

JS

목록 보기

45/80

학습 내용

유사항 객체를 여러개 생성할 떄는 new 연산자를 통해서 쉽게 여러개를 생성할 수 있다. (보통 첫글자는 대문자로씀)
작동원리

function User(name) {

	// this = {}; (빈 객체가 암시적으로 만들어짐)
	
	// 새로운 프로퍼티를 this에 추가함
	
	this.isAdmin = false;
	
	// return this; (this가 암시적으로 반환됨)

}

3. new.target 을 사용하면 해당 함수가 new와 함께 호출되었는지 알 수 있다.

만약 생성자에 return 문이 있다면 어떻게 될까?

객체를 return 하면 this 대신 해당 객체가 반환된다
원시타입을 return 하면 return 문이 무시가 되고 this를 반환한다.

실습 내용

1번

/* Question 1 > new A()==new B()가 성립 가능한 함수 A와 B를 만드는 게 가능할까요? */
function A() { /* 내용 */ }
function B() { /* 내용 */ }

let a = new A;
let b = new B;

console.log( a == b ); // false

/* Answer 1 > 두 함수 모두 this 대신에 객체를 반환하게 하면 됩니다. */
let obj = {};

function A() { return obj; }
function B() { return obj; }

alert( new A() == new B() ); // true

2번

/* 아래와 같은 세 개의 메서드를 가진 생성자 함수, Calculator를 만들어보세요.

read() – prompt 함수를 이용해 사용자로부터 값 두 개를 받고, 이를 객체 프로퍼티에 저장합니다.
sum() – 프로퍼티에 저장된 값 두 개를 더한 후 반환합니다.
mul() – 프로퍼티에 저장된 값 두 개를 곱한 후 반환합니다. */

// 예시
let calculatorSample = new CalculatorSample();
CalculatorSample.read();

alert( "Sum=" + CalculatorSample.sum() );
alert( "Mul=" + CalculatorSample.mul() );

// 정답
function Calculator() {

    this.read = function() {
      this.a = +prompt('a?', 0);
      this.b = +prompt('b?', 0);
    };
  
    this.sum = function() {
      return this.a + this.b;
    };
  
    this.mul = function() {
      return this.a * this.b;
    };
  }
  
  let calculator = new Calculator();
  calculator.read();
  
  alert( "Sum=" + calculator.sum() );
  alert( "Mul=" + calculator.mul() );

3번

/* 누산기 만들기 */
/* 
생성자 함수 Accumulator(startingValue)를 만들어 보세요.

Accumulator(startingValue)를 이용해 만드는 객체는 아래와 같은 요건을 충족해야 합니다.

프로퍼티 value에 현재 값(current value)을 저장합니다. 최초 호출 시엔 생성자 함수의 인수, startingValue에서 시작값(starting value)을 받아옵니다.
메서드 read()에선 prompt 함수를 사용해 사용자로부터 숫자를 받아오고, 받은 숫자를 value에 더해줍니다.
프로퍼티 value엔 startingValue와 사용자가 입력한 모든 값의 총합이 더해져 저장됩니다.

데모를 위한 코드는 다음과 같습니다.
*/
// 예시 
let accumulatorSample = new AccumulatorSample(1); // 최초값: 1

accumulatorSample.read(); // 사용자가 입력한 값을 더해줌
accumulatorSample.read(); // 사용자가 입력한 값을 더해줌

alert(accumulator.value); // 최초값과 사용자가 입력한 모든 값을 더해 출력함

// 해답
function Accumulator(startingValue) {
    this.value = startingValue;
  
    this.read = function() {
      this.value += +prompt('더할 값을 입력해주세요.', 0);
    };
  
}
  
let accumulator = new Accumulator(1);
accumulator.read();
accumulator.read();
alert(accumulator.value);